JSFiddle - React, Tailwind, and code Playground

by popcornjs

HTML

<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<video height="180" width="300" id="video" controls> 
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>

JavaScript

// create our popcorn instance
var popcorn = Popcorn( "#video" );

// listen to timeupdate
popcorn.listen( "timeupdate", function( event ) {
  if ( popcorn.roundTime() % 2 ) {
    popcorn.controls( false );   
  } else {
    popcorn.controls ( true );
  }
});

// click play to begin! ( keep mouse over video to see the expected functionality )