HTML Canvas播放视频时隐藏原video元素后画布白屏问题求助

问题根因 #

现代浏览器默认会对设置了display: none、visibility: hidden的不可见视频元素暂停解码和帧输出，drawImage接口读取不到有效视频帧，就会导致画布白屏。

修复方案 #

1. 调整video元素的隐藏方式 #

不要使用会让浏览器判定元素不可见的隐藏属性，改为将视频移出可视区域，添加如下CSS即可：

#sourcevideo {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

2. 补充视频播放逻辑 #

当前代码缺少触发视频播放的逻辑，受浏览器自动播放策略限制，非静音视频无法自动启动播放，可选择两种实现方式：

• 方案A：开启静音自动播放，修改video标签属性：

<video id="sourcevideo" controls muted autoplay playsinline src="https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c4/Physicsworks.ogv/Physicsworks.ogv.240p.vp9.webm"></video>

• 方案B：绑定用户交互事件触发播放（符合非静音视频的播放规范）：

// 示例：点击页面后播放视频
document.body.addEventListener('click', async () => {
  await sourcevideo.play()
})

可选优化：添加绘制前就绪判断 #

避免视频未加载完成时绘制无效内容，修改drawVideo方法：

function drawVideo() {
  // 确认视频有可渲染的当前帧再执行绘制
  if (sourcevideo.readyState >= HTMLVideoElement.HAVE_CURRENT_DATA) {
    canvasctx.drawImage(
      sourcevideo,
      0,
      0,
      outputcanvas.width,
      outputcanvas.height
    );
  }
  requestAnimationFrame(drawVideo);
}

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