JSFiddle - React, Tailwind, and code Playground

by Kevin Mwangi

HTML

<link rel="stylesheet" href="https://vjs.zencdn.net/4.3/video-js.css">
<script src="https://vjs.zencdn.net/4.3/video.js"></script>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup='{"example_option":true}'>
  <source src="//vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
  <source src="//vjs.zencdn.net/v/oceans.webm" type='video/webm' />
  <source src="//vjs.zencdn.net/v/oceans.ogv" type='video/ogg' />
</video>

<div id="test">Test</div>
<div id="count">0</div>

CSS

#test {
  width: 40px;
  background: red;
  color: #000;
  padding: 5px;
  margin: 10px;
}

#count {
  background: #ccc;
  color: green;
  padding: 5px;
}

JavaScript

var myplayer;
var playCount = 0;
videojs("example_video_1").ready(function() {

  myplayer = this;

  // EXAMPLE: Start playing the video.
  //myplayer.play();

  myplayer.on("play", function() {
    playCount++;
    $("#count").text(playCount)

  });

});
$("#test").click(function() {
  myplayer.pause();
  myplayer.play();
});