禁用 html5 视频自动播放答案

【问题标题】：Disable html5 video autoplay禁用 html5 视频自动播放
【发布时间】：2013-11-08 23:39:40
【问题描述】：

如何禁用 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>

【问题讨论】：

您使用什么浏览器查看视频？
您在我发表评论时删除了this question。你解决问题了吗？除非您确定该问题对其他人没有用处，否则您可能不应该删除它。
@KeithThompson 抱歉。我以为它不会有任何用处。未删除。

标签： html video autoplay

【解决方案1】：

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

autoplay 是 HTML boolean attribute，但请注意，不允许使用值 true 和 false。要表示 false 值，您必须省略该属性。

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

此外，类型位于源内部，如下所示：

<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>

参考资料：

【讨论】：

我测试了我的代码，它不会自动播放。您确定不是通过 javascript 启动视频吗？
我不知道为什么这对其他人不起作用，但这是唯一对我有用的东西。
碰巧是使用托管在 AWS 上的 MP4 文件对我有用的唯一解决方案。谢谢！
当这也是我的解决方案时，请捂脸。有“自动播放”并尝试了一切....看这里...试过....facepalm和大喊浪费时间的想法:)
这个答案不正确。我不确定提供的链接是否曾指出autoPlay 属性不是布尔类型，但实际上确实明确指出：“自动播放属性是布尔属性。如果存在，用户代理（如本文所述的算法中所述）将自动开始播放媒体资源，而不会停止。” W3C 学校也同样注意到这一点：w3schools.com/tags/att_video_autoplay.asp

【解决方案2】：

只需将 autoplay="false" 放在源标签上即可.. :)

【讨论】：

这就是这个人最初尝试的。 @caulitomaz 的回答说，你放了自动播放标签然后它就会播放。

【解决方案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 example

【讨论】：

这里的视频没有播放，只是因为视频标签中没有自动播放。我不知道“自动启动”，但我想这在这里没有帮助。

【解决方案4】：

删除视频标签中的自动播放。使用这样的代码

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

100% 正常工作

【讨论】：

【解决方案5】：

你可以设置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>

ps。为了使您可以使用autoplay 或autoplay="autoplay"

【讨论】：

即使我们设置了 autoplay="" 或 autoplay="false"，视频也会自动播放，如果 video 标签有 autoplay 属性，它会自动播放。我们可以通过从 video 标签中移除 autoplay 属性来避免播放视频。

【解决方案6】：

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

【讨论】：

【解决方案7】：

确实将autoplay 设置为false 无济于事，某些视频仍然可以播放。见this case in fiddle.

如果你想暂停所有视频，你可能想通过代码来做一些事情：

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

当然，如果video 标记位于影子根元素中，则上述情况将不起作用，但几乎没有任何通用解决方案适用于影子根元素。在那里，您将需要一种自定义方法并首先扩展影子根。

【讨论】：

【解决方案8】：

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

【讨论】：

过时的语法

【解决方案9】：

删除所有显示 autoplay 的属性，因为它在您的标签中的存在是 true 的布尔简写。

另外，请确保始终使用 video 或 audio 元素。不要使用object 或embed，因为这些元素默认使用第三部分插件自动播放，并且如果不更改浏览器中的设置就无法停止。

【讨论】：

【解决方案10】：

要禁用自动播放，请have to REMOVE autoplay attribute completely。

否则将被解释为autoplay=true。很不明显！

【讨论】：