Question

我有以下代码：

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

视频：

在Chrome和Firefox中都能很好地显示
在Firefox中按预期播放
在Chrome中显示但不显示“自动启动”。这就是问题所在。
如果我点击它（在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"'>

所以现在我走到了尽头。感谢您的任何指示！非常感谢。

Answer 1

你需要添加playsinline autoplay muted loop，Chrome不允许视频自动启动，如果没有静音，也就是现在我不知道为什么它不能在所有Android设备上工作，我试着看看它＆＃ 39;特定版本，如果我发现了一些我会告诉您的内容

Chrome问题：经过一些研究后我发现它在chrome上没有用，因为在响应中你可以激活数据保护程序，并阻止任何视频自动启动

Answer 2

我刚刚阅读this文章，并说：

重要提示：视频文件的顺序至关重要; Chrome目前有一个错误，如果它出现在其他任何地方，它将无法自动播放.webm视频。

因此，如果您将.webm放在源列表中，那么看起来您的问题将会得到解决。希望有所帮助。

Answer 3

在提出问题时可能不是这种情况，但从Chrome 66开始，自动播放被阻止。

http://bgr.com/2018/04/18/google-chrome-66-download-auto-playing-videos-block/

Answer 4

当我尝试静音时试试这个，请在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

Answer 5

此问题在这里得到了很大的描述
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/

Answer 6

尝试一下：

<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;
  }
});

Answer 7

Extremeandy已经提到自Chrome 66自动播放视频已停用。

在调查之后，我发现静音视频仍然可以自动播放。在我的情况下，视频没有任何音频，但添加静音视频标签修复了它：

希望这也有助于其他人。

Answer 8

这些是我用来在Chrome上自动播放视频的属性-onloadedmetadata="this.muted = true"，playsinline，autoplay，muted，loop

示例：

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

Answer 9

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

HTML 5视频“自动播放”不会自动在CHROME中启动

9 个答案: