How to setup Video.js with Vue.js?

Video.js is a modern web video player which supports a lot of standard video playback formats along with the latest playback video formats. Video.js is very popular for creating video players and has large community support.

One of the greatest things about video.js is that it is very straightforward to import and use in your project. It also provides support for various popular frameworks like React.js, Vue.js, and Angular.js

In this tutorial, we’re going to have a look at how to set up video.js with the vue.js framework. We’ll also implement a basic example to create a video player using video.js and vue.js.

How to setup Video.js with Vue.js?

For using video.js in our project with vue.js framework, we first need to create a Vue component in our project and then we can use that component at various places in our project for creating video players.

Creating a vue.js component for video.js

In this section of the tutorial, we’re going to see how to create a Vue component named "VideoJS" and how to use it in our project. Then, we’ll import the "VideoJS" component and utilize it to create an mp4 video player.

<template>
   <div>
      <video ref="videoJsPlayer" class="video-js vjs-defaultskin"></ video>
   </div>
</template>
<script>
   // Importing video-js
   import videojs from 'video.js';
   export default {
      name: 'VideoJsPlayer',
      props: {
         options: {
            type: Object,
            default() {
               return {};
            }
         }
      },
      data() {
         return {
         player: null
      }
   },
   // initializing the video player
   // when the component is being mounted
   mounted() {
      this.player = videojs(this.$refs.videoPlayer, this.options,() => {
         this.player.log('video player ready', this);
      });
   },
   // destroying the video player
   // when the component is being destroyed
   beforeDestroy() {
      if (this.player) {
         this.player.dispose();
      }
   }
}
</script>

In the above example, we’ve created a vue.js component which return a <video> element with the class as ‘video-js vjs-default-skin’ and reference as "VideoJsPlayer". Inside the <script> tag, we first imported video.js library, and then we’re exporting a Vue.js component which has the name "VideoJsPlayer". The component will receive some of the video.js options objects as props.

Later, when the component is being mounted i.e. when the component is being created, we’re also initializing the video.js video player and logging the text "video player ready" in the console. Similarly, when the component is getting unmounted or destroyed, we’re also destroying the reference to the video.js video player.

Now since we’ve created a vue.js component for video.js named "VideoJsPlayer" which return a video player, let’s see how we can use this component in other parts of our project to create a video player.

Using the video.js component to create a video player in vue.js

First, we’ll import the "VideoJsPlayer" component into our new component. Then we need to create a new video player using the import and set some video options by passing them as props to the video player.

Consider the below code example to import the "VideoJsPlayer" that we’ve created in the earlier section and use it for creating a video.js mp4 player.

<template>
   <div>
      <video-js-player :options="videoOptions" />
   </div>
</template>
<script>
// Importing VideoJSPlayer component created in the previous step
import VideoJSPlayer from '@/components/VideoPlayer.vue';
export default {
   name: 'VideoJSExample',
   components: {
      VideoJsPlayer
   },
   data() {
      return {
      
         // setting the video options for the video player
         videoOptions: {
            autoplay: true,
            controls: true,
            preload: true,
            fluid: true,
            sources: [
               {
               src:
                  'https://www.tutorialspoint.com/videos/myVideo.mp4',
                  type: 'video/mp4'
               }
            ]
         }
      };
   }
};
</script>

In the above code example, we are importing the "VideoJsPlayer" component that we are created in the previous section of the article.

Later, we export the component as "VideoJSExample" which references the "VideoJsPlayer" Component, and then we set some standard video options for our video player like control, preload, autoplay, and fluid.

At the bottom of the video options, we have the sources array in which we pass all the video files with the path and their mime type. In our case, it’s an mp4 file so we’ve passed the path to the mp4 file with the type "video/mp4". Sources attribute is an array of objects so you can pass multiple video files.

Finally, we’re using the <video-js-player>inside the <template> tag with option passed as "VideoJsOptions" object.

So, when you execute the above code, you’ll notice that a video player is created in the web browser with options such as controls, preload, autoplay, and fluid set to true. Now, we can import the "VideoJsPlayer" component anywhere in our project and use it to create a video player for various videos.

Note − Replace the src path in the sources array with the path to your mp4 video files to make the code work properly.

Conclusion

In this tutorial, we’ve understood how to set up video.js with Vue.js by creating a component named "VideoJsPlayer". Later, we also had a look at how to import the created component to create an mp4 video player for our video file with the help of an example.