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" );

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

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