JSFiddle - React, Tailwind, and code Playground

by Kishore Polsani

HTML

<div style="display: block; position: relative; max-width: 760px;">
	<div style="display: block; padding-top: 56.5789473684211%;">
        <video id="html5PlayerID"  
			data-account="3262544219001" data-player="f9f89423-7975-4ba7-b926-811a4b2a543c" 
			data-embed="default" class="video-js" controls=""  data-video-id="4264775321001"
			data-setup='{"techOrder": ["html5", "hls", "flash"]}'
			style="width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px;"></video>
    </div>
</div> 
<script src="//players.brightcove.net/3262544219001/f9f89423-7975-4ba7-b926-811a4b2a543c_default/index.min.js"></script>
<!--<ol class="vjs-playlist"></ol> -->

JavaScript

videojs("html5PlayerID").ready(function(){

	 var player,videoID,videoName,timeViewed,videoDuration;


        loadData();
        function loadData(){
 			 player = videojs('html5PlayerID');
           	 videoID = "<%=videoID%>";
             videoName = "Video name";
           	 videoDuration = player.duration();

        }

		    // add player event listeners
		   player.on("loadstart", function (evt) {
               //console.log("loadstart - Player is loaded");

              logEvent("loadstart",player.currentTime(),videoDuration);
		   });
		   // add listener for loadedalldata
		   player.on("loadedalldata", function () {
               //console.log("loadedalldata event fired");

               logEvent("loadedalldata",player.currentTime(),videoDuration);
		   });
		   // add listener for video ended
            player.on("ended", function () {
                //console.log("video ended event fired");
                logEvent("ended",player.currentTime(),videoDuration);
                // player.ended();
			});
       	 	player.on("pause", function () {
                //console.log("video paused event fired");
                // player.pause();
                logEvent("paused",player.currentTime(),videoDuration);
			});	
     	   player.on("seeked", function () {
               //console.log("video seeked event fired"+player.currentTime());
                 logEvent("seeked",player.currentTime(),videoDuration);
				 player.play();

                 });
        //To track the buffer progress
        	player.on("progress", function () {
                //console.log("video progress event fired"+player.currentTime());
                 });	
        //To track the video playing progress
       		 player.on("timeupdate", function () {


                 //var howMuchIsDownloaded = player.bufferedPercent();
                 //console.log("video timeupdate event fired"+player.currentTime() + "-------"+howMuchIsDownloaded);

                ...