EN

HTML・Images and media

Add video and audio

Let's put a video or sound with a play button onto your page. With the video and audio tags, your page gets motion and sound.

Once images have made your page lively to look at, it’s time for motion and sound. A video player or audio player with a play button can also be placed with a single HTML tag. What we use is <video> and <audio>. They’re named exactly for what they do, so they’re easy to remember.

Placing a video

You show a video with <video>. The important part is controls. Adding it makes a control panel appear, with play, pause, volume, and so on.

<video src="/movie.mp4" controls></video>
What you writeMeaning
<video>The video player part
src="..."Which video file to show (its location)
controlsThe mark that shows the control panel, like the play button

If you forget to write controls, the video is placed but no play button appears, leaving it in a “can’t-do-anything” state. To start with, just remember to write the two as a set.

This is <video controls> in action. You can see the control panel — the play button and the rest — lined up below the screen.

Placing a sound

Sound is <audio>. It’s used just like <video>.

<audio src="/sound.mp3" controls></audio>

This shows an audio player with a play button. Use it when you want to place BGM, a sound effect, narration, and so on. Here’s what it actually looks like.

This is <audio controls> in action. When you press play, a short “pop” sound plays. <video> gives you this same kind of player with a control panel, only for video.

Two words you’ll often add

Besides controls, there are two more worth keeping in mind.

<video src="/movie.mp4" controls autoplay muted></video>
What you writeMeaning
autoplayPlays automatically when the page opens
mutedStarts in a sound-off state
loopPlays over again once it reaches the end
You can see that playback starts automatically the instant the page opens (there’s no sound, because of muted). The point is that it plays without you clicking.

Summary of this lesson

  1. Video is <video>, sound is <audio>
  2. Adding controls makes it a player with a play button
  3. If you autoplay (autoplay), include muted (sound off) too

Try it

The “video and audio” (<video> / <audio>) you learned this time are not used on Shima’s page. They’re tools for pages with motion and sound, like a work showcase or a vlog. Keep them in mind and use them when you need them.

FAQ

What if I want a video to play in the background, without a play button?
Specify autoplay and muted together and remove controls, and the video plays as a background clip with no control panel. Note that autoplay without muted is blocked by many browsers.
What if I want a video or sound to play over and over?
Add loop, and once it reaches the end it automatically starts again from the beginning. You can combine it with controls and autoplay.
What if my video file won't play?
First check whether the file format is supported by the browser and whether the src path is correct. Using the mp4 format is a safe bet for playing in most browsers.