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

Using video.js to play video inline on ios?

本文关键字：在线播放 视频 ios video js 使用      更新时间：2023-09-26

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

从iOS 9及更高版本开始，您现在可以将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>
相关文章：