1
我正在開發跨瀏覽器的HTML5視頻應用程序。我開始試驗videojs的技術可能性我開發了一個videojs頁面，它在所有的瀏覽器上都能正常工作，但是在IE9 &之上，它不起作用。如果它的工作原理是用swf加載視頻而不是用HTML5播放器。Videojs無法在IE 9及以上工作
這裏是我的代碼
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<link href="video-js/video-js-cust.css" rel="stylesheet">
<script src="video-js/video.dev.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
.wrapper{
width: 760px;
margin: 0px auto;
}
.text-center{
text-align: center;
}
.block-video{
width: 640px;
margin: 0px auto;
}
.block{
background: #e7ecee;
padding: 10px;
display: block;
clear: both;
margin-bottom: 20px;
}
h4.video-title{
font-weight: normal;
margin-bottom: 10px;
margin-top: 10px;
}
.modal-content{
min-width: 680px;
}
/** PLAY LIST **/
.play-list-block{
height: 480px;
}
#video_3{
float: left;
}
.playlist-components{
float: left;
margin-left: 20px;
}
.playlist{
clear: both;
display: block;
}
.playlist ul{
list-style: none;
padding-left: 0px;
}
.playlist ul li{
display: block;
clear: both;
height: 50px;
cursor: pointer;
}
.playlist ul li:hover{
background: #fff;
}
.playlist ul li span{
float: left;
margin-right: 10px;
}
.playlist ul li span:last{
float: none;
}
.button-holder{
clear: both;
display: block;
}
.button-holder #prev{
float: left;
cursor: pointer;
}
.button-holder #next{
float: right;
cursor: pointer;
}
</style>
<body>
<h1 class="text-center">HTML5 Player technical possibilities</h1>
<div class="wrapper">
<div class="block">
<h4 class="text-center video-title"> Single video play back </h4>
<video id="video_1" class="video-js vjs-default-skin vjs-big-play-centered block-video"
controls preload="auto" width="640" height="405"
poster="videos/Big_Buck_Bunny_Trailer_480x270.png"
data-setup='{"video_1":true}'>
<source src="videos/Big_Buck_Bunny_Trailer.mp4" type='video/mp4'></source>
<source src="videos/Big_Buck_Bunny_Trailer.webm" type='video/webm'></source>
<source src="videos/Big_Buck_Bunny_Trailer.ogv" type='video/ogg'></source>
</video>
</div>
<div class="block">
<h4 class="text-center video-title"> Customizing UI controls </h4>
<video id="video_2" class="video-js vjs-default-skin vjs-big-play-centered block-video"
controls preload="auto" width="640" height="405"
poster="videos/Incredibles_Teaser_640x272.png"
data-setup='{"video_2":true}'>
<source src="videos/Incredibles_Teaser.mp4" type='video/mp4'></source>
<source src="videos/Incredibles_Teaser.webm" type='video/webm'></source>
<source src="videos/Incredibles_Teaser.ogv" type='video/ogg'></source>
</video>
</div>
<div class="block play-list-block">
<h4 class="text-center video-title"> Play back with multiple videos </h4>
<!--video id="video_3" class="video-js vjs-default-skin vjs-big-play-centered block-video"
controls preload="auto" width="640" height="405"
poster="videos/Finding_Nemo_Teaser_640x352.png"
data-setup='{"video_2":true}'>
<source src="videos/Finding_Nemo_Teaser.mp4" type='video/mp4'></source>
<source src="videos/Finding_Nemo_Teaser.webm" type='video/webm'></source>
<source src="videos/Finding_Nemo_Teaser.ogv" type='video/ogg'></source>
</video-->
<video id="video_3" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" width="570" height="410"
data-setup=''
poster="">
</video>
<div class="playlist-components">
<div class="playlist">
<ul></ul>
</div>
<div class="button-holder">
<label id="prev" alt="Previous video"> Prev </label>
<label id="next" alt="Next video"> Next </label>
</div>
</div>
</div>
<div class="block">
<h4 class="text-center video-title"> Dynamic video loading </h4>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
LOAD PLAYER
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content row">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Player on overlay</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- video id="video_3" class="video-js vjs-default-skin vjs-big-play-centered block-video"
controls preload="auto" width="640" height="405"
poster="videos/Finding_Nemo_Teaser_640x352.png"
data-setup='{"video_2":true}'>
<source src="videos/Finding_Nemo_Teaser.mp4" type='video/mp4'></source>
<source src="videos/Finding_Nemo_Teaser.webm" type='video/webm'></source>
<source src="videos/Finding_Nemo_Teaser.ogv" type='video/ogg'></source>
</video-->
<script src="video-js/video-js-playlist.js"></script>
<script type="text/javascript">
var video_1_Player = videojs('video_1');
var video_3_player, video_4_Player, demoModule;
$(document).ready(function(){
$('#myModal').on('shown.bs.modal', function (e) {
loadModelPlayer();
});
$('#myModal').on('hidden.bs.modal', function (e) {
video_4_Player.pause();
});
});
function loadPlayList(){
var videos = [
{
"src" : [
'videos/Incredibles_Teaser.webm',
'videos/Incredibles_Teaser.mp4',
'videos/Incredibles_Teaser.ogv'
],
"poster" : 'videos/Incredibles_Teaser_640x272.png',
"title" : 'Video 2'
},
{
"src" : [
'videos/Finding_Nemo_Teaser.webm',
'videos/Finding_Nemo_Teaser.mp4',
'videos/Finding_Nemo_Teaser.ogv'
],
"poster" : 'videos/Finding_Nemo_Teaser_640x352.png',
"title" : 'Video 1'
},
{
"src" : [
'videos/Big_Buck_Bunny_Trailer.webm',
'videos/Big_Buck_Bunny_Trailer.mp4',
'videos/Big_Buck_Bunny_Trailer.ogv'
],
"poster" : 'videos/Big_Buck_Bunny_Trailer_480x270.png',
"title" : 'Video 3'
}
];
//video_3_player = videojs('video_3');
//video_3_player.playList(videos);
demoModule = {
"init" : function(){
this.els = {};
this.cacheElements();
this.initVideo();
this.createListOfVideos();
this.bindEvents();
this.overwriteConsole();
},
"overwriteConsole" : function(){
console._log = console.log;
console.log = this.log;
},
"log" : function(string){
demoModule.els.log.append('<p>' + string + '</p>');
console._log(string);
},
"cacheElements" : function(){
this.els.$playlist = $('div.playlist > ul');
this.els.$next = $('#next');
this.els.$prev = $('#prev');
this.els.log = $('div.panels > pre');
},
"initVideo" : function(){
this.player = videojs('video_3');
this.player.playList(videos);
},
"createListOfVideos" : function(){
var html = '';
for (var i = 0, len = this.player.pl.videos.length; i < len; i++){
html += '<li data-videoplaylist="'+ i +'">'+
'<span class="number">' + (i + 1) + '</span>'+
'<span class="poster"><img src="'+ videos[i].poster +'" width="30" height="30"></span>' +
'<span class="title">'+ videos[i].title +'</span>' +
'</li>';
}
this.els.$playlist.empty().html(html);
this.updateActiveVideo();
},
"updateActiveVideo" : function(){
var activeIndex = this.player.pl.current;
this.els.$playlist.find('li').removeClass('active');
this.els.$playlist.find('li[data-videoplaylist="' + activeIndex +'"]').addClass('active');
},
"bindEvents" : function(){
var self = this;
this.els.$playlist.find('li').on('click', $.proxy(this.selectVideo,this));
this.els.$next.on('click', $.proxy(this.nextOrPrev,this));
this.els.$prev.on('click', $.proxy(this.nextOrPrev,this));
this.player.on('next', function(e){
console.log('Next video');
self.updateActiveVideo.apply(self);
});
this.player.on('prev', function(e){
console.log('Previous video');
self.updateActiveVideo.apply(self);
});
this.player.on('lastVideoEnded', function(e){
console.log('Last video has finished');
});
},
"nextOrPrev" : function(e){
var clicked = $(e.target);
this.player[clicked.attr('id')]();
},
"selectVideo" : function(e){
var clicked = e.target.nodeName === 'LI' ? $(e.target) : $(e.target).closest('li');
if (!clicked.hasClass('active')){
console.log('Selecting video');
var videoIndex = clicked.data('videoplaylist');
this.player.playList(videoIndex);
this.updateActiveVideo();
}
}
};
demoModule.init();
}
try{
loadPlayList();
}catch(err){
console.log("Exception raised ");
console.log(err);
}
function loadModelPlayer(){
if(video_4_Player == undefined){
var videoTag = $("<video>",
{"id":'video_4',
"class":'video-js vjs-default-skin vjs-big-play-centered block-video',
"controls":'true',
"preload": 'auto',
"width":'640px',
"height":'405px'
}
);
var src1 = $("<source>",{"src":'videos/Finding_Nemo_Teaser.mp4',"type":'video/mp4'});
var src2 = $("<source>",{"src":'videos/Finding_Nemo_Teaser.webm',"type":'video/webm'});
var src3 = $("<source>",{"src":'videos/Finding_Nemo_Teaser.ogg',"type":'video/ogg'});
$(videoTag).append(src1);
$(videoTag).append(src2);
$(videoTag).append(src3);
$(videoTag).appendTo(".modal-body");
videojs('video_4',{"width":'640',"height":'405'},function(ev){
video_4_Player = this;
console.log("player loaded");
});
}
}
</script>
<style type="text/css">
/***
* CUSTOM SKIN
****/
#video_2 .vjs-big-play-button{
background: none;
border: 0px;
opacity: 1;
box-shadow: none;
top: 40%;
}
#video_2 .vjs-big-play-button:before{
text-shadow: none;
font-size: 2em;
color: #fff;
}
#video_2 .vjs-slider-handle:before {
font-size: 1.3em;
text-shadow: none;
top: -2;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
#video_2 .vjs-slider-handle:before {
text-shadow: none;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
#video_2 .vjs-play-progress{
background:#b40c1e;
}
#video_2 .vjs-volume-handle:before {
font-size: .9em;
}
.vjs-default-skin .vjs-volume-level{
background: #b40c1e;
}
#video_2 .vjs-progress-control {
font-size: .9em;
}
#video_2:hover .vjs-progress-control {
font-size: .9em;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
#video_2 .vjs-control-bar{
background-color: #07141e;
}
</style>
</body>
</html>
所有資源都正確地加載和它工作在所有瀏覽器，除了上述IE9 &。
請幫我，我哪裏出錯了。