Audio and video
Video on a website used to require third-party plugins. Today the browser plays sound and video on its own: the <video> and <audio> tags are enough. In the examples a path like /media/flower.webm points to a clip stored on this site; on your own page, give the path to your own file.
Video
The <video> tag shows a video file whose address goes into src. The controls attribute adds a control panel — a play button, volume and a progress bar:
<video src="/media/flower.webm" controls width="320"></video>Without controls the video stays on its first frame, and there is nothing to start it with. width sets the width, and the height follows the clip's proportions.
Playback settings
| Attribute | What it does |
|---|---|
controls | Shows the control panel |
autoplay | Starts the video as soon as it loads |
muted | Turns the sound off |
loop | Repeats the clip over and over |
poster | An image shown before playback starts |
playsinline | On a phone, plays inside the page instead of full screen |
<video src="/media/flower.webm"
autoplay muted loop playsinline width="320"></video>Such a silent looping clip is often used as a background on the first screen of a site.
Several formats
Not every browser understands every video format. Instead of src, you put several <source> tags inside <video> — the browser takes the first one it can play:
<video controls width="320">
<source src="/media/flower.webm" type="video/webm">
<source src="/media/flower.mp4" type="video/mp4">
Your browser cannot play video.
</video>The type attribute tells the format in advance so the browser does not download anything extra. The text at the end is shown only in very old browsers.
Audio
<audio> works like <video>, just without a picture. Without controls the player is not visible at all:
<audio src="/media/t-rex-roar.mp3" controls></audio>MP3, AAC and Ogg suit sound; every browser understands MP3.
Subtitles
The <track> tag adds subtitles — a text file in the WebVTT format with lines and the times to show them:
<video controls width="320">
<source src="/media/flower.mp4" type="video/mp4">
<track src="flower-en.vtt" kind="subtitles" srclang="en" label="English">
</video>This example has no subtitle file, but this is how they are added. Subtitles help people with hearing loss and those watching without sound, on public transport for example.
Common mistake
The autoplay attribute without muted usually does not work: browsers forbid sites from turning on sound by themselves until the user has pressed something. The video simply will not start. If a clip must start on its own, make it silent — autoplay muted — and keep controls so the sound can be turned on.