菜鸟教程小白 发表于 2022-12-11 22:06:03

javascript - 自动播放视频 iPhone 低功耗模式不起作用


                                            <p><p>我有一个视频，它是我设计中不可或缺的一部分，加载时视频在除 iPhone 之外的所有设备上播放，同时处于低功耗模式。使用自动播放属性，视频将在大多数浏览器中开始加载。 </p>

<pre><code>&lt;div class=&#34;footage&#34;&gt;
    &lt;video width=&#34;320&#34; height=&#34;240&#34; autoplay muted playsinline loop id=&#34;videoMob&#34;&gt;
      &lt;source src=&#34;./img/video.mp4&#34; type=&#34;video/mp4&#34;&gt;
    &lt;/video&gt;
&lt;/div&gt;
</code></pre>

<p>在发现这不起作用后，我决定在 jquery 中添加一个 .ready 函数，如果在加载时暂停，它会激活视频播放。令人失望的是，这也不起作用。</p>

<pre><code>$( document ).ready(function() {
    var video = $(&#39;#videoMob&#39;);
    video.paused ? video.play() : video.pause();
});
</code></pre>

<p>请提出任何其他想法？</p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>也遇到过这个问题，发现 iOS 在低功耗模式下使用 <code>suspend</code> 事件 (<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/suspend_event" rel="noreferrer noopener nofollow">https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/suspend_event</a>)。此事件实际上发生在视频加载了几帧并发出一些加载事件之后。</p>

<p>使用这个 <code>suspend</code> 事件，我们可以显示一个备用 UI。为安全起见，如果视频再次播放(例如在用户交互时)，我们可以恢复此 UI。</p>

<pre class="lang-js prettyprint-override"><code>const videoElement = document.getElementById(&#39;myVideo&#39;);

videoElement.addEventListener(&#39;suspend&#39;, () =&gt; {
// suspended loading. Show play UI..
});

videoElement.addEventListener(&#39;play&#39;, () =&gt; {
// remove play UI
});
</code></pre></p>
                                   
                                                <p style="font-size: 20px;">关于javascript - 自动播放视频 iPhone 低功耗模式不起作用，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/54379718/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/54379718/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: javascript - 自动播放视频 iPhone 低功耗模式不起作用