Javascript 使用video.js在ios上在线播放视频？_Javascript_Ios_Safari_Html5 Video_Video.js

Javascript 使用video.js在ios上在线播放视频？

javascript ios safari

Javascript 使用video.js在ios上在线播放视频？,javascript,ios,safari,html5-video,video.js,Javascript,Ios,Safari,Html5 Video,Video.js,我试图使用video.js在所有平台上保持一致的视频外观。下面的代码适用于一切（chrome、firefox、ie、android），但ios上的safari（尚未测试safari的桌面版）除外。当尝试播放视频时，ios将切换到默认的视频播放器（quicktime？）。这是一个问题，因为我希望从皮肤上移除视频控件，以便用户必须观看视频。有没有一种方法可以使用video.js或其他web插件在所有平台上都有一个一致的视频播放器UI，或者这在ios上是不可能的 <html> <h

我试图使用video.js在所有平台上保持一致的视频外观。下面的代码适用于一切（chrome、firefox、ie、android），但ios上的safari（尚未测试safari的桌面版）除外。当尝试播放视频时，ios将切换到默认的视频播放器（quicktime？）。这是一个问题，因为我希望从皮肤上移除视频控件，以便用户必须观看视频。有没有一种方法可以使用video.js或其他web插件在所有平台上都有一个一致的视频播放器UI，或者这在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>



若要查看此视频，请启用JavaScript，并考虑升级到Web浏览器

var player=videojs（“the_video”，{}，function（）{
//播放器（此）已初始化并准备就绪。
}).ready（函数（）{
console.log（this.options（））；//记录所有默认的videojs选项
//存储视频对象
var myPlayer=this，id=myPlayer.id（）；
//构成纵横比
var aspectRatio=264/640；
函数resizeVideoJS（）{
var width=document.getElementById（id）.parentElement.offsetWidth；
myPlayer.宽度（宽度）.高度（宽度*纵横比）；
}
//初始化resizeVideoJS（）
resizeVideoJS（）；
//然后在调用resizeVideoJS（）时调整大小
window.onresize=resizeVideoJS；
});

这很烦人，但iOS仍然不允许在iPhone上在线播放视频元素。有些人尝试在画布元素中播放视频，如的答案中所述。

从iOS 9及更高版本开始，您现在可以将

playsinline

属性添加到视频标记中，以使其在线播放。我刚刚测试过，它可以与video.js一起使用

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

ZOMG！你不知道这让我难堪了多少天。哎呀。非常感谢你。