Question

我无法让Chrome自动播放视频。我已经将视频设置为静音，它可以在Safari和Firefox中自动播放，但不能在Chrome中播放。

            <video autoplay muted poster="path to video" id="bgvid">

        <source src="assets/uploads/hero/livePhotoNoSound.mp4" type="video/webm">

            <source src="assets/uploads/hero/livePhotoNoSound.mp4" type="video/mp4">

        </video>

我想要视频自动开始播放。目前视频加载，但仍然是。我读过的所有内容都表明只要它静音它应该播放，但这不是我得到的结果。

Answer 1

尽管@ richard-lindner的解决方案对我不起作用，但它使我走上了正轨。

在我的情况下，尽管存在muted属性，但Chrome会忽略它，并且会以静默方式失败，除非它也在javacript中明确设置，例如。

var video = document.getElementById("myVideo");
video.oncanplaythrough = function() {
    video.muted = true;
    video.play();
}

有趣的是，使用javascript强制自动播放但省略了video.muted = true行确实在控制台中显示了自动播放策略错误，这表明Chrome浏览器确实在某些情况下忽略了muted属性。在我看来，这就像是Chrome的自动播放政策存在错误。

请注意，仅当未缓存视频时才会发生错误。如果已缓存，则自动播放将按预期工作。

Answer 2

以下示例（代码更改最少）在Mac（10.12.6）上以chrome（版本62.0.3202.94）播放：

<video autoplay muted poster="path to video" id="bgvid">
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>

可能是Safari和Friefox正在播放mp4和chrome webm，而这个问题与webm视频本身有关，而不是HTML5代码。

Answer 3

您可以在视频代码上使用oncanplay="this.muted=true"

<video  muted loop autoplay oncanplay="this.muted=true">
    <source src="your src" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

Answer 4

对于那些使用JavaScript创建元素的人来说，这是我用来配置元素以在Chrome中正确自动播放的JavaScript函数：

function configureVideoElementForAutoplay (videoElement) {
  videoElement.setAttribute('playsinline', '');
  videoElement.setAttribute('muted', '');
  videoElement.setAttribute('autoplay', '');
  videoElement.muted = true;
}

示例：

let vid = document.createElement('video');
configureVideoElementForAutoplay(vid);

@Jonny Green指出直接“静音”属性分配的必要性。

Answer 5

主要答案与我合作-但万一有人试图使其在Apple手机上运行，则必须使用“ playsinline”属性才能使其正常工作。例如：

<video playsinline autoplay muted loop id="myVideo">
        <source src="xen.mp4" type="video/mp4">
    </video>

Chrome中的静音自动播放仍无法正常工作

5 个答案: