Question

所以在最新的Chrome中显然已经改变了自动播放策略，所以这反过来打破了每个具有应该自动播放的视频背景的网站我想知道是否有人有任何可以“解决”这个问题的智能工作？（我相信一个按钮或“输入页面”解决方案将是一种可怕的解决方法，特别是对于背景视频）

如果用户未与文档交互，您现在可以在控制台中获得以下内容：

  Uncaught (in promise) DOMException: play() failed 
because the user didn't interact with the document first.

以下是谷歌的变化：https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Answer 1

最近的政策更改后，Chrome将不允许自动播放视频。一种简单的解决方案是使视频静音，模拟点击并播放视频。

HTML

<video id="video" muted loop="loop">

JavaScript

// Click a random element
document.getElementById('randomElement').click();
// Play video after click
setTimeout(function(){
    document.getElementById('video').play();
}, 1500);

Answer 2

我也一直在寻找答案。我没有看到一个明确的解决方法，因为它很难绕过，这似乎是一个严格的政策。好像你在说Chrome建议如下

var promise = document.querySelector('video').play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}

我想知道如果只是在自动播放视频中添加静音将有助于减少并帮助更快地与Chrome新政策保持一致，以便用户可以再次看到这些视频。另一个选项似乎是从使用HTML5视频代码返回到iframe并添加allow="autoplay。这似乎默认启用自动播放。肯定似乎是使用iframe而不是HTML5视频标记的后退，但这似乎是正确控制URL的唯一方法，以确保视频可以设置为相同的域。

Answer 3

我有两个不需要任何属性或 iframe 的智能解决方案，它可以自动播放带声音的音频和视频：

1. WebRTC 解决方案：

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

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

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

2.手动解决方案： 如果由于某种原因用户不想授予他们的麦克风权限，则指示他们从站点设置中允许声音权限，这也将授予播放音频和视频的权限声音永久。

受到这篇 webRtc 文章的启发：webrtchacks

Chrome自动播放政策中的自动播放背景视频

3 个答案: