我对这个项目的苦涩结局感到沮丧，我正在研究大声笑。我正在使用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
});
});
关于如何修改我的代码以便工作的任何想法？如果有人知道我可以用来实现我最终目标的东西，我愿意在必要时完全切换解决方案。
此外，我DID尝试我能找到的所有内容并考虑重定向到http://www.422clients.com/page/upgrade如果它们是IE8但它只是永远加载并最终在ie8上给我一个奇怪的连接错误页面。
答案 0 :(得分：2)
ie8不支持视频标签，ie7也不支持 - 不确定如何让它在那里工作。
证明：http://caniuse.com/#feat=video
您需要使用闪光灯替代品，或放弃视频ie8，或放弃ie8支持。您可以使用的好图书馆是https://github.com/zencoder/video-js
答案 1 :(得分：0)
当你正在使用jQuery时，使用它的resize（）方法，因为它似乎在IE8上更可靠地工作。
另外，API Docs size（）比height（）和width（）更有效。
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.size(width,Math.floor(width*aspectRatio));
}
resizeVideoJS();
$(window).resize(resizeVideoJS);