HOME HTML CSS XML JAVASCRIPT ASP PHP SQL MORE...

HTML5 Tutorial

HTML5 Home
HTML5 Introduction
HTML5 New Elements
HTML5 Video
HTML5 Video/DOM
HTML5 Audio
HTML5 Drag and Drop
HTML5 Canvas
HTML5 SVG
HTML5 Canvas vs. SVG
HTML5 Geolocation
HTML5 Web Storage
HTML5 App Cache
HTML5 Web Workers
HTML5 SSE

HTML5 Forms

HTML5 Input Types
HTML5 Form Elements
HTML5 Form Attributes

HTML5 Reference

HTML5 Tags
HTML5 Attributes
HTML5 Events
HTML5 Audio/Video
HTML5 Canvas 2d
HTML Valid DTDs

HTML5 Video + DOM

« Previous

Next Chapter »

HTML5 <video> - Take Control Using the DOM

The HTML5 <video> element also has methods, properties, and events.

There are methods for playing, pausing, and loading, for example. There are properties (e.g. duration, volume, seeking) that you can read or set. There are also DOM events that can notify you, for example, when the <video> element begins to play, is paused, is ended, etc.

The examples below illustrate, in a simple way, how to address a <video> element, read and set properties, and call methods.

Example 1

Create simple play/pause + resize controls for a video:

Video courtesy of Big Buck Bunny.

The example above calls two methods: play() and pause(). It also uses two properties: paused and width.

Try it yourself »

HTML5 <video> - Methods, Properties, and Events

The table below lists the video methods, properties, and events supported by most browsers:

Methods	Properties	Events
play()	currentSrc	play
pause()	currentTime	pause
load()	videoWidth	progress
canPlayType	videoHeight	error
	duration	timeupdate
	ended	ended
	error	abort
	paused	empty
	muted	emptied
	seeking	waiting
	volume	loadedmetadata
	height
	width

Note: Of the video properties, only videoWidth and videoHeight are immediately available. The other properties are available after the video's meta data has loaded.