2015-12-08 147 views
1

我正在嘗試使用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> 

回答

1

在iOS 9和10中,您現在可以將playsinline屬性添加到視頻標籤以使其以內聯方式播放。 https://webkit.org/blog/6784/new-video-policies-for-ios/我剛剛測試過,它可以與video.js一起使用

<video class="video-js" poster="#" playsinline autoplay loop> 
    <source src="#" type="video/mp4"> 
</video> 
0

這很煩人,但iOS仍然不允許在iPhone上進行視頻元素的內聯播放。有些人試圖在畫布元素中播放視頻,而不是像this question的答案中提到的那樣。