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

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

Answer 2

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

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

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

Answer 3

如果视频未静音，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 4

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

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

Answer 5

<video width="1000px" loop="true" autoplay="autoplay" controls muted></video> 为我工作

Answer 6

///如果您的软件不支持jQuery或给出任何引用类型错误，则可能要添加一些脚本。

//仅当您正在使用的软件不支持jQuery时，才使用上述脚本。

$（document）.ready（function（）{ //更改mp3或任何音乐文件的位置。 var source =“ ../Assets/music.mp3”; var audio = new Audio（）; audio.src =源 audio.autoplay = true; }）;

Answer 7

html {
  padding: 20px 0;
  background-color: #efefef;
}

body {
  width: 400px;
  padding: 40px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

video {
  width: 400px;
  display: block;
}

<video onloadeddata="this.play();this.muted=false;" poster="https://durian.blender.org/wp-content/themes/durian/images/void.png" playsinline loop muted controls>
    <source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4" />
    Your browser does not support the video tag or the file format of this video.
</video>

Answer 8

正如我观察到的那样，该自动播放属性已被删除，HTML5不再支持自动播放选项，即使您查看了官方的HTML5文档，也找不到与自动播放相关的任何内容，因为他们已将其从文档中删除了。 / p>

参考：W3Schools。（2018，09 07）。 HTML5视频。从www.w3schools.com检索：https://www.w3schools.com/html/html5_video.asp

使用javascript还有其他解决方案。

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

8 个答案: