HTML5 MULTIMEDIA SUPPORT

VIDEO FORMATS

POPULAR FORMATS

Ogg/Theora (.ogv)

WebM/VP8 (.webm)

MPEG-4/H.264 (.mp4)

IMPLEMENTING THE <VIDEO> ELEMENT

<video width="320" height="240" controls="controls"><source src="movie.mp4" />

You need a browser that supports HTML5!

</video>

SETTING THE SOURCE

<video controls="controls" height="480"><source src="eagle.webm" type='video/webm; codecs="vorbis, vp8"' />

<source src="eagle.ogv" type='video/ogg; codecs="theora, vorbis"' />

<source src="eagle.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

</video>

CONFIGURING THE <VIDEO> ELEMENT

autoplay

controls

height

loop

muted

poster

preload

src

width

ACCESSING TRACKS

The W3C has developed a new standard, called WebVTT(Web Video Text Tracks).

WebVTT file format is simple and easily readable by browsers and developers.

Based on a popular subtitling format called SubRip Text (SRT).

USING WEBVTT FORMAT

WEBVTT FILE

00:00:07.500 --> 00:00:08.750

He's fidgety.

00:00:09.000 --> 00:00:12.000

There he goes!!!

PLAYING AUDIO

AUDIO FORMATS

Ogg/Vorbis (.oga, .ogg)

MP3 (.mp3)

MP4 (.mp4, .mp4a, .aac)

WAV (.wav)

THE <AUDIO> ELEMENT

<audio controls="controls"><source src="song.mp3" />

You need a browser that supports HTML5!

</audio>

SETTING THE SOURCE

<audio id="audio" controls="controls"><source src="media/kittycat.oga" type='audio/ogg; codecs="vorbis"' />

<source src="media/kittycat.wav" type='audio/wav; codecs="1"' />

<source src="media/kittycat.mp3" type='audio/mpeg; codecs="mp3"' />

</audio>

CONFIGURING THE <AUDIO> ELEMENT

autoplay

controls

loop

preload

src