Videojs – Play and Pause multiple videos example

How to play only 1 video and pause all the others?

Vue js:

This is where you put your video players.

The “:poster” will just be the image you receive from your axios request. It helps load faster the players(by not loading the actual video).

:ref="'video_' +"
class="video-js vjs-big-play-centered"
data-setup='{"controls": true, "autoplay": false, "preload": "auto"}'
<source :src="data.video_files[1].link" type="video/mp4" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="" target="_blank">supports HTML5 video</a>

Add this just above your export default vue component:

import videojs from 'video.js';
import 'video.js/dist/video-js.css';

export default {


Now the magic, no idea if you have noticed but we created a dynamic :ref in the video player itself by doing this:

:ref="'video_' +"

The will simply be the id of your video(from the axios request).

All we have to do now is create a button with a PLAY method:

 <button @click="play('video_' +"></button>

When the user clicks on the button, the play() method will be called as:

play(id) {
const keys = Object.keys(this.response.videos);
var self = this;
keys.forEach((key, index) => {
let videoToPause = 'video_' + self.response.videos[index].id
if ('video_' + self.response.videos[index].id === id) {
} else {


Why do I use var self = this; ?

The reason is because the foreach loop will happen inside the scope of  videojs(this.$refs[id][0].playerId).ready(function(){ and in order for me to call my methods outside this scope is to use var self = this; and start calling my response data with “self” rather than “this”.

Using video js can really be challenging and this is why I decided to create this short tutorial that shows you how to pause multiple videos when you play another one anywhere on your page.


Kollox Team