HTML5 视频卡顿和卡顿

Question

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

<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

这是 Chrome 中的a known regression。

鉴于错误报告被标记为“已开始”，我们可以希望它会尽快得到修复。
[编辑] 事实上它已经修复得足够快了。他们甚至使修复爬升到当前稳定的 88，所以你不应该再面对这个问题了。

目前，您可以做的是不隐藏该视频元素，而是将其覆盖，例如为您的身体设置背景颜色并设置视频的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，然而，虽然它确实改善了一点问题，但它并没有解决它以及覆盖元素（帧速率似乎仍然较低），并且在性能方面肯定会花费至少同样多的成本。

Answer 2

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

就您正在播放的视频而言 - 大小和比特率是多少（访问https://ffprobe.a.video - 并输入视频的网址以查找）