我对我正在从事的这个项目感到沮丧，哈哈。我正在使用 Video.js 创建一个网站，该网站将是用户上传比赛视频的网站。
我正在使用 twitter bootstrap，并且我已经从 PSD 创建了响应式设计，它在所有真实浏览器(ff、safari、chrome 等)中看起来都很棒。它甚至在 IE7、IE9 和 IE10 中看起来也相当不错。但是，由于某种原因，它在 IE8 中完全崩溃了。
我正在使用 jquery 脚本强制使用 16x9 宽高比，这就是问题所在。 IE8 完全忽略它，并且 html5 视频元素没有宽度或高度，因此它完全吓坏了浏览器。
有什么想法吗？最终我试图只拥有响应式宽度和 16x9 高度比。我正在使用的脚本工作得很好，但我必须能够支持 IE8。别关心7。
这是该网站的实时预览，它使用的是 codeigniter 框架，但这并不重要......
这是我的页面代码...
<!DOCTYPE html>
<html>
<head>
<title>Cover Song Contests | Rendition Battle</title>
<meta name="description" content="RenditionBattle.com offers cash prizes for cover song contests.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="http://localhost:8888/renditionbattle/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="http://localhost:8888/renditionbattle/css/main.css" rel="stylesheet" media="screen">
<link href="http://localhost:8888/renditionbattle/css/responsive.css" rel="stylesheet" media="screen">
<!-- Video.js in head for older IE -->
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>
<!-- Sticky Footer Wrapper -->
<div class="heightWrapper">
<!-- Login Header -->
<div class="loginHeader">
<div class="container">
<div class="pull-right register">
<a href="#" class="btn btn-small btn-inverse">Signup</a> <a href="#">Sign Up</a> | <a href="#">Register</a>
</div>
</div>
</div>
<!-- End Login Header -->
<!-- Logo and Navigation -->
<div class="container header">
<div class="logo pull-left"><a href="#"><img src="http://localhost:8888/renditionbattle/img/logo.png" alt="Rendition Battle" /></a></div>
<ul class="mainnav pull-right">
<li><a href="#">Home</a></li>
<li><a href="#">Latest Battle</a></li>
<li><a href="#">Vote Now</a></li>
<li><a href="#">Request a Contest</a></li>
<li><a href="#">FAQ's</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div class="btn-group mobilenav">
<a class="btn dropdown-toggle btn-inverse" data-toggle="dropdown" href="#">Menu <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Latest Battle</a></li>
<li><a href="#">Vote Now</a></li>
<li><a href="#">Request a Contest</a></li>
<li><a href="#">FAQ's</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div class="stripes"></div>
<!-- End Logo and Navigation -->
<!-- Battle Leader Section -->
<div class="background">
<div class="container">
<p class="tagline">sign up. upload your rendition of the contest's song. win money.</p>
<div class="battleLeader">
<div id="battleVideo">
<div class="battleTag"></div>
<video id="battle" class="video-js vjs-default-skin" width="500" height="300" controls preload="auto" poster="my_video_poster.png" data-setup='{"techOrder": ["html5", "flash"]}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
</video>
</div>
</div>
</div>
</div>
<!-- End Battle Leader Section -->
<!-- Upload Now -->
<div class="uploadNow">
<div class="container">
<div class="row">
<div class="span9 acEntries">
<h4>CURRENT CONTEST ACCEPTING ENTRIES UNTIL MARCH 30, 2013</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p>
</div>
<div class="span3"><a href="#" class="btn btn-block btn-large btn-info">Upload Now <i class="icon-share-alt icon-white"></i></a></div>
</div>
</div>
</div>
<!-- End Upload Now -->
<!-- Featured Member and Comments-->
<div class="featuredMember">
<div class="container">
<div class="row">
<!-- Latest Comments -->
<div class="span6 latestComments">
<div class="comment">
<div class="lcContent">
<div class="lcAvatar"><img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder" /></div>
<div class="lcDate">Jan 7th, 2013</div>
<div class="lcComment">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
<div class="lcMore">
<a href="#" class="btn btn-small">View Profile</a>
</div>
</div>
</div>
<div class="comment">
<div class="lcContent">
<div class="lcAvatar"><img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder" /></div>
<div class="lcDate">Jan 7th, 2013</div>
<div class="lcComment">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
<div class="lcMore">
<a href="#" class="btn btn-small">View Profile</a>
</div>
</div>
</div>
<div class="comment">
<div class="lcContent">
<div class="lcAvatar"><img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder" /></div>
<div class="lcDate">Jan 7th, 2013</div>
<div class="lcComment">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
<div class="lcMore">
<a href="#" class="btn btn-small">View Profile</a>
</div>
</div>
</div>
</div>
<!-- Latest Member -->
<div class="span6 latestMember">
<h3>Current Contest Leader</h3>
<p class="lmp">ShockForce75's rendition of Carly Rae Jaspen's: Call Me Maybe</p>
<div class="latestvid">
<video id="lvid" class="video-js vjs-default-skin" controls preload="auto" poster="my_video_poster.png" data-setup='{"techOrder": ["html5", "flash"]}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
</video>
</div>
<div class="lvidComment">
<div class="lvidCommentTail"><img src="http://localhost:8888/renditionbattle/img/lc.png" alt="latest comment" /></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Featured Member -->
<!-- Previous Members -->
<div class="pwHeader">
<div class="container">
<h4>Previous Winners</h4>
</div>
</div>
<div class="pw">
<div class="container">
<div class="row">
<div class="span2 pwMember"><img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder username" /></div>
<div class="span2 pwMember"><img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder username" /></div>
<div class="span2 pwMember"><img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder username" /></div>
<div class="span2 pwMember"><img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder username" /></div>
<div class="span2 pwMember"><img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder username" /></div>
<div class="span2 pwMember"><img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder username" /></div>
</div>
</div>
</div>
<!-- End Previous Members --> <div class="push"></div>
</div>
<!-- End Sticky Footer Wrapper -->
<!-- Footer -->
<div class="footer">
<div class="container">
<div class="pull-left">
<p>Copright © 2013 RenditionBattle.com. All Rights Reserved.<br />
<a href="http://422studios.com" target="_blank">Dallas Web Development</a> by 422 Studios, LLC</p>
</div>
<div class="pull-right">
<a href="#"><img src="http://localhost:8888/renditionbattle/img/icon-twitter.png" alt="twitter" /></a>
<a href="#"><img src="http://localhost:8888/renditionbattle/img/icon-fb.png" alt="facebook" /></a>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- End Footer -->
<!-- JS -->
<input type="hidden" id="siteUrl" value="http://localhost:8888/" />
<input type="hidden" id="baseUrl" value="http://localhost:8888/" />
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://localhost:8888/renditionbattle/js/bootstrap.min.js"></script>
<script src="http://localhost:8888/renditionbattle/js/respond.min.js"></script>
<script src="http://localhost:8888/renditionbattle/js/main.js"></script>
<script src="http://localhost:8888/renditionbattle/js/aspectratio.js"></script>
</body>
</html>
这是我的长宽比 JS...
//Battle video aspect ratio
// Once the video is ready
$(document).ready(function() {
_V_("battle").ready(function(){
var myPlayer = this; // Store the video object
var aspectRatio = 9/16; // Make up an aspect ratio
function resizeVideoJS(){
// Get the parent element's actual width
var width = document.getElementById(myPlayer.id).parentElement.offsetWidth;
// Set width to fill parent element, Set height
myPlayer.width(width).height( width * aspectRatio );
}
resizeVideoJS(); // Initialize the function
window.onresize = resizeVideoJS; // Call the function on resize
});
//Latest video aspect ratio
// Once the video is ready
_V_("lvid").ready(function(){
var myPlayer = this; // Store the video object
var aspectRatio = 9/16; // Make up an aspect ratio
function resizeVideoJS(){
// Get the parent element's actual width
var width = document.getElementById(myPlayer.id).parentElement.offsetWidth;
// Set width to fill parent element, Set height
myPlayer.width(width).height( width * aspectRatio );
}
resizeVideoJS(); // Initialize the function
window.onresize = resizeVideoJS; // Call the function on resize
});
});
关于如何修改代码以使其工作有什么想法吗？如果有人知道我可以用来实现我的最终目标的东西，我愿意在需要时完全切换解决方案。
此外，我确实尝试了所有我能找到并想到的重定向到 http://www.422clients.com/page/upgrade 的方法。如果它们是 IE8，但它只是永远加载并最终在 ie8 上给我一个奇怪的连接错误页面。
最佳答案
ie8 不支持 video 标签，ie7 也不支持 - 不知道如何让它在那里工作。
证明:http://caniuse.com/#feat=video
您将需要使用 Flash 替代品，或放弃视频而转而使用 ie8，或放弃 ie8 支持。您可以使用的一个好的库是 https://github.com/zencoder/video-js
关于php - IE8 Video.js 宽高比/大小问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15994641/