JSFiddle - React, Tailwind, and code Playground

by velthune

HTML

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

<video height="180" width="300" id="ourvideo" >
    <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"/>
    <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"/>
    <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"/>
 </video> 


<div id="footnote"></div>

CSS

#ourvideo2 {
margin-left: -304px;
}

JavaScript

$(document).ready(function() {
    console.log("miao");
    var popcorn = Popcorn( "#ourvideo" );     
   var popcorn2 = Popcorn( "#ourvideo2" ); 
    popcorn.footnote({
        start: 2,
        end: 10,
        target: "footnote",
        text: "Pop!"
    });
     popcorn.code( {
         start:0,
         end:2,
         onStart: function() {popcorn2.play();
         },
         onEnd: function() {
         $("#ourvideo2").css('display','none');
     }
     });
    popcorn.play();
});
console.log("asfff");