HTML5 video stream freezes

Question

I have a streaming video player in a Vue.js 3 app, using Plyr player to stream MP4 video from an Azure Blob storage account, through a Microsoft CDN. Data in the storage account is private so access is provided by generating a Shared Access Signature (SAS) on the back end with a 2 hour expiry.

When playing a video of 58:15, the video will play OK for usually 5-10 minutes, then stop, and Plyr will appear as if it is buffering, but there will be no further network requests, and no errors from the console.

This issue has been seen on multiple different video files.

If I scrub the video to a different timecode it will immediately start playing again.

I've seen it on:

• Chrome 125.0.6422.61 on M1 Mac: played for 7:33 and 6:00 before it froze
• Edge on Windows: 4 minutes and 7:30 before it froze
• It has also occurred on another machine on Chrome on Windows.

Safari on M1 Mac does not seem to have the problem.

I have tried:

• Swapping Plyr for Video.js on the front end
• Swapping Plyr for vanilla HTML5 video player
• Upgrading sv/X-Ms-Version field in the SAS to 2024-05-04 (from 2017)

There was no change to the behaviour.

Additionally:

• In the video response headers the "Content-Type" is showing as "video/mp4"
• When seeking and streaming it is successfully issuing partial 206 responses with Content-Range
• Occasionally if the browser is left for around 30 minutes, the stream will spontaneously continue

Answer 1

It turns out the "stalled" event is firing in the player - this looks to work as a temporary fix - there is a brief flicker as the player reinitialises, so if anyone has any ideas for improving this it would be most welcome.

player.value.on("stalled", (event) => {
   console.log("Stream stalled, attempting to recover...");
   const time = player.value.currentTime;
   player.value.load();
   player.value.currentTime = time;
   player.value.play();
 });