Video Sequencing

Reference: http://klasconia.wordpress.com/2010/10/19/html5-video-sequencing-the-timeupdate-even/ http://matrix.senecac.on.ca/~kclascon/DPS909/d3/videoSrcNew.html

HTML

<video controls="false" width="600" height="360" id="player" src=" type="video/ogg"></video>

JavaScript

var chapters = [];
var curr = -1;
var currChap;

// Times are in seconds

function Bookmark(src, title, startTime, endTime) {
    this.title = title;
    this.src = src;

    if (startTime < endTime) {
        this.startTime = startTime;
        this.endTime = endTime;
    } else {
        this.endTime = startTime;
        this.startTime = endTime;
    }
}

Bookmark.prototype.title = "";
Bookmark.prototype.src = "";
Bookmark.prototype.startTime = 0;
Bookmark.prototype.endTime = 0;
Bookmark.prototype.toString = function() {
    return "Source: " + this.src + "\nTitle: " + this.title + "\nStart Time: " + this.startTime + "\nEnd Time: " + this.endTime;

};

Bookmark.prototype.toJSON = function() {
    return '{ "src": "' + this.src + '", "title": "' + this.title + '", "startTime": ' + this.startTime + ', "endTime": ' + this.endTime + ' }';
};

Bookmark.prototype.fromJSON = function(str) {
    var obj = jsonParse(str);
    return new Bookmark(obj.src, obj.title, obj.startTime, obj.endTime);
};

function advanceVideo() {
    curr = (curr + 1) % chapters.length;
    currChap = chapters[curr];
    var vid = document.getElementById('player');
    vid.addEventListener('loadedmetadata', function() {
        vid.currentTime = currChap.startTime;
    }, true);

    vid.addEventListener('canplay', function() {
        vid.play();
    }, true);

    vid.addEventListener('timeupdate', function() {
        if (vid.currentTime >= currChap.endTime) {
            advanceVideo();
        }
    }, true);

    vid.src = currChap.src;
    vid.load();
}

var url1 = "http://flash.bc.edu/ides/okeefew/ai.mp4";
var url2 = "http://flash.bc.edu/ides/okeefew/ai.mp4";
//var url2 = "http://upload.wikimedia.org/wikipedia/commons/4/4e/BlackHole1_HD_LARGE_QT_Video_1.mp4.ifps30fr30.vbr600maxsize640.ogv";

function init() {
    chapters.push(new Bookmark(url1, 'Bill OKeefe', 10, 15));
    //chapters.push(new Bookmark(url2, 'Hurricane Katrina', 10, 15));
   ...