禁用HTML5视频自动播放

Question

如何禁用HTML5视频自动播放？

我尝试过的方法：

<video width="640" height="480" controls="controls" type="video/mp4" autoplay="false" preload="none"><source src="http://mydomain.com/mytestfile.mp4">Your browser does not support the video tag.</video>

- kkgzjjmj

---

你使用什么浏览器观看视频？ - AfromanJ

当我正在发表评论时，您删除了这个问题。您解决了这个问题吗？除非您确定该问题对其他人没有用处，否则最好不要将其删除。 - Keith Thompson

@KeithThompson 抱歉，我以为它没有任何用处。已恢复。 - kkgzjjmj

Answer 1

我会移除 autoplay 属性，因为如果浏览器遇到它，它会自动播放!

autoplay 是一个HTML布尔属性，但需要注意的是，值true和false是不允许的。要表示false值，必须省略该属性。

布尔属性上不允许使用“true”和“false”值。要表示false值，必须完全省略该属性。

此外，类型应该放在source标签内，如下所示：

<video width="640" height="480" controls preload="none">
   <source src="http://example.com/mytestfile.mp4" type="video/mp4">
   Your browser does not support the video tag.
</video>

---

参考资料:

• http://www.w3.org/TR/html-markup/video.html
• HTML 规范（布尔属性）

- caulitomaz

---

我测试了我的代码，它没有自动播放。你确定你不是通过JavaScript启动视频的吗？ - caulitomaz

我不确定为什么别人不行，但这是唯一对我有效的方法。 - Jerreck

正好这是我使用托管在AWS上的MP4文件时唯一有效的解决方案。谢谢！ - Alex Williams

当我发现这也是我的解决方案时，我感到非常无语。我已经加入了“自动播放”并尝试了所有方法......在这里看了一下......尝试了一下......才恍然大悟，想着浪费了一个小时的时间，真是让人气愤。 - Majestic12

这个答案是不正确的。我不确定提供的链接是否曾经指出autoPlay属性不是布尔类型的一种，但它确实明确说明了：“autoplay属性是一个布尔属性。当存在时，用户代理（如本文所述的算法）将在可以在不停止播放媒体资源的情况下立即开始播放。” W3C学校也同样指出：https://www.w3schools.com/tags/att_video_autoplay.asp - myermian

你是对的，@myermian。它是一个布尔属性，只是根据规范（https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes）通过省略属性来设置值“false”。正在更新答案。 - caulitomaz

Answer 2

移除视频标签中的自动播放。可以使用以下代码：

<video class="embed-responsive-item"  controls>
   <source src="http://example.com/video.mp4">
   Your browser does not support the video tag.
</video>

它是百分百有效的。

- rsnr4u

Answer 3

尝试在你的源代码标签中添加 autostart="false"。

<video width="640" height="480" controls="controls" type="video/mp4" preload="none">
<source src="http://example.com/mytestfile.mp4" autostart="false">
Your browser does not support the video tag.
</video>

JSFiddle示例

- anita

---

这里的视频无法播放，只是因为在视频标记中没有自动播放。我不知道 'autostart' 是什么，但我猜它对此没有帮助。 - Tushar Vaghela

Answer 4

实际上，将autoplay设置为false并不能完全解决问题，有些视频仍然会自动播放。请参见此案例在fiddle中的表现。

如果您想要暂停所有视频，可以通过以下代码来实现：

videos = document.querySelectorAll("video"); 
for(video of videos) {
  video.pause(); 
}

当然，如果video标签在一个影子根元素中，上述情况将无法实现，但是几乎任何通用解决方案都不适用于影子根元素。 在这种情况下，您需要采用自定义方法并首先扩展影子根。

- Eduard Florinescu

Answer 5

只需在您的视频标签中使用preload="none"，当页面加载时，视频将停止自动播放。

- Dhaval Mistry

Answer 6

为了停用自动播放，你需要完全删除autoplay属性。

否则它会被解释为autoplay=true。相当不明显！

- Mike

Answer 7

移除所有属性，这些属性说其存在于您的标记中是一个布尔简写为true的autoplay。

此外，请确保始终使用video或audio元素。不要使用object或embed，因为这些元素默认使用第三方插件自动播放，并且无法在没有更改浏览器设置的情况下停止。

- Stokely

Answer 8

我想在编辑模式下将autoplay设置为“false”，但在查看器模式下将其设置为“true”，并通过仅在查看器模式下使用jQuery添加属性来解决了这个问题：

<video id="vid" class="my-vid" poster="https://poster-url/poster.jpg"
     loop="loop" controls="controls" width="100%" height="100%">
     <source src="https://video-url/vision.mp4" type= "video/mp4" />
</video>

<script type="text/javascript">
        if (document.location.href.indexOf('domain') > -1 ||
            document.location.href.indexOf('test') > -1) {
    
            $(document).ready(function() {
                $('video').attr('autoplay','autoplay')
         
            });
        }   

    </script>

- az_

Answer 9

<video class="embed-responsive-item"  controls>
   <source src="http://example.com/video.mp4" autostart="false">
   Your browser does not support the video tag.
</video>

- Harish Varaliya

---

过时的语法 - umbriel

Answer 10

您可以设置 autoplay=""

。

<video width="640" height="480" controls="controls" type="video/mp4" autoplay="">
<source src="http://example.com/mytestfile.mp4">
Your browser does not support the video tag.
</video>

提示：可以使用autoplay或autoplay="autoplay"来启用。

- Reza

---

即使我们将autoplay设置为""或autoplay="false"，视频仍将自动播放。如果video标签具有autoplay属性，则它将自动播放。我们可以通过从video标签中删除autoplay属性来避免播放视频。 - Tushar Vaghela