论坛 › 知识问答 › javascript - 使用 video.js 在 ios 上播放视频内联？

菜鸟教程小白 发表于 2022-12-12 09:57:21

javascript - 使用 video.js 在 ios 上播放视频内联？

                                            <p><p>我正在尝试使用 video.js 在所有平台上保持一致的视频皮肤。下面的代码适用于所有东西(chrome、firefox、ie、android)，但 ios 上的 safari(尚未测试 safari 的桌面版本)。当尝试播放视频时，ios 会转到它的默认视频播放器(快速时间？)。这是一个问题，因为我希望从皮肤中删除视频控件，以便用户必须观看视频。有没有办法使用 video.js 或其他网络插件来在所有平台上拥有一致的视频播放器 UI，或者这对于 ios 来说是不可能的？</p>

<pre><code>&lt;html&gt;

&lt;head&gt;
    &lt;!--#include virtual=&#34;/assets/inc/headcontent.htm&#34; --&gt;


&lt;link href=&#34;http://vjs.zencdn.net/5.3.0/video-js.css&#34; rel=&#34;stylesheet&#34;&gt;

&lt;!-- If you&#39;d like to support IE8 --&gt;
&lt;script src=&#34;http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js&#34;&gt;&lt;/script&gt;


&lt;/head&gt;
&lt;body&gt;

    &lt;div class=&#34;row&#34;&gt;

      &lt;div class=&#34;col-xs-12 col-md-10 col-lg-8&#34;&gt;

            &lt;div class=&#34;&#34;&gt;
                &lt;video id=&#34;the_video&#34; class=&#34;video-js&#34; controls preload=&#34;auto&#34;&gt;
                  &lt;source src=&#34;videos/english.mp4&#34; type=&#39;video/mp4&#39;&gt;
                  &lt;p class=&#34;vjs-no-js&#34;&gt;
                        To view this video please enable JavaScript, and consider upgrading to a web browser that
                        &lt;a href=&#34;http://videojs.com/html5-video-support/&#34; target=&#34;_blank&#34;&gt;supports HTML5 video&lt;/a&gt;
                  &lt;/p&gt;
                &lt;/video&gt;
            &lt;/div&gt;

      &lt;/div&gt;

    &lt;/div&gt;


    &lt;!--#include virtual=&#34;/assets/inc/footcontent.htm&#34; --&gt;


&lt;script src=&#34;http://vjs.zencdn.net/5.3.0/video.js&#34;&gt;&lt;/script&gt;


&lt;script&gt;

    var player = videojs(&#34;the_video&#34;, {}, 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;
    });


&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>从 iOS 9 及更高版本开始，您现在可以将 <code>playsinline</code> 属性添加到 video 标签以使其内联播放。 <a href="https://webkit.org/blog/6784/new-video-policies-for-ios/" rel="noreferrer noopener nofollow">https://webkit.org/blog/6784/new-video-policies-for-ios/</a>我刚刚测试过，它适用于 video.js</p>

<pre><code>&lt;video class=&#34;video-js&#34; poster=&#34;#&#34; playsinline autoplay loop&gt;
&lt;source src=&#34;#&#34; type=&#34;video/mp4&#34;&gt;
&lt;/video&gt;
</code></pre></p>
                                   
                                                <p style="font-size: 20px;">关于javascript - 使用 video.js 在 ios 上播放视频内联？，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/34165653/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/34165653/
                                                        </a>
                                                </p>
                                       

查看完整版本: javascript - 使用 video.js 在 ios 上播放视频内联？