HTML5 视频冻结和卡顿

Question

我有一个奇怪的问题。我正在使用以下 HTML5/canvas 简单代码重新访问大约 2 个月前的一个项目，该项目运行非常顺利：

<video id="video2" playsinline controls autoplay style="display: none;"">
        <source src="exercise_media/video_dance_example.mp4" type="video/mp4"  > 
</video>

但是现在，视频每隔几秒就卡住，然后几秒后就会快进，赶上当前时间。不过音频效果很好。

知道这里会发生什么吗？我在我的 IE 浏览器和 Google Chrome 上都进行了测试，同样的问题。

这里有一个简短的视频剪辑来展示我对视频卡顿的意思：https://imgur.com/a/Viv2Gix

我做的额外 JavaScript 工作，即骨骼跟踪，运行良好，即使在视频帧冻结时也能继续工作，所以不是那部分出现故障。这只是 HTML5 视频本身。

Answer 1

当我尝试使用您的代码时，由于您应用的“显示：none”，我没有看到任何视频。如果我删除它 - 然后我会看到视频。一般来说，如果您要自动播放视频，您还应该添加 'muted' 参数以确保所有用户都能自动播放。

关于您正在播放的视频 - 大小和比特率是多少（访问 https://ffprobe.a.video - 并输入视频的 url 以了解）

Answer 2

这是 Chrome 中的 a known regression。

鉴于错误报告被标记为“已开始”，我们希望它能尽快得到修复。
[edit] 事实上它很快就被修复了。他们甚至修复了当前稳定的 88，所以你应该不会再遇到这个问题了。

目前，您可以做的是不隐藏该视频元素，而是覆盖它，例如将background-color设置为您的[=39] =] 并将视频的 z-index 设置为 -1。

const ctx = canvas.getContext("2d");
btn.onclick = (evt) => {
  btn.remove();
  vid.play().then(() => {
    canvas.width = vid.videoWidth;
    canvas.height = vid.videoHeight;
    draw();
  });
};
function draw() {
  ctx.drawImage(vid, 0, 0);
  setTimeout(draw, 50);
}

html,body {
  background: white;
}
:checked ~ #vid {
  z-index: -1;
  position: absolute;
}

canvas,video { width: 300px }

<button id="btn">begin</button>
<span>hide video:</span><input type=checkbox><br>
<canvas id="canvas"></canvas>
<video id="vid" muted src="https://s3.amazonaws.com/leccap-itech-opsrw/apps/demo/1381411844-011-O-c1-86-87-599-13.mp4"></video>

Ps：我想到的另一个解决方法是从 <video> 元素 (const stream = vid.captureStream()) 捕获 MediaStream，但是，虽然它确实改善了一点问题，但它没有像覆盖元素那样修复它（帧率似乎仍然较低），并且在性能方面肯定至少会花费同样多的钱。

HTML5 视频冻结和卡顿

HTML5 video freezing and stuttering

html

video

html5-video