如何获取动态添加的视频以在 Chrome 上自动播放？ [复制]

Question

我正在向我的网站添加视频背景，该背景会在页面加载时自动播放。目前自动播放是间歇性的，可能会受到页面其他地方的 ajax 调用的影响。

当视频不自动播放时，我收到以下错误：

Uncaught (in promise) DOMException: play() failed 因为用户没有先与文档交互。

function addVideoBackground() {

    // SWITCH WHICH VIDEO //

    const urlPath = window.location.pathname;
    let videoSrc;

    switch (urlPath) {
        case "/pages/home-recognition":
            videoSrc = "https://player.vimeo.com/external/574413787.hd.mp4?s=717309f70fd17c0204187701b2316787944a1fce&profile_id=174";
            break;
        default:
            videoSrc = "https://player.vimeo.com/external/574413787.hd.mp4?s=717309f70fd17c0204187701b2316787944a1fce&profile_id=174";
    }

    // DECLARE VARIABLES //
    const body = document.querySelector('header');

    //CREATE BASIC ELEMS //
    const videoHolder = document.createElement('div');
    const videoOuter = document.createElement('div');
    const videoElem = document.createElement('video');
    const source = document.createElement('source');

    // APPLY ATTRIBUTES
    $(videoHolder).addClass("videoHolder");
    $(videoOuter).addClass("videoOuter");
    $(videoElem).attr({ autoplay: "true", muted: "true", loop: "true", id: "videoBackground" });
    $(source).attr({ src: videoSrc, type: "video/mp4" });

    // PUT IT ALL ON SITE //
    videoElem.appendChild(source);   
    videoOuter.appendChild(videoElem);
    videoHolder.appendChild(videoOuter);
    body.appendChild(videoHolder);

}

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

Answer 1

Chrome 在 2018 年发布了一项新政策，其中在页面上出现用户交互之前，自动播放将无法按预期工作。

您可以参考此链接了解更多信息：https://developer.chrome.com/blog/autoplay/#developer-switches