Video events

by Soviut

HTML

<video controls class="player">
</video>
<hr/>
<button class="addsource">Add Source</button>

JavaScript

var player = document.querySelector('.player');

var events = [
    'abort',
    'canplay',
    'canplaythrough',
    'durationchange',
    'emptied',
    'encrypted',
    'ended',
    'error',
    'interruptbegin',
    'interruptend',
    'loadeddata',
    'loadedmetadata',
    'loadstart',
    'mozaudioavailable',
    'pause',
    'play',
    'playing',
    'progress',
    'ratechange',
    'seeked',
    'seeking',
    'stalled',
    'suspend',
    'timeupdate',
    'volumechange',
    'waiting'
];

for (var i = 0; i < events.length; i++) {
    var event = events[i];
    
    player.addEventListener(event, function(e) {
        console.log(e.type);
    });
}

var addSourceButton = document.querySelector('.addsource');
addSourceButton.addEventListener('click', function(e) {
    var source = document.createElement('source');
    source.setAttribute('src', 'http://v2v.cc/~j/theora_testsuite/320x240.ogg');
    source.setAttribute('type', 'video/ogg');
	player.appendChild(source);
});