HTML5视频自动播放无法正常工作

Question

我使用这段代码:

<video width="440px" loop="true" autoplay="true" controls>
<source src="http://www.tuscorlloyds.com/CorporateVideo.mp4" type="video/mp4" />
<source src="http://www.tuscorlloyds.com/CorporateVideo.ogv" type="video/ogv" />
<source src="http://www.tuscorlloyds.com/CorporateVideo.webm" type="video/webm" />
</video>

我希望视频能够自动播放,但是当页面加载时视频无法播放,它看起来像是一个缓冲问题,因为当我将鼠标悬停在视频上(显示控件)时,视频始终为2秒,但随后停止并且不继续.

页面可以在这里看到:http://www.tuscorlloyds.com(视频在滑块右上角)

注意:我刚刚再次访问该网站并且autopplay似乎有效,但是当我再次尝试同样的问题时,这是一个缓冲问题吗？我能做些什么来阻止这个？

非常感谢尼克

Answer 1

如果视频未静音，Chrome 不允许自动播放。尝试使用这个：

<video width="440px" loop="true" autoplay="autoplay" controls muted>
  <source src="http://www.tuscorlloyds.com/CorporateVideo.mp4" type="video/mp4" />
  <source src="http://www.tuscorlloyds.com/CorporateVideo.ogv" type="video/ogv" />
  <source src="http://www.tuscorlloyds.com/CorporateVideo.webm" type="video/webm" />
</video>

Answer 2

尝试autoplay="autoplay"代替"true"值.这是记录的启用自动播放的方法.我知道,这听起来很奇怪.

Answer 3

移动浏览器通常会忽略此属性,以防止在用户明确启动下载之前使用数据.

更新:Android和iOS上较新版本的移动浏览器支持自动播放功能.但它仅在视频静音或没有音频通道时才有效:

一些其他信息:https: //webkit.org/blog/6784/new-video-policies-for-ios/

Answer 4

2018年10月的工作解决方案，适用于包含音频频道的视频

 $(document).ready(function() {
     $('video').prop('muted',true).play()
 });

看看我的另一个更深入的答案：https : //stackoverflow.com/a/57723549/3049675