Question

我的网站上的自动播放背景英雄最近由于Chrome的新自动播放阻止程序而停止工作。没有音频，所以我对为什么...请帮助感到困惑。

www.homecareassistancemontreal.ca

Answer 1

它停止了，因为Chrome浏览器不希望在未经用户直接同意（例如开始播放）的情况下开始播放任何会产生声音的视频。如果要自动播放视频，则必须确保将其静音。

要这样做，您必须将muted属性添加到<video>中。

<video muted>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

You can read more about this here。

Answer 2

视频必须静音。

<video muted>
 <source src="movie.mp4" type="video/mp4">
 Your browser does not support the video tag.
</video>

我最近在Chrome上遇到的一个问题是，如果您要通过JavaScript添加视频元素，并且要将静音属性设置为true。如果您使用.setAttribute，则Google会阻止播放。请改用点符号。

坏

VideoElement.setAttribute('muted', true);

好

VideoElement.muted = true;

Answer 3

有一个聪明的技巧，可以毫无问题地自动播放带声音的视频：

navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {
    
    video.play(); // play your media here

    // stop microphone stream acquired by getUserMedia
    stream.getTracks().forEach(function (track) { track.stop(); });
});

它会要求用户授予他们的麦克风权限（仅第一次在 chrome 中），他们必须单击“允许”，然后您才能播放任何带声音的内容。之所以有效，是因为只要您正在捕获任何内容，就可以播放所有内容，然后在媒体开始播放时停止麦克风流。

Chrome自动播放阻止程序停止了我的视频

3 个答案: