HTML5 视频卡顿和卡顿

如何解决HTML5 视频卡顿和卡顿

我有一个奇怪的问题。我正在重新审视大约 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 视频本身。

解决方法

这是 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);
  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，但是，虽然它确实改善了一点问题，但它并没有像以及覆盖元素（帧速率似乎仍然较低），并且在性能方面肯定至少会花费相同的成本。

,

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

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