Simulated live streaming

Simulated live streaming is a method of live streaming that allows you to stream a previously recorded video or event at a set time as if it was happening live. This can work great for webinars or seminars that need to be prerecorded in advance of an event. With Cloudinary, you can use one of two methods that extend existing functionality to achieve this; the one that works for you will depend on your use case and infrastructure:

RTMP Live Streaming

You can use the RTMP live streaming capabilities for a simulated live stream, in much the same way as for a live event. For this method, follow the same steps as you would for a standard live event, but when you configure your video source, set it to be your prerecorded video instead of a camera or live feed. This method works great if you already have a live streaming setup configured as it is easy to switch a live feed for a prerecorded one and your viewers will be none the wiser.

Cloudinary Video Player and backend scheduling

For a solution that is more closely matched to delivering standard videos, you can extend the functionality and display of the Cloudinary Video Player and combine that with some scheduling on your server. The simple steps below show an example of how you can achieve this:

  1. Set up and configure the video player code in the standard way, as explained in the video player guide.
  2. Hide the progress bar controls and update the player to show an indication that it is "live":

    Copy to clipboard
    var liveControls = document.getElementsByClassName("vjs-live-control");
    liveControls[0].classList.remove("vjs-hidden");
    Copy to clipboard
    .cld-video-player .vjs-control-bar .vjs-progress-control {
        display: none;
    }
    div.vjs-control-bar > div.vjs-live-control.vjs-control {
        display: block;
    }
  3. Retrieve the start offset from your server to pass to the video player. The start offset should be the current time (when the user clicks play) minus the time the event was scheduled to start. You should ensure that both times are using the same timezone, or use a UNIX timestamp as demonstrated in the CodeSandbox below.

  4. Pass the start offset in seconds to the currentTime method of your video player when the user clicks the play button:

    Copy to clipboard
    myplayer.on("play", function () {
    myplayer.currentTime(offsetTimeFromServerInSeconds);
    });

The CodeSandbox below shows a simplified demonstration of using this method. In reality, the start offset time should be retrieved from your server.

✔️ Feedback sent!

Rate this page: