MediaEvents wraps around either a video or audio element to provide a consistent set of events to track a user's interaction.
var media = document.getElementById('video');
var timeTracker = new talis.media.MediaEvents(media, function(mediaEvent) {
console.info(JSON.stringify(mediaEvent));
});Each browser independitly implements the W3 specification for video and audio elements. Inevitably the
majority of the browsers trigger the media events in a different order, causing the user of the API to
compensate with complicated code. The specification also states that the timeupdate event should occur
once every 15 to 250ms, but in reality a struggling device will trigger a update event in 1 second intervals. Many seeking and pause events will also be recieved by the user's code which might not be expected (seeking/pause/playing user actions can cause seeking & pause events to be triggered, which is inconsistent across the different implementations).
The solution to this problem is to only track the timeupdate events and consistently report the events
back to the user. It is possible to accuratly track changes within media's timeline by comparing the
amount of real time that has past vs the amount of time that has past within the playback. A tolerance has
been added to ignore any seeking events that are less than a second as some of the browsers seek after a
change (pause, play, buffering, etc).
- segment - the media is split into multiple parts (starts at 0). Each part has a length defined by the interval
- interval - length of a segment in milliseconds (currently 10 seconds long)
- seek - event that is triggered when a user either clicks somewhere on the video timeline or clicks and drags
Clone this repository and open testVideo.html or testAudio.html in your browser. If you want to execute the tests open test.html. These tests can be executed on >=IE10, FF, Chrome, Safari (macosx), IOS, Android & Windows Mobile
{"start":0,"end":10000,"index":0,"desc":"segment completed","type":"segment","premature":false}
{"start":12485.648,"end":3977.1,"desc":"backward seek amount","type":"seek","difference":8686.547999999999}
{"start":10000,"end":12485.648,"index":10000,"desc":"backward seek","type":"segment","premature":true,"difference":8686.547999999999}
{"start":5289.361000000001,"end":17540.031,"desc":"forward seek amount","type":"seek","difference":11948.669999999998}
{"start":3977.1,"end":5289.361000000001,"index":0,"desc":"forward seek","type":"segment","premature":true,"difference":11948.669999999998}
{"start":17540.031,"end":19175.274,"index":10000,"desc":"pause","type":"segment","premature":true}
{"time":19175.274,"desc":"paused","type":"pause"}The user started to consume the media
{"type":"view"}Triggered when the user seeks across the timeline
- start: When the seeking started
- end: Where the seeking ended
{"start":3891.264,"end":9314.182999999999,"desc":"forward","type":"seek"}A segment of the media has been consumed
- start: Where the playback started within a index
- end: Where the playback ended within a index
- premature: If the tick finished at the end of a index or whether a seek/pause triggered the tick
{"start":0,"end":10000,"desc":"segment completed","type":"segment","premature":false}The segment was not totally consumed by the user. This is caused by pauses, seeks or the end of the stream.
{"start":20100,"end":28000,"desc":"segment completed","type":"segment","premature":true}The user paused the media
- time: When the pause event happened
{"time":1262.166,"type":"pause","desc":"paused"}