JSFiddle - React, Tailwind, and code Playground

by adamtsiopani

HTML

<div id = "showdiv" style="display:none" align="center">
        Here is some content triggered 3 seconds into the video
    <button class="play">Resume video</button>
</div>

<div id = "showdiv2" style="display:none" align="center">
        Here is some content triggered 8 seconds into the video
</div>

<video id='myVideo' align="center" margin-top="100px" class='video-js 
       vjs-default-skin' preload='auto' data-setup='{}' width='400' height='300' controls="controls">
<source src='http://www.auby.no/files/video_tests/h264_720p_hp_5.1_6mbps_ac3_planet.mp4' type='video/mp4'></source>
</video>

JavaScript

function popupWithPause() {
    $('#myVideo').get(0).pause();
    $("#showdiv").toggle("slow");
}

function popupWithoutPause() {
    $("#showdiv2").toggle("slow");
}

var runAtTime = function(handler, time) {
     var wrapped = function() {
         if(this.currentTime >= time) {
             $(this).off('timeupdate', wrapped);
             return handler.apply(this, arguments);
        }
     }
    return wrapped;
};

$('#myVideo').on('timeupdate', runAtTime(popupWithPause, 3)); 
$('#myVideo').on('timeupdate', runAtTime(popupWithoutPause, 8)); 
$('.play').on('click', function() {
  $('#myVideo').get(0).play();
  $(this).closest('div').toggle('slow');
});