HTML5 video freezing and stuttering - html

Question

I have a weird issue. I'm revisiting a project from just ~2 months ago that was working perfectly smoothly, using the following HTML5/canvas simple code:
<video id="video2" playsinline controls autoplay style="display: none;"">
<source src="exercise_media/video_dance_example.mp4" type="video/mp4" >
</video>
But now, the video is freezing every few seconds, then a few seconds later will skip forward to catch up to the current time. Audio works perfectly though.
Any ideas what could be going on here? I tested on both my IE explorer and Google Chrome, same issue.
Here is a short video clip to show what I mean with the stuttering of the video: https://imgur.com/a/Viv2Gix
The extra JavaScript stuff I do, namely the skeletal tracking, runs fine, and continues working even when the video frame is frozen, so it's not that part which is malfunctioning. It's just the HTML5 video itself.

Answer 1

This is a known regression in Chrome.
Given the bug report is marked as "started", we can hope it will get fixed soon enough.
[edit] And indeed it has been fixed soon enough. They even make the fix climb to the current stable 88, so you should not face this issue anymore.
For the time being, what you can do is to not hide that video element, but to cover it, e.g set a background-color to your body and set the z-index of your video to -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: an other workaround I thought about is to capture a MediaStream from the <video> element (const stream = vid.captureStream()), however, while it indeed improves a little the issue, it doesn't fix it as well as covering the element (the frame rate still seems lower), and it will certainly cost at least as much in terms of performances.

Answer 2

when I attempt your code, I don't see any video, due to the "display:none" that you are applying. If I remove that - then I see the video. In general, if you are autoplaying a video, you should add the 'muted' param as well to ensure autoplay for all users.
In terms of the video you are playing - what is the size and bitrate (visit https://ffprobe.a.video - and enter the url of the video to find out)