我有以下代码:
<video controls autoplay>
<source src="video/myVideo.mp4" type="video/mp4">
<source src="video/myVideo.webm" type="video/webm">
<source src="video/myVideo.ogv" type="video/ogg">
</video>
视频:
1.在Chrome和Firefox中显示良好
1.在Firefox中,它按预期播放
1.在Chrome中,它会显示,但不会“自动启动”。这就是问题所在。
1.如果我点击它(在Chrome中),它就可以播放
试图
<video controls autoplay>...</video>
<video controls autoplay="1">...</video>
<video controls autoplay="autoplay">...</video>
在Chrome中没有任何功能。
然后我也尝试改变编解码器,如https://en.wikipedia.org/wiki/HTML5_video中所建议的,但它也不起作用:
<source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'>
<source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
现在我走进死胡同了。谢谢你的任何指点!非常感谢。
9条答案
按热度按时间i7uaboj41#
您需要添加
playsinline autoplay muted loop
,因为Chrome不允许视频在未静音的情况下自动启动。此外,现在我不知道为什么它不工作在所有的Android设备。我正在看它是否是特定版本的,如果我发现什么,我会让你知道。Chrome问题:经过一些研究,我发现它有时在Chrome上不起作用,因为在响应中,你可以激活数据保护程序,它会阻止任何视频自动启动。
vlf7wbxs2#
尝试这个当我尝试给静音,检查这个演示在codpen
脚本
编辑属性内容
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
hwazgwia3#
在提出问题时,情况可能并非如此,但从Chrome 66开始,自动播放被阻止。
http://bgr.com/2018/04/18/google-chrome-66-download-auto-playing-videos-block/
4zcjmb1e4#
我刚刚阅读this的文章,它说:
重要:视频文件的顺序至关重要; Chrome目前有一个错误,如果.webm视频出现在其他视频之后,它将不会自动播放。
因此,如果您将.webm放在源列表的第一位,看起来您的问题将得到解决。希望能帮上忙。
bd1hkmkf5#
试试这个:
然后把这个
js
放在后面:6rqinv9w6#
这些是我用来在Chrome上自动播放视频的属性-
onloadedmetadata="this.muted = true"
,playsinline
,autoplay
,muted
,loop
范例:
fykwrbwg7#
这个问题在这里有很大的描述
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
TL;DR您仍然可以始终自动播放
muted
视频此外,如果你想在iOS上自动播放视频,请添加
playsInline
属性,因为默认情况下iOS会尝试全屏播放视频https://webkit.org/blog/6784/new-video-policies-for-ios/
new9mtju8#
Extremeandy提到,自Chrome 66起,自动播放视频已被禁用。
经过研究,我发现静音视频仍然可以自动播放。在我的例子中,视频没有任何音频,但添加静音到视频标签已经修复了它:
希望这也能帮助其他人。
qoefvg9y9#
这里是:http://www.htmlcssvqs.com/8ed/examples/chapter-17/webm-video-with-autoplay-loop.html你必须添加标签:autoplay=“autoplay”loop=“loop”或者只是“autoplay”和“loop”。