Video and Audio

Before we start the chapter, it is recommended that you set up a local server so you can test it out on your own pc.

Video

For video tag, the simplest way to use it is by setting the src attribute on it.

<video src="/sample-guitar.mp4"></video>

There are a few attributes that you can set on video tags.

• controls
• width, height
• autoplay
• muted
• loop

<video src="/sample-guitar.mp4" autoplay muted width="400" height="200" loop controls></video>

Some browsers requires the muted attribute be set if autoplay is on to prevent websites from spamming videos.

You might see on other tutorials that you can use the source tag: <source />

With source tag, you can specify other videos to use in case the first one does not work.

<video autoplay muted width="400" height="200" loop controls>
  <source src="/sample-guitar.avi" /> <!-- this file does not exist -->
  <source src="/sample-guitar.mp4" /> <!-- this one will play -->
</video>

Audio

The audio tag works similarly. You can add controls, autoplay, muted and loop attributes on it.

<!-- there are no width or height attributes -->
<audio src="/sample-guitar.mp3" autoplay muted loop controls></audio>

You can also use the source tags to specify multiple sound files.

<audio autoplay muted loop controls>
  <source src="/sample-guitar.wav" />
  <source src="/sample-guitar.mp3" />
</audio>

Browser Support

There are many formats for video, audio and images, but not all formats are supported by all browsers.

Video: only mp4 and webm are widely supported.

Audio: mp3 and wav. Ogg is supported on most browsers (except safari).

Image: jpg, png, gif, svg, etc.

To check for browser support, you can visit caniuse.com.

Youtube Video

To embed a Youtube video, you cannot just copy the url and paste it into the src attribute because the url is pointing to a whole page, not just a single video file.

You need to use the iframe tag instead.

To get the iframe code, click on share > embed on the video page.