Chromium浏览器autoplay为false时视频无法绘制到Canvas的解决办法

问题背景 #

这段从本地视频文件提取帧绘制到Canvas的代码，在Firefox中无论autoplay设为true或false都能正常运行，但在Chromium内核浏览器（如Chrome、Edge）中无法正常工作。

修复方案 #

结合实际测试的两个关键发现，调整代码逻辑适配Chromium的媒体策略：

• 先将video.autoplay设为true，在onloadeddata事件触发后立即调用video.pause()暂停视频，确保视频帧能被Chromium正确加载
• 主动设置video.currentTime为一个非零值（比如5秒），避免视频开头黑屏的情况；若视频时长不足该值，会自动加载最后一帧，之后在onloadeddata事件中将时间重置回0

修改后的完整代码 #

HTML代码

<!DOCTYPE html>
<html>
  <body>
    <input type="file" id="files" name="files" multiple>
    <div id="container"></div>    
  </body>
</html>

JavaScript代码

let inputFile = document.getElementById("files");
let container = document.getElementById("container");
inputFile.addEventListener("change", inputFileEventHandler);

function inputFileEventHandler() {
  for (const file of inputFile.files) {
    let canvas = document.createElement("canvas");
    canvas.style.border = "1px solid gray";
    canvas.style.padding = "16px";

    let video = document.createElement("video");
    video.style.width = "250px";
    video.style.height = "auto";
    video.style.border = "1px solid gray";
    video.style.padding = "16px";
    // 开启autoplay适配Chromium策略
    video.autoplay = true;
    // 设置currentTime跳过开头可能的黑屏帧
    video.currentTime = 5;
    video.src = URL.createObjectURL(file);

    container.append(video);
    container.append(canvas);

    video.onloadeddata = () => {
      // 暂停视频
      video.pause();
      // 绘制视频帧到Canvas
      canvas.getContext("2d").drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
      // 将视频时间重置回初始位置
      video.currentTime = 0;
    }
  }
}

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