HTML5 Video Events and API

This page demonstrates the new HTML5 video element, its media API, and the media events. Play, pause, and seek in the entire video, change the volume, mute, change the playback rate (including going into negative values). See the effect on the video and on the underlying events and properties.

load() play() pause()
currentTime+=10 currentTime-=10 currentTime=50
playbackRate++ playbackRate-- playbackRate+=0.1 playbackRate-=0.1
volume+=0.1 volume-=0.1 muted=true muted=false
Sintel teaser Bunny trailer Bunny movie Test movie

Media Eventsloadstart4progress33suspend6abort3error0emptied3stalled1loadedmetadata2loadeddata2canplay2canplaythrough2playing0waiting2seeking0seeked0ended0durationchange2timeupdate2play2pause2ratechange6resize2volumechange0Media Propertieserror src srcObject currentSrchttp://media.w3.org/2010/05/sintel/trailer.webmcrossOrigin networkState2preloadnonebuffered[object TimeRanges]readyState4seekingfalsecurrentTime0duration52.663pausedtruedefaultPlaybackRate1playbackRate1played[object TimeRanges]seekable[object TimeRanges]endedfalseautoplayfalseloopfalsemediaGroup controller controlstruevolume1mutedfalsedefaultMutedfalseaudioTracks videoTracks textTracks[object TextTrackList]width0height0videoWidth640videoHeight272posterhttp://media.w3.org/2010/05/sintel/poster.pngMediaController EventsNot implementedMediaController PropertiesNot implementedcanPlayTypevideo/mp4video/webm"maybe""maybe"TracksAudioVideoText??0

Limitations

• Some events may be fired despite the lack of effect on the video itself, in particular while trying to change the playback rate;
• Not all conditions are necessarily there to generate every single possible event, such as stalled or emptied;
• The rendered page may not be updated while the video is playing. Thus you may see plenty of timeupdate events counted after the video is paused/stopped;

---

[e-mail] - November 2014

Many, many thanks to the Blender Foundation and the community around the blender project.