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

Posted 2023-05-07

【中文标题】如何获取动态添加的视频以在 Chrome 上自动播放？ [复制]

【英文标题】：How can I get a dynamically added video to autoplay on Chrome? [duplicate]

【发布时间】：2021-10-09 13:30:27

【问题描述】：

我正在向我的网站添加视频背景，该背景会在页面加载时自动播放。目前自动播放是间歇性的，可能会受到页面其他地方的 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;
  
);

【参考方案1】：

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

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

【讨论】：

感谢您的回复。我已阅读此政策，它指出始终允许静音自动播放。我的代码为视频添加了静音属性，但它仍然不会自动播放。