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"></video>

CSS

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

JavaScript

var p = Popcorn( "#video" ),
    fired = false;

// play the video one canplay fires
p.on( "durationchange", function() {
    console.log( "durationchange fired!" );
    console.log( "The current duration is: " + this.duration() );
    if ( !fired ) {
        p.media.src = "http://leanbackplayer.com/videos/360p/sintel_640x360_2.28.mp4";
        fired = true;
    }
});

// set the source after we've set up our listener to be sure it gets fired
p.media.src = "http://download.blender.org/peach/trailer/trailer_400p.ogg";