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

Video auto play is not working in Safari and Chrome desktop browser

提问by Adam Bubela

I spent quite a lot of time trying to figure out why video embedded like here:

我花了很多时间试图弄清楚为什么视频嵌入在这里：

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

starts playing automatically once the page is loaded in FireFox but cannot do autoplay in Webkit based browsers. This only happened on some random pages. So far I was unable to find the cause. I suspect some unclosed tags or extensive JS created by CMS editors.

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

回答by Adam Bubela

The best fix I could get was adding this code just after the </video>

我能得到的最好的解决方法是在 </video>

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

...not pretty but somehow works.

...不漂亮，但不知何故有效。

UPDATERecently many browsers can only autoplay the videos with sound off, so you'll need to add mutedattribute to the video tag too

更新最近很多浏览器只能在关闭声音的情况下自动播放视频，因此您也需要为muted视频标签添加属性

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

回答by Ram

After using jQuery play()or DOM maniupulation as suggested by the other answers, it was not still working (Video wasn't autoplaying) in the Chrome for Android (Version 56.0).

play()按照其他答案的建议使用 jQuery或 DOM 操作后，它在 Android 版 Chrome（版本 56.0）中仍然无法正常工作（视频未自动播放）。

As per this postin developers.google.com, From Chrome 53, the autoplay option is respected by the browser, if the video is muted.

按本岗位在developers.google.com，从Chrome浏览器53，自动播放选项是由浏览器的尊重，如果视频静音。

So using autoplay mutedattributes in video tag enables the video to be autoplayed in Chrome browsers from version 53.

因此，autoplay muted在 video 标签中使用属性可以使视频在 Chrome 浏览器中自动播放 53 版。

Excerpt from the above link:

摘自上述链接：

Muted autoplay for video is supported by Chrome for Android as of version 53. Playback will start automatically for a video element once it comes into view if both autoplayand mutedare set[...]

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

• Muted autoplay is supported by Safari on iOS 10 and later.
• Autoplay, whether muted or not, is already supported on Android by Firefox and UC Browser: they do not block any kind of autoplay.

视频静音自动运行，如果同时为Android是Chrome支持如53版一旦映入眼帘的将自动开始播放的视频元素autoplay，并muted设置[...]

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

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

回答by Arnaud Leyder

It happens that Safari and Chrome on Desktop do not like DOM manipulation around the video tag. They will not fire the play order when the autoplay attribute is set evenif the canplaythrough event has fired when the DOM around the video tag has changed after initial page load. Basically I had the same issue until I deleted a .wrap() jQuery around the video tag and after that it autoplayed as expected.

碰巧桌面上的 Safari 和 Chrome 不喜欢围绕视频标签的 DOM 操作。即使在初始页面加载后视频标记周围的 DOM 发生更改时触发了 canplaythrough 事件，它们也不会在设置 autoplay 属性时触发播放顺序。基本上我遇到了同样的问题，直到我删除了视频标签周围的 .wrap() jQuery，然后它按预期自动播放。

回答by mooga

Google just changed their policy for autoplay videos, it has to be muted

谷歌刚刚改变了自动播放视频的政策，必须是 muted

You can check here

你可以在这里查看

so just add 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>

回答by GarryW

For me the issue was that the mutedattribute needed to be added within the videotag. I.e.:

对我来说，问题是muted需要在video标签中添加属性。IE：

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

回答by Abdul Basit

Chrome does not allow to auto play video with sound on, so make sure to add mutedattribute to the videotag like this

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

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

回答by Thomas Lohner

I've just get now the same issue with my video

我的视频现在遇到了同样的问题

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

After search, I've found a solution:

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

If I set "preload" attributes to "true" the video start normally

如果我将“preload”属性设置为“true”，则视频正常启动

回答by sanath_p

Adding the below code at the bottom of the page worked for me . I dont know why it works :(

在页面底部添加以下代码对我有用。我不知道它为什么有效:(

 setTimeout(function(){
     document.getElementById('vid').play();
 },1000);

回答by Ishan Lakshitha

Try this:

尝试这个：

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

回答by Ant0ha

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

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

Only this solution helped me, <video autoplay muted ...>...</video>didn't work...

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