Search code examples
html5-videostreamingvideo.js

Video.js VOD as live stream

I’m looking for a solution how to play a pre recorded video (vod) as a live video using video.js or any other player

We have a video session which should go “live” e.g. 3pm- 4:45. If a user comes to the page at 3:15. We want to show him the video 15 minutes in, without an option to fast forward it and with the live sticker. Does anyone have an idea how to achieve it?

2nd question, if we have pre loaded live stream url, which will start at 3pm, and user comes to the page at 2:58, if the player tries to play the video, as the stream is nit active, it will show an error. Is there a way of making player to re try every 5 seconds, and eventually once the stream is live to play the video ?

Thanks

Solution

  • There are several pre existing solutions to provide 'VOD to Live', some commercial and some open source - e.g.:

    To make the player wait for the start you can either add some sort of 'waiting for start' video to your live stream or you can catch video player errors in your Javascript and display a message to the user to try again in whatever time is left before the start.

    player.on('error', function() {
  //Add you message to the user here
});

    If you want to control just with the player as discussed in the comments, that does restrict your options a bit.

    You could implement your own custom control buttons, like Play, seek etc, and add some logic to make them check the time and seek to a point before playing. VideoJS custom buttons info is here:

    I suspect it may get quite complicated if you need to close all 'back doors' and loop holes, especially to anyone who has enough tech knowledge to just look at the source video URL directly in the code, but if you are not worried about those types of 'attacks' then that approach might meet your needs.