How to Setup VideoJS with VueJS?

Video.js is a popular javascript library that allows support for various video playback formats on the web. With it, we can embed and customize our video components in our web pages that are made in various frontend frameworks like, Vue.js, React, Angular, etc. In this article, we will learn how to setup video.js with Vue.js frontend framework.

Steps to Setup Video.js with VueJS

Step 1: In this step, we will create a vue app with the below commands. We will then use this app to use video.js library.

vue create video-js

Step 2: Now, install the video.js library as well with the below command:

pnpm install video.js

This will create a sample Vue application with the below project structure.

Project structure:

Step 3: Creating a Video.vue component.

In this step, we will create a Video.vue component file inside the "src" directory, and use the video.js library to setup a customizable video playback in our component. We will create a videoOptions data variable that holds all the config that is required by the video-js library to play the video. And when the component gets mounted, we will initialize the player with the config and the source. and we will use the Video.vue component in our App.vue file, so it is visible in our web page when we run the server. We will import the Video component that we created above, and use that inside the template.

Example: This example shows the use of video.js

<template>
  <div>
    <video ref="videoJsPlayer" 
           class="video-js vjs-defaultskin"></video>
  </div>
</template>
 <script>
import videojs from "video.js";

export default {
  name: "VideoJsPlayer",
  data() {
    return {
      player: null,
      videoOptions: {
        autoplay: true,
        controls: true,
        preload: true,
        fluid: true,
        sources: [
          {
            src: 
"https://media.geeksforgeeks.org/wp-content/uploads/20240514215354/Untitled-design-(8).mp4",
            type: "video/mp4",
          },
        ],
      },
    };
  },
  mounted() {
    this.player = videojs(
      this.$refs.videoJsPlayer,
      {
        ...this.videoOptions,
        innerHeight: 360,
        innerWidth: 640,
      },
      () => {
        this.player.log("video player ready", this);
      }
    );
  },
  beforeUnmount() {
    if (this.player) {
      this.player.dispose();
    }
  },
};
</script>
 
 <style scoped>
video {
  width: 400px;
}
</style>

<-- Ap.vue-->
<template>
  <Video />
</template>

<script>
import Video from './Video.vue'

export default {
  name: 'App',
  components: {
    Video
  }
}
</script>

Step 4: Run the server

Now, we will run our web application by running the below command:

 pnpm serve

Output: