HTML5 Video Events and API

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 Events

loadstart	4	progress	33	suspend	6	abort	3	error	0
emptied	3	stalled	1	loadedmetadata	2	loadeddata	2	canplay	2
canplaythrough	2	playing	0	waiting	2	seeking	0	seeked	0
ended	0	durationchange	2	timeupdate	2	play	2	pause	2
ratechange	6	resize	2	volumechange	0

Media Properties

error		src		srcObject
currentSrc	http://media.w3.org/2010/05/sintel/trailer.webm	crossOrigin		networkState	2
preload	none	buffered	[object TimeRanges]	readyState	4
seeking	false	currentTime	0	duration	52.663
paused	true	defaultPlaybackRate	1	playbackRate	1
played	[object TimeRanges]	seekable	[object TimeRanges]	ended	false
autoplay	false	loop	false	mediaGroup
controller		controls	true	volume	1
muted	false	defaultMuted	false	audioTracks
videoTracks		textTracks	[object TextTrackList]	width	0
height	0	videoWidth	640	videoHeight	272
poster	http://media.w3.org/2010/05/sintel/poster.png

MediaController Events

Not implemented

MediaController Properties

Not implemented

canPlayType

video/mp4	video/webm
"maybe"	"maybe"

Tracks

Audio	Video	Text
?	?	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;

plh@w3.org - November 2014
Many, many thanks to the Blender Foundation and the community around the blender
project.