Live streaming prerecorded video content is a pretty common practice. You might want to use prerecorded content instead of an actual live stream for many reasons. From a high level perspective, some of the benefits are:
- Convenience and control. You can plan and edit everything up front without any surprises.
- “Live” experiences. Users can tune in and engage with your video as if it were a live event.
Some common use cases might be webinars, product launches, online education, and marketing events. Plan your content, promote it, and bring it to your customers at a set time and date! If you’re familiar with Cloudinary, you won’t be surprised to hear that the Cloudinary Video Player simplifies things quite a bit. This post will walk through the steps and requirements for putting together a simulated live streaming experience.
Before we move forward and implement a simulated live streaming setup, it will be useful to understand how it works. The magic happens by telling the video player that the content is live, disabling the time controls, and providing a time to start the video playback. The first couple of parts just require some simple settings on the Cloudinary Video Player. The last part will most commonly be implemented on a server. We’ll get into more details on that later.
The easiest way to upload your video to Cloudinary is through the console. There’s a big blue Upload button at the top right of the console navigation bar. You can also upload your video directly for your website or application using one of the Cloudinary SDKs. Once your video is uploaded to your Cloudinary media library, you’re ready to start simulating a live stream.
This can be done in a number of different ways. The key is that you have a way to tell the video player where to start the playback. Your service needs to know when the live stream is scheduled to start and the length of the video. Based on this, you can calculate where to start the video. Here’s an example if you hardcode the start time directly on the web page using JavaScript:
let offsetTimeFromServer = function () {
// Define the fixed start time of the event (Unix timestamp in seconds)
// This could be fetched from a database
const startTime = 1623765482;
// Get the current time in Unix timestamp format (seconds)
const timeNow = Math.floor(Date.now() / 1000);
// Calculate the offset (how much time has passed since the event started)
return timeNow - startTime;
};
Code language: JavaScript (javascript)You could easily add similar code on your server that can fetch all the related details like start time and video URL from a database.
The Cloudinary Video Player can be installed on your web page or frontend framework of choice. We’ll use HTML and vanilla JavaScript for this tutorial. We’re adding a video element to play our live stream, our function to get the live stream start time (this could be a fetch request to your server), and loading the Cloudinary Video Player from a CDN.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simulated Live Streaming</title>
</head>
<body>
<div style="max-width: 600px">
<video
id="doc-player"
controls
muted
class="cld-video-player cld-fluid vjs-live"
></video>
</div>
<script>
let offsetTimeFromServer = function () {
// Define the fixed start time of the event (Unix timestamp in seconds)
// This should be updated dynamically or set close to the actual start time
const startTime = 1623765482;
// Get the current time in Unix timestamp format (seconds)
const timeNow = Math.floor(Date.now() / 1000);
// Calculate the offset (how much time has passed since the event started)
return timeNow - startTime;
};
</script>
<!-- Load Cloudinary Video Player from CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cloudinary-video-player@2.3.3/dist/cld-video-player.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.jsdelivr.net/npm/cloudinary-video-player@2.3.3/dist/cld-video-player.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>
Code language: HTML, XML (xml)Now, we’ll need to hook up our live stream video and configure the video player for a simulated live stream. First, we’ll need some styles to hide the controls from the video player:
<style>
.cld-video-player .vjs-control-bar .vjs-progress-control {
display: none;
}
div.vjs-control-bar > div.vjs-live-control.vjs-control {
display: block;
}
</style>
Code language: HTML, XML (xml)Next, we’ll add to the JavaScript on our page to load our live stream video and start it from the calculated time for our live stream. You’ll need to add your Cloudinary cloud name and have the public id or public URL for the video that you will be streaming.
<script>
// ^ Existing JS code
// Get a handle to the Cloudinary Video Player by its id (“doc player”)
const demoplayer = cloudinary
.videoPlayer('doc-player', { cloudName: 'demo' })
.width(600);
// Public ID or video URL
const videoSource = 'products/shoe_launch';
// Get a reference to the player controls
const liveControls = document.getElementsByClassName('vjs-live-control');
// Load the stream video in
demoplayer.source(videoSource);
// Start the video from the calculated start time
demoplayer.on('play', function () {
liveControls[0].classList.remove('vjs-hidden');
const offset = offsetTimeFromServer();
if (offset < 0) {
// Stream hasn't started yet, show a message and prevent playback
alert('The live stream has not started yet. Please check back later.');
demoplayer.pause();
} else {
// Start at the correct offset time or fallback if out of range
demoplayer.currentTime(offset < demoplayer.duration() ? offset : 5);
}
});
</script>
Code language: HTML, XML (xml)You can find a full code example for a simulated live stream implementation on GitHub.
Now, when our users load the web page during the time of our stream, they’ll get a live streaming experience even though the video we configured has already been recorded.
You’ll notice that the video starts at the calculated time based on the scheduled stream time, and the player doesn’t include controls for rewinding and fast-forwarding. The Cloudinary Video Player also includes an indicator in the bottom bar that lets the user know that the video is live.
Using Cloudinary, you can easily create a live-streaming experience with pre-recorded videos, which are ideal for webinars, product launches, or marketing events. By leveraging Cloudinary’s Video Player, you can make prerecorded content appear live to your audience, offering the excitement of a live event with the control of preproduced material. Simply upload your video, configure the player, and you’re ready to stream as if it were live. Contact us today to learn more about how Cloudinary can help simplify your video workflows.
