菜鸟教程小白 发表于 2022-12-11 18:58:04

javascript - ios上的html5视频背景视频


                                            <p><p>我有以下视频,它是 slider 的一部分。 </p>

<pre><code>&lt;div class=&#34;slide video-bg&#34;&gt;
    &lt;video muted webkit-playsinline playsinline poster=&#34;/video/3/4_Marching_band-HD_1080p.jpg&#34;&gt;
      &lt;source src=&#34;/video/3/4_Marching_band-HD_1080p.webm&#34; type=&#34;video/webm&#34;&gt;
      &lt;source src=&#34;/video/3/4_Marching_band-HD_1080p.mp4&#34; type=&#34;video/mp4&#34;&gt;
      &lt;source src=&#34;/video/3/4_Marching_band-HD_1080p.ogv&#34; type=&#34;video/ogg&#34;&gt;
    &lt;/video&gt;
&lt;/div&gt;
</code></pre>

<p>当页面加载时,<code>play()</code> 在视频上被调用。在我尝试过的每个桌面浏览器上,效果都很好。但在 iOS 上,视频从不播放。 </p>

<p>我已阅读 <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>并尝试遵循每个要求。我什至在视频中添加了 <code>autoplay</code> 属性,即使我想用 js 来控制它。该视频没有音频,并且在页面加载时可见。知道为什么它不能在 iOS 上播放吗? </p>

<p>有问题的页面:<a href="http://heartland.thinkersites.com/products/" rel="noreferrer noopener nofollow">http://heartland.thinkersites.com/products/</a> </p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>将此添加到您的 CSS 以从 iOS 设备上移除难看的播放按钮:</p>

<pre><code>                *::-webkit-media-controls-panel {
                  display: none!important;
                  -webkit-appearance: none;
                }

                *::--webkit-media-controls-play-button {
                  display: none!important;
                  -webkit-appearance: none;
                }

                *::-webkit-media-controls-start-playback-button {
                  display: none!important;
                  -webkit-appearance: none;
                }
</code></pre></p>
                                   
                                                <p style="font-size: 20px;">关于javascript - ios上的html5视频背景视频,我们在Stack Overflow上找到一个类似的问题:
                                                        <a href="https://stackoverflow.com/questions/42229146/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/42229146/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: javascript - ios上的html5视频背景视频