JSFiddle - React, Tailwind, and code Playground

by Ea Bangalore

HTML

<!--<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
  data-setup='{ "playbackRates": [0.5, 1, 1.5, 2] }'>
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
    <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'>
  </video> -->


<video class="vdo" width="700" id="videoShow" style="margin-bottom: 4px;" ng-src="http://vjs.zencdn.net/v/oceans.webm" >
</video>
<div id="master" style="width:700;height:8px;"></div>
<span id="changeTOpause"  class="glyphicon glyphicon-play" aria-hidden="true" onclick="playVideo()"></span>

JavaScript

/*     videojs('my_video_1', {
        plugins: {
          loopbutton: true 
        }
      }, function () {
        // Player (this) is initialized and ready.
      }); */


function playVideo()
    {
        videoShow.play();
    }

    $('#videoShow').on({
        canplaythrough: function() {
            var video = this;
            $('#master').slider({
                range: "max",
                min: 0,
                max: parseInt(video.duration, 10),
                value: 0,
                slide: function (event, ui) {
                    video.currentTime = ui.value;
                }
            });
        },
        timeupdate: function() {
            $('#master').slider('value', this.currentTime)
        }
    });