Popcorn frameAnimation constructor

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>

<div id="my-footnote-default-id"></div>

CSS

html{font-family:arial;}

#my-footnote-default-id {
 width: 300px;   
}

JavaScript

(function( Popcorn ) {
    // Demo plugin    
    Popcorn.plugin( "framey", {
        
        start: function() {}, 
        end: function() {},
        
        frame: function() {
           document.getElementById("my-footnote-default-id").innerHTML = new Date();
        } 
    });
})( Popcorn );


var p = Popcorn("#video", {
          // Set the "frameAnimation" property to true
          // This will opt you into playback managed 
          // by a requestAnimationFrame loop
          frameAnimation: true
        });

p.framey({
  start: 1,
  end: 6
}).play();