Events & order

Video tag browser compatibility test




<div>
<video controls width="624" height="260">
<source type="application/x-mpegurl" src="//edge.flowplayer.org/functional.m3u8">
<source type="video/webm" src="//edge.flowplayer.org/functional.webm">
<source type="video/mp4" src="//edge.flowplayer.org/functional.mp4">
</video>
</div>

HTML
var order = 0
, bean = flowplayer.bean
, videoTag = document.querySelector('video')
, log = document.querySelector('#log');
[
'canplay',
'canplaythrough',
'durationchange',
'emptied',
'ended',
'error',
'loadeddata',
'loadedmetadata',
'loadstart',
'pause',
'play',
'playing',
'progress',
'ratechange',
'seeked',
'seeking',
'stalled',
'suspend',
'timeupdate',
'volumechange',
'waiting'
].forEach(function(evName) {
bean.one(videoTag, evName, function() {
log.innerHTML = log.innerHTML += (++order) + ' - ' + evName + '\n';
});
});
$('#supp').text(JSON.stringify(flowplayer.support, null, ' '));
$('#ua').text(navigator.userAgent.toString());

JavaScript