2
나는이 프로젝트에서 쓰라린 말에 좌절감을 느낀다. 나는 일하고있다. Video.js를 사용하여 사용자가 컨테스트 용 비디오를 업로드하는 사이트가 될 사이트를 만듭니다.IE8 Video.js 종횡비/사이징 문제
트위터 부트 스트랩을 사용하고 있으며 PSD에서 반응 형 디자인을 만들었으며 모든 실제 브라우저 (ff, 사파리, 크롬 등)에서 멋지게 보입니다. 그것은 IE7, IE9 및 IE10에서 꽤 괜찮은 것처럼 보입니다. 하지만 IE8에서 어떤 이유로 완전히 깨졌습니다.
16x9 종횡비를 강제로 사용하기 위해 jquery 스크립트를 사용하고 있으며 여기에 문제가 있습니다. 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의 경우로드되지만 영원히로드되어 결국 ie8에 이상한 연결 오류 페이지가 표시됩니다.
현재 video.js를 사용하고 있습니다. 위의 첫 번째 질문에서 비디오 작품과 놀이 잘 진술했다. 그것의 크기 조정 및 IE8 내 위치는 내 문제입니다. IE8을 제외한 모든 브라우저에서 완벽하게 작동합니다. –