<div>
  <video id="my-video" class="video-js" width="320" height="180" controls preload="auto" data-setup='{}'>
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
</div>

<p id="video-status">The video is ready.</p>

<div class="button-container">
  <button onclick="play()">PLAY</button>
  <button onclick="pause()">PAUSE</button>
  <button onclick="setVolume()">VOLUME 0.5</button>
<div>
button {
  padding: 16px;
  margin-right: 16px;
}

.button-container {
  display: flex;
  flex-direction: row;
}

var player = videojs('my-video', {
    controls: true
});

const play = () => {
  player.play();
}

const pause = () => {
  player.pause();
}

const setVolume = ()=> {
  player.volume(0.5);
}


player.on('play', function() {
  document.getElementById('video-status').innerText = 'The video is playing.'
});

player.on('pause', function() {
    document.getElementById('video-status').innerText = 'The video is pausing.'
});

External CSS

  1. https://vjs.zencdn.net/8.5.2/video-js.css

External JavaScript

  1. https://vjs.zencdn.net/8.5.2/video.min.js