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浏览器和谷歌浏览器上都测试了，同样的问题。

这里有一个简短的视频剪辑来展示我对视频口吃的意思:https://i.stack.imgur.com/DeZra.jpg

我做的额外的JavaScript的东西，即骨骼跟踪，运行良好，并继续工作，即使视频帧被冻结，所以它不是那部分是故障。这只是HTML5视频本身。

Answer 1

这是Chrome中已知的回归。

既然bug报告被标记为"started"，我们可以希望它能尽快得到修复。
[edit]的确，它很快就被修复了。他们甚至使修复攀升到目前稳定的88，所以你应该不会再面对这个问题了。

目前，你能做的是不隐藏例如，为你的body设置一个背景色，并将你的视频的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"你正在申请。如果我把它去掉，我就能看到视频了。一般来说，如果你要自动播放视频，你应该添加'mute '参数，以确保所有用户都能自动播放。

就你正在播放的视频而言-大小和比特率是多少(访问https://ffprobe.a.video -并输入视频的url来查找)