Many events nowadays such as product launches occur online nowadays. You want to give your attendees a live-event feeling however to make the most of the time, you want to pre-edit the video as well. Let us learn how we can simulate live streaming pre-recorded content to achieve this.

The completed project is available on Codesandbox.

You can find the full codebase on my Github

We will be using the NuxtJS framework for this project. This is a performant Vue.Js framework built on HTML, CSS and JavaScript. Thus knowledge of HTML, CSS, and JavaScript is a requirement. Vue.Js experience is not a requirement.

To simulate a live stream, we will be using Cloudinary as our platform of choice. This is because it provides us with media storage and the video player we will be using for video delivery. If you do not have an account, feel free to create one here.

We are going to store the video we will stream in our account. Proceed to your Media Library. Create a folder called nuxtjs-simulated-live-streaming and store this video.

You should now have a folder similar to this one.

Also, proceed to the Dashboard to get your cloud name.

Before we install the Cloudinary video player, let us set up our cloud name as an environmental variable. These are values we want to store outside of our codebase. Create a file called .env and store your cloud name.

<!-- .env -->
NUXT_ENV_CLOUDINARY_CLOUD_NAME=<your-cloudinary-cloud-name>
Code language: HTML, XML (xml)

To install the video player, we simply need to add the CDN-hosted compiled files to the scripts and css sections of the nuxt.config.js file.

// nuxt.config.js
export default {
    ...
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://unpkg.com/cloudinary-video-player@1.5.3/dist/cld-video-player.min.css' },
    ],
    script: [
      { src: 'https://unpkg.com/cloudinary-core@latest/cloudinary-core-shrinkwrap.min.js' },
      { src: 'https://unpkg.com/cloudinary-video-player@1.5.9/dist/cld-video-player.min.js' },
    ],
  },

  ...
}
Code language: JavaScript (javascript)

The above code will ensure that the necessary files are loaded. Now let us set up our video player to play our specific video. Let’s add some basic HTML.

<!-- pages/index.vue -->
<template>
  <div>
    <h1 class="m-5 text-gray-800 text-lg font-bold text-center">
      Simulated live streaming
    </h1>
    <video
      id="video-player"
      controls
      muted
      class="cld-video-player cld-fluid vjs-live cld-video-player-skin-dark w-2/3 h-96 mx-auto" 
    />
    <p class="m-5 text-gray-800 text-sm text-center">
      Video by Taryn Elliott from Pexels
    </p>
  </div>
</template>
Code language: HTML, XML (xml)

We can not initialize our Cloudinary instance, the video, and configure the video source.

// pages/index.vue
<script>
export default {
  data(){
    return {
      cld:null,
      video:'nuxtjs-simulated-live-streaming/video'
    };
  },

  mounted(){
    this.cld = cloudinary.Cloudinary.new({ 
        cloud_name: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME 
    });
    
    let demoplayer = this.cld.videoPlayer(
        'video-player',
        {
          autoplay:true,
          loop: true
        }
      )
      .width(600);

    demoplayer.source(this.video);

  },
  
}
</script>
Code language: HTML, XML (xml)

With the above code, our video should now be playing smoothly.

To simulate a live stream, we need to hide the progress control so that the user cannot manually navigate on their own. We can do this by using some simple CSS.

/* pages/index.vue */
<style>
body {
  font-family: sans-serif;
}
.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)

The above delivers a live visual experience. Now we want our audience to watch the same video segment at the same time. To do this, we are going to seek the video to a calculated point each time the video is played. This is by adding an event listener to the play event. We also want to display the live text indicating that the video is being played in real-time.

// pages/index.vue
<script>
export default {
  ...
  mounted(){
    ....
    demoplayer.on("play", function () {
      liveControls[0].classList.remove("vjs-hidden");
      
      demoplayer.currentTime(
        parseInt(
            (new Date).getSeconds() % demoplayer.duration()
            )
      ); 
    });
  },
  
}
</script>
Code language: HTML, XML (xml)

The above code sets the current time of the video to a value less than the video duration depending on the current time. Thus different video players will automatically seek the same duration.

For a production use case, the above value should probably be computed from a universal server environment.

With the above, we are now simulating a video live stream.

This project teaches us how to utilize the Cloudinary video player to simulate our live stream by accessing the underlying HTML. To learn more about the video player, feel free to review the API. Also, feel free to review this documentation on simulating live streaming.