Chrome中Elementor背景视频首次访问无法自动播放的JS解决方案请求

问题原因 #

浏览器的自动播放政策限制：首次访问时，无用户交互的情况下，浏览器不允许带有音频的视频自动播放；刷新页面时，浏览器可能识别到之前的会话交互记录，因此允许播放。另外原代码依赖DOMContentLoaded触发，可能存在视频元素还未被Elementor动态渲染完成的情况。

解决方案代码 #

以下代码结合等待视频元素加载完成和监听用户首次交互两个核心点，确保视频能正常触发自动播放：

// 等待目标视频元素加载完成的工具函数
function waitForElement(selector) {
  return new Promise(resolve => {
    if (document.querySelector(selector)) {
      return resolve(document.querySelector(selector));
    }

    const observer = new MutationObserver(mutations => {
      if (document.querySelector(selector)) {
        observer.disconnect();
        resolve(document.querySelector(selector));
      }
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  });
}

// 监听用户首次交互触发视频播放
function initVideoOnUserInteraction() {
  waitForElement('#myVideo div video.elementor-html5-video').then(video => {
    // 预先设置音频参数
    video.muted = false;
    video.volume = 1;

    // 定义播放触发逻辑
    function playVideo() {
      video.play().then(() => {
        // 播放成功后移除监听，避免重复触发
        document.removeEventListener('click', playVideo);
        document.removeEventListener('touchstart', playVideo);
      }).catch(err => {
        console.error('视频播放失败:', err);
      });
    }

    // 绑定用户交互事件（覆盖点击、触摸场景）
    document.addEventListener('click', playVideo);
    document.addEventListener('touchstart', playVideo);
  });
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', initVideoOnUserInteraction);

代码说明 #

• waitForElement函数：通过MutationObserver监听DOM变化，确保视频元素被Elementor动态渲染完成后再执行操作，避免原代码中可能出现的元素未找到问题。
• 用户交互监听：通过监听用户点击或触摸操作，满足浏览器自动播放的政策要求，触发带音频的视频播放。
• 自动移除监听：播放成功后立即移除交互监听，避免后续用户操作重复触发播放逻辑。

备选方案（无用户交互场景） #

如果不需要等待用户交互，可尝试以下代码（但受限于浏览器政策，部分浏览器可能仍无法生效）：

document.addEventListener('DOMContentLoaded', function() {
  const observer = new MutationObserver(mutations => {
    const video = document.querySelector('#myVideo div video.elementor-html5-video');
    if (video) {
      observer.disconnect();
      video.muted = false;
      video.volume = 1;
      // 尝试自动播放，捕获浏览器阻止的情况
      video.play().catch(err => {
        console.warn('自动播放被浏览器阻止，请引导用户进行页面交互:', err);
      });
    }
  });

  observer.observe(document.body, { childList: true, subtree: true });
});

内容的提问来源于stack exchange，提问作者md sobuz