Popcorn.js Annotation of Video III

HTML

<script src="http://popcornjs.org/code/dist/popcorn.min.js"></script>
<div id="myvid"></div>
<div id="mydiv"></div>

CSS

div#myvid {float: left;}
div#mydiv {float: right;}

video {
    width: 480px;
    height: 360px;
}

#mydiv {
    width: 360px; 
    height: 360px; 
    border: 1px solid red; 
    padding: 10px;
}

JavaScript

// File:The Crab Nebula NASA.ogv
// http://en.wikipedia.org/wiki/File:The_Crab_Nebula_NASA.ogv
// http://upload.wikimedia.org/wikipedia/commons/b/b6/The_Crab_Nebula_NASA.ogv

// File:Hurricane Katrina (short film by NASA).ogv
// http://en.wikipedia.org/wiki/File:Hurricane_Katrina_(short_film_by_NASA).ogv
// http://upload.wikimedia.org/wikipedia/commons/a/a5/Hurricane_Katrina_(short_film_by_NASA).ogv

var mydiv= $("#mydiv");

var url1 = "http://videos.mozilla.org/serv/webmademovies/justintime.ogv";
var url2 = "http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv";

var clips = [
      { src: url1, 
        "in": 0,
        out: 10
      }, 
      { src: url2,
        "in": 0, 
        out: 5
      }
    ];

var $seq = Popcorn.sequence( "myvid", clips );

$seq.play();

/*
$seq.exec(0, function() {
    mydiv.html('<b>Now Playing First Video Segment</b>');
});

$seq.exec(10, function() {
    mydiv.html('<b>Now Playing Second Video Segment</b>');
});
*/