Reputation: 341
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:
Safari on M1 Mac does not seem to have the problem.
I have tried:
There was no change to the behaviour.
Additionally:
Upvotes: 0
Views: 88
Reputation: 341
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();
});
Upvotes: 0