JSFiddle - React, Tailwind, and code Playground

by popcornjs

HTML

<script src="http://cdn.popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<video id="video" preload="auto" src="http://download.blender.org/peach/trailer/trailer_400p.ogg"></video>

CSS

#video {
    width: 600px;
    height: 200px;
}

JavaScript

var p = Popcorn( "#video" );

// play the video one canplay fires
p.on( "emptied", function() {
    console.log( "emptied fired!" );
});

// Once we hit 2 seconds, lets load a new source, this should cause the emptied event to fire
p.cue( 2, function() {
    p.media.src = "http://leanbackplayer.com/videos/360p/sintel_640x360_2.28.mp4";
});

p.play();