JSFiddle - React, Tailwind, and code Playground

by crazzzy

HTML

<link rel="stylesheet" href="//vjs.zencdn.net/6.2.4/video-js.css">
<script src="//vjs.zencdn.net/6.2.4/video.js"></script>
<video id="my-video" class="video-js" controls preload="auto" width="320" height="240">
  <source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
</video>

JavaScript

jQuery().ready(function($) {
  var player = videojs('my-video', {autoplay: true});
  player.on('timeupdate', function() {

      var currentTime = Math.round(this.currentTime());
      var duration = Math.round(this.duration());

      var percent = Math.round(currentTime / duration * 100);
      
      var next_percent = $(this).data('next-percent');
      if (!next_percent) {
      	next_percent = 0;
      }

      if (percent >= next_percent) {
        postVideoStatus(next_percent);
        next_percent += 25;
        $(this).data('next-percent', next_percent);
      }

    });
});


function postVideoStatus(pos) {
	console.log(pos);
}