The Media Elements

To play either audio or video files, you need to use the audio or video element, respectively. They are similar, sharing the same attributes and child elements, with the type of media they deliver being the key difference. At their most simple, each element requires only a single attribute, src, which is the path to the media file to be played:

<audio src="foo.oga"></audio>
<video src="foo.ogv"></video>

What you see depends on the element: with video, you see the video file at its natural dimensions with the first frame showing; with audio, you see nothing. In either case, you can’t play the file because there are no on-screen controls. You add them using the controls attribute:

<audio src="foo.oga" controls></audio> <video ...

Get The Modern Web now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.