私が取り組んでいるこのプロジェクトの最後までイライラしています笑。Video.js を使用して、ユーザーがコンテスト用の動画をアップロードするサイトになるサイトを作成しています。
Twitter ブートストラップを使用しており、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
});
});
コードを変更して機能させる方法についてのアイデアはありますか? 究極の目標を達成するために使用できるものを誰かが知っていれば、必要に応じてソリューションを完全に切り替えることができます.
また、IE8 の場合はhttp://www.422clients.com/page/upgradeにリダイレクトするために見つけて考えられるすべてのことを試みましたが、永久にロードされ、最終的に ie8 で奇妙な接続エラー ページが表示されます。