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
• 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