HTML5视频“自动播放”无法在Chrome中自动启动

7vhp5slm  于 2023-09-28  发布在  Go
关注(0)|答案(9)|浏览(126)

我有以下代码:

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

现在我走进死胡同了。谢谢你的任何指点!非常感谢。

i7uaboj4

i7uaboj41#

您需要添加playsinline autoplay muted loop,因为Chrome不允许视频在未静音的情况下自动启动。此外,现在我不知道为什么它不工作在所有的Android设备。我正在看它是否是特定版本的,如果我发现什么,我会让你知道。
Chrome问题:经过一些研究,我发现它有时在Chrome上不起作用,因为在响应中,你可以激活数据保护程序,它会阻止任何视频自动启动。

vlf7wbxs

vlf7wbxs2#

尝试这个当我尝试给静音,检查这个演示在codpen

<video width="320" height="240" controls autoplay muted id="videoId">
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

脚本

function toggleMute() {

  var video=document.getElementById("videoId");

  if(video.muted){
    video.muted = false;
  } else {
    debugger;
    video.muted = true;
    video.play()
  }

}

$(document).ready(function(){
  setTimeout(toggleMute,3000);
})

编辑属性内容

autoplay muted playsinline

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

hwazgwia

hwazgwia3#

在提出问题时,情况可能并非如此,但从Chrome 66开始,自动播放被阻止
http://bgr.com/2018/04/18/google-chrome-66-download-auto-playing-videos-block/

4zcjmb1e

4zcjmb1e4#

我刚刚阅读this的文章,它说:
重要:视频文件的顺序至关重要; Chrome目前有一个错误,如果.webm视频出现在其他视频之后,它将不会自动播放。
因此,如果您将.webm放在源列表的第一位,看起来您的问题将得到解决。希望能帮上忙。

bd1hkmkf

bd1hkmkf5#

试试这个:

<video src="{{ asset('path/to/your_video.mp4' )}}" muted autoplay loop playsinline></video>

然后把这个js放在后面:

window.addEventListener('load', async () => {
  let video = document.querySelector('video[muted][autoplay]');
  try {
    await video.play();
  } catch (err) {
    video.controls = true;
  }
});
6rqinv9w

6rqinv9w6#

这些是我用来在Chrome上自动播放视频的属性-onloadedmetadata="this.muted = true"playsinlineautoplaymutedloop
范例:

<video src="path/to/video.mp4" onloadedmetadata="this.muted = true" playsinline autoplay muted loop></video>
fykwrbwg

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/

new9mtju

new9mtju8#

Extremeandy提到,自Chrome 66起,自动播放视频已被禁用。
经过研究,我发现静音视频仍然可以自动播放。在我的例子中,视频没有任何音频,但添加静音到视频标签已经修复了它:
希望这也能帮助其他人。

qoefvg9y

qoefvg9y9#

这里是:http://www.htmlcssvqs.com/8ed/examples/chapter-17/webm-video-with-autoplay-loop.html你必须添加标签:autoplay=“autoplay”loop=“loop”或者只是“autoplay”和“loop”。

相关问题