HTML自动播放视频问题：DOM加载/刷新时无法自动播放及异步修复代码无效

设置了autoplay和loop属性的视频，DOM加载或页面刷新时无法自动播放，尝试用异步JavaScript代码加载视频仍未解决问题，原代码如下：

const getVideo = async function () {
    const videoData = await fetch('./video/NEZAJA - Google Chrome 2024-03-05 12-46-49.mp4')
    const videoBlob = await videoData.blob()
    const videoURL = URL.createObjectURL(videoBlob)

    const noticeDivBott =  document.createElement('div')
    noticeDivBott.classList.add('notice-div-bott')
    noticeDivBott.innerHTML = 
    `
    <video class="video" style="border-radius: 30px;" autoplay loop width="380px">
    <source src='${videoURL}'  type="video/mp4" />
    Download the
    <a href="/media/cc0-videos/flower.webm">WEBM</a>
    or
    <a href="/media/cc0-videos/flower.mp4">MP4</a>
    video.
    </video>
    `
    return notice.appendChild(noticeDivBott)

}

getVideo()

问题原因与修复方案 #

• 浏览器自动播放策略限制：当前主流浏览器都有自动播放限制，非静音视频无法自动触发播放，必须给视频添加muted属性。
• 动态元素的播放触发：通过JS动态创建的视频元素，即使设置了autoplay，也可能需要手动调用play()方法来触发播放。
• 冗余的异步加载步骤：原代码用fetch转Blob再创建URL完全没必要，直接使用视频原路径即可，减少异步环节带来的不确定性。

修改后的代码 #

const getVideo = async function () {
  const noticeDivBott = document.createElement('div')
  noticeDivBott.classList.add('notice-div-bott')
  // 添加muted属性满足浏览器自动播放要求
  noticeDivBott.innerHTML = `
    <video class="video" style="border-radius: 30px;" autoplay loop muted width="380px">
      <source src="./video/NEZAJA - Google Chrome 2024-03-05 12-46-49.mp4" type="video/mp4" />
      Download the
      <a href="/media/cc0-videos/flower.webm">WEBM</a>
      or
      <a href="/media/cc0-videos/flower.mp4">MP4</a>
      video.
    </video>
  `
  notice.appendChild(noticeDivBott)
  
  // 手动触发播放，处理可能的播放失败情况
  const video = noticeDivBott.querySelector('.video')
  try {
    await video.play()
  } catch (err) {
    console.error('自动播放失败:', err)
  }
}

// 确保DOM完全加载后再执行，避免找不到notice元素
document.addEventListener('DOMContentLoaded', getVideo)

关键修改说明 #

1. 给<video>标签添加muted属性，符合浏览器自动播放的静音规则；
2. 移除了fetch转Blob的冗余步骤，直接使用视频原始路径加载；
3. 在视频元素插入DOM后，手动调用play()方法并捕获异常，确保播放触发；
4. 绑定DOMContentLoaded事件，保证代码在DOM加载完成后执行，避免因notice元素未加载导致的错误。

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