Search code examples
javascripthtml5-video

Creating an HTML video player with dynamic file url

for a project I need to play a video file from a remote URL, the problem: Every 10 minutes the file link is deleted and needs to be re-generated.

While I have a way to automatically fetch the new link, I dont have a way to change the video player's source without causing a load interruption.

  • Is there a way to change the player source without deleting the video buffer?

I tried using javascript to handle the data stream before passing it to the video element but I'm stuck on handling CORS policy.

Solution

  • One way you can do this seamlessly is to have some logic in front of the HTML5 video element that acts as the source and downloads the video in chunks or ranges, allowing it to switch to a new URL for new chunks or ranges when it has to.

    The HTML5 Media Source Extension (MSE) provides the capability to have such a virtual source for the video element and this is how most HLS and MPEG DASH Javascript video players work, downloading the video in chunks and assembling it in an input buffer for the HTML5 video element.

    I don't think any will have functionality out of the box to handle the source URL switching use case you have, but building on one of the open source versions, like VideoJS (https://github.com/videojs/video.js) or ShakaPlayer (https://github.com/shaka-project/shaka-player), might be a good starting point for you.

    Alternatively, if you are able to have a network proxy between your player and the video source, and assuming the video is being served in byte ranges, you could use a proxy URL in your player which is translated into the correct video URL at each request time by the network proxy.