Vue.js provides a reactive framework for building user interfaces, while Video.js offers a configurable video playback library supporting various formats and streaming protocols. Integrating Video.js into Vue components involves managing player lifecycle, handling events, and customizing controls through Video.js APIs.

This setup enables control over video playback behavior and interface within the Vue component structure, allowing for modular and maintainable video player implementations.

Setting Up Video.js with Vue.js

Before diving into custom controls and plugins, it"s essential to set up Video.js within a Vue.js component. Video.js is a flexible and extendable library for HTML5 video players, supporting multiple video formats and streaming protocols.

Example: Basic Setup of Video.js in Vue Component

code
<template><div><video ref="videoPlayer" class="video-js vjs-default-skin" controls><source src="video.mp4" type="video/mp4">Your browser does not support the video tag.</video></div></template><script>import videojs from 'video.js';import 'video.js/dist/video-js.css';export default {mounted() {this.player = videojs(this.$refs.videoPlayer);},beforeDestroy() {if (this.player) {this.player.dispose();}}};</script>

Explanation:

  • Video Element: The <video> element is bound to videoPlayer using ref, allowing direct access to the DOM element.
  • Vue Lifecycle Methods: mounted() initializes the Video.js player, and beforeDestroy() ensures proper cleanup of the player instance to avoid memory leaks.
  • Video Source: The video source is passed via the <source> tag, which can be replaced with dynamic data depending on your needs.
Cincopa API for Javascript

Creating Custom Video Controls in Vue.js

One of the advantages of using Video.js with Vue.js is the ability to easily customize the player"s controls. Custom controls can be added or modified by interacting with Video.js API methods and binding them to Vue components.

Example: Custom Play/Pause Button

code
<template><div><video ref="videoPlayer" class="video-js vjs-default-skin" controls><source src="video.mp4" type="video/mp4"></video><button @click="togglePlayPause">{{ isPlaying ? 'Pause' : 'Play' }}</button></div></template><script>import videojs from 'video.js';import 'video.js/dist/video-js.css';export default {data() {return {player: null,isPlaying: false,};},mounted() {this.player = videojs(this.$refs.videoPlayer);this.player.on('play', () => { this.isPlaying = true; });this.player.on('pause', () => { this.isPlaying = false; });},methods: {togglePlayPause() {if (this.isPlaying) {this.player.pause();} else {this.player.play();}}},beforeDestroy() {if (this.player) {this.player.dispose();}}};</script>

Explanation:

  • Custom Play/Pause Button: A button is created that toggles the video between play and pause. It listens for the play and pause events from Video.js and updates the button text accordingly.
  • Reactive State: The isPlaying variable tracks the player's state, ensuring the button text reflects whether the video is playing or paused.

Using Video.js Plugins in Vue.js

Video.js supports a variety of plugins that can add additional features like subtitles, ads, or analytics. In a Vue.js environment, plugins can be integrated and configured within the component lifecycle methods.

Example: Using the Video.js videojs-contrib-ads Plugin

code
<template><div><video ref="videoPlayer" class="video-js vjs-default-skin" controls><source src="video.mp4" type="video/mp4"></video></div></template><script>import videojs from 'video.js';import 'video.js/dist/video-js.css';import 'video.js-contrib-ads'; // Importing Video.js ads plugin export default {mounted() { this.player = videojs(this.$refs.videoPlayer);this.player.ads(); // Enable ads plugin this.player.on('adstart', () => {console.log('Ad started');});this.player.on('adend', () => {console.log('Ad ended');});},beforeDestroy() {if (this.player) {this.player.dispose();}}};</script>

Explanation:

  • Plugin Integration: The videojs-contrib-ads plugin is imported and initialized with the player. The plugin enables ad playback within the video player.
  • Event Listeners: Events like adstart and adend are tracked to log when ads begin and end, respectively.

Advanced Customization: Adding Subtitles and Custom Tracks

Customizing subtitle tracks and other metadata is a common feature required in many video applications. Video.js supports the addition of subtitles via <track> elements, and Vue.js allows dynamic control over these elements.

Example: Dynamically Adding Subtitles with Vue.js

code
<template><div><video ref="videoPlayer" class="video-js vjs-default-skin" controls><source src="video.mp4" type="video/mp4"><track ref="subtitleTrack" kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English"></video><button @click="changeSubtitle">Toggle Subtitles</button></div></template><script>import videojs from 'video.js';import 'video.js/dist/video-js.css';export default {data() {return {player: null,subtitleTrack: null,};},mounted() {this.player = videojs(this.$refs.videoPlayer);this.subtitleTrack = this.$refs.subtitleTrack;},methods: {changeSubtitle() {const track = this.subtitleTrack;if (track.track.mode === 'showing') {track.track.mode = 'disabled';} else {track.track.mode = 'showing';}}},beforeDestroy() {if (this.player) {this.player.dispose();}}};</script>

Explanation:

  • Subtitles Handling: A button allows toggling subtitles on or off by changing the mode of the subtitle track. The track is dynamically referenced via Vue"s ref system.
  • Dynamic Changes: The method changeSubtitle checks the current track mode and switches it accordingly.