Safari和Chrome桌面浏览器中的视频自动播放不起作用

Question

我花了很多时间试图弄清楚为什么像这样嵌入视频的视频:

<video height="256" loop autoplay muted controls id="vid">
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

在Firefox中，页面加载后会自动开始播放，但无法在基于Webkit的浏览器中自动播放。这只发生在一些随机页面上。到目前为止，我无法找到原因。我怀疑是一些未关闭的标签或由CMS编辑器创建的大量JS所致。

- Adam Bubela

---

有时候它能正常工作？或者根本就不工作...这里有一个例子http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_autoplay，我用Chrome测试过了，它可以正常工作。 - tanaydin

有些页面根本不起作用。 - Adam Bubela

面对相同的问题，一周前还能正常工作，没有任何更改，现在突然就停止工作了。可能是浏览器更新导致的，手动通过JavaScript播放所有视频标签非常烦人。 - bingeScripter

在Chrome浏览器中对我不起作用。 - Bob the Builder

Answer 1

我得到的最佳修复方法是在</video>标签后面添加以下代码：

<script>
    document.getElementById('vid').play();
</script>

虽然不太美观，但是它不知怎么地却能起作用。

更新 最近许多浏览器只能自动播放关闭声音的视频，所以你也需要在视频标签上添加muted属性。

<video autoplay muted>
...
</video>

- Adam Bubela

---

或者你可以使用jQuery编写代码 $("videoID").get(0).play();。参考链接：https://dev59.com/SG445IYBdhLWcg3w5OIH - Penguin

像这样： $("video[autoplay]").each(function(){ this.play(); });意思是选择所有含有 autoplay 属性的视频元素，然后逐个播放。 - Martin Ille

如果它没有静音，仍然存在问题。请参阅https://developers.google.com/web/updates/2017/09/autoplay-policy-changes。 - dovid

据我所知，如果没有用户交互，这将无法继续工作。 - webkit

为了在Safari移动端上正常工作，我还需要包含playsinline。 - Gman

Answer 2

在使用jQuery play() 或其他答案中建议的DOM操作之后，它仍然不能在Chrome for Android（版本56.0）中自动播放视频。

根据 developers.google.com 上的这篇文章，在Chrome 53中，如果视频静音，则浏览器将尊重自动播放选项。因此，在video标签中使用autoplay muted属性可使视频在Chrome浏览器版本53及以上自动播放。

以下是来自上述链接的摘录：

  

从版本53开始，Chrome for Android支持视频的已静音自动播放。如果设置了autoplay和muted，则视频元素进入视图时将自动开始播放[...]

<video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>

• Safari在iOS 10及以上版本中支持静音自动播放。
• Firefox和UC浏览器在Android上已经支持自动播放，无论是否静音，它们不会阻止任何类型的自动播放。

- RamValli

---

我在Safari 11中遇到了一个问题，背景视频（没有音频）无法自动播放。添加muted和autoplay就解决了问题。谢谢！ - dmbaughman

为什么YouTube上自动播放且带声音的功能能够正常运行？自该网站问世以来就一直是这样。 - Xavier

Answer 3

Google刚刚修改了他们的自动播放视频政策，现在必须进行静音处理muted

您可以在这里查看。

所以只需添加静音处理。

<video height="256" loop="true" autoplay="autoplay" controls="controls" id="vid" muted>
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

- mooga

---

John Pallett是Google Chrome的产品经理和媒体静音器。他对新政策的评论如下： - Doomjunky

Answer 4

发生的情况是，Safari和Chrome桌面版不喜欢在视频标签周围进行DOM操作。即使在canplaythrough事件触发后，当视频标签周围的DOM在初始页面加载后发生了更改，它们也不会触发播放顺序，甚至设置了自动播放属性也是如此。基本上，直到我删除了.video标签周围的.wrap() jQuery之后，它才按预期自动播放。

- Arnaud Leyder

---

很好，它不能使用.wrap()。然而，据我所知，这段代码需要使用.get(0)才能工作：$("#vid").get(0).play(); - mattsoave

@mattsoave .get(0) 或者只是 $('#vid')[0].play()。 - pmrotule

2017年10月，尽管在标签中设置了属性，视频在Safari中仍无法自动播放仍然是一个问题。使用mattsoave/pmrotule建议的[0].play()解决了这个问题。 - Don Cullen

Answer 5

当与muted属性结合使用时，这对我很有效

- Tasawer Khan

---

我不理解它背后的逻辑，但对我来说它有效！ - Rahimuddin

这道题的正确答案是什么。 - Khalid Habib

谢谢！这很有道理！我只是希望有更好的文档/日志记录来指示。 - Joshua Pinter

Answer 6

对我来说，问题在于需要在video标记内添加muted属性。即：

<video muted>

<video width="1920" height="1980" src="video/Night.mp4"
type="video/mp4" frameborder="0" allowfullscreen autoplay loop
muted></video>`

- GarryW

---

适用于最新的Windows8 Chrome浏览器。 - vladkras

在 Chrome 上，如果我添加了静音，则会禁用声音。我不想要这个。 - lisarko8077

Answer 7

Chrome不允许自动播放带有声音的视频，因此请确保在video标签中添加muted属性，像这样：

<video width="320" height="240"  autoplay muted>
  <source src="video.mp4" type="video/mp4">
</video>

- Abdul Basit Mangat

---

这并没有增加任何新内容。 被接受的回答 已经提到了这一点。此外，第二个回答 进行了详细讨论。 - Samuel Philipp

Answer 8

var video = document.querySelector('video');
video.muted = true;
video.play()

只有这种解决方案对我有帮助，<video autoplay muted ...>...</video> 没有起作用...

- Ant0ha

Answer 9

我刚刚遇到了与我的视频相同的问题

<video preload="none" autoplay="autoplay" loop="loop">
  <source src="Home_Teaser.mp4" type="video/mp4">
  <source src="Home_Teaser" type="video/webm">
  <source src="Home_Teaser.ogv" type="video/ogg">
</video>

经过搜索，我找到了一个解决方案:

如果我将"preload"属性设置为"true"，视频会正常开始播放

- Thomas Lohner

---

如果存在自动播放，浏览器将忽略预加载属性。 - Sedat Başar

Answer 10

在iPhone的Safari上播放视频时出现了问题。在video标签中添加playsinline属性可以解决此问题，而且它有效！

<video autoplay muted loop playsinline class="someClass">
  <source src="source.mp4" type="video/mp4">
</video>

在Safari的OSX上，如果你对playsinline属性感到困惑，这里有解释。移动浏览器中，playsinline使得视频在原地播放，而不是默认的全屏播放。在Safari的OSX上，由于默认网站的自动播放选项是停止带声音的媒体，因此这种策略也可能引入权限问题。这就是为什么我们需要muted属性的原因。

- ekimas

---

这在2021年对我有效。 - Omar

2022年仍然强劲。 - Mihai