我正在嘗試使用video.js在所有平臺上保持一致的視頻皮膚。下面的代碼適用於所有東西(chrome,firefox,即android),但是ios上的safari(尚未測試safari的桌面版本)。試圖播放視頻時,ios會踢到它的默認視頻播放器(quicktime?)。這是一個問題,因爲我正在尋找從皮膚中刪除視頻控件,以便用戶必須觀看視頻。有沒有辦法使用video.js或其他網絡插件,以便能夠在所有平臺上擁有一致的視頻播放器用戶界面,或者這對ios不可行?使用video.js在ios上播放視頻內嵌視頻?
<html>
<head>
<!--#include virtual="/assets/inc/headcontent.htm" -->
<link href="http://vjs.zencdn.net/5.3.0/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-xs-12 col-md-10 col-lg-8">
<div class="">
<video id="the_video" class="video-js" controls preload="auto">
<source src="videos/english.mp4" type='video/mp4'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
</div>
</div>
</div>
<!--#include virtual="/assets/inc/footcontent.htm" -->
<script src="http://vjs.zencdn.net/5.3.0/video.js"></script>
<script>
var player = videojs("the_video", {}, function(){
// Player (this) is initialized and ready.
}).ready(function(){
console.log(this.options()); //log all of the default videojs options
// Store the video object
var myPlayer = this, id = myPlayer.id();
// Make up an aspect ratio
var aspectRatio = 264/640;
function resizeVideoJS(){
var width = document.getElementById(id).parentElement.offsetWidth;
myPlayer.width(width).height(width * aspectRatio);
}
// Initialize resizeVideoJS()
resizeVideoJS();
// Then on resize call resizeVideoJS()
window.onresize = resizeVideoJS;
});
</script>
</body>
</html>