Video and Audio Files in HTML

Imagine you're building a virtual museum of ancient Egypt. In addition to texts and images, you want to show visitors a documentary about the pyramids of Giza or play a reconstruction of ancient Egyptian music. HTML gives you these capabilities with the

<video>

and

<audio>

tags. Just as ancient Egyptians combined hieroglyphs with drawings on temple walls, you combine text, images, and multimedia on web pages.

The video Element

Video can be embedded on a web page using the

<video>

tag. The basic structure can look like this:

1<video controls width="500" height="300">
2  <source src="cosmos.mp4" type="video/mp4">
3  Your browser does not support the video element.
4</video>

• The controls attribute adds control elements, such as play and stop buttons.
• The width and height attributes allow you to define the video size.
• The <source> element specifies the path to the video file and its type.

Supporting Different Formats

Different browsers may support different audio and video file formats. You can add multiple <source> elements in different formats to ensure at least one of them is supported.

1<video controls>
2  <source src="cosmos.mp4" type="video/mp4">
3  <source src="cosmos.webm" type="video/webm">
4  Your browser does not support the video element.
5</video>

Embedding an Audio File

Similar to video, audio can be embedded on a web page using the

<audio>

tag.

1<audio controls>
2  <source src="space-sounds.mp3" type="audio/mpeg">
3  Your browser does not support the audio element.
4</audio>

• The controls attribute adds control elements, such as play and stop buttons.
• The <source> element specifies the path to the audio file and its type.

Additional Attributes

There are many additional attributes that can be added to the

<audio>

and

<video>

tags, such as

autoplay

,

loop

,

muted

, and others that allow for more precise control over playback.

1. autoplay

   : Allows automatic playback of audio or video when the page is loaded. While this can be useful in some cases, it's worth remembering that many users may find this annoying.

1<audio src="music.mp3" autoplay></audio>
2<video src="movie.mp4" autoplay></video>

2. loop

   : This attribute makes the multimedia play continuously, from beginning to end, endlessly.

1<audio src="music.mp3" loop></audio>
2<video src="movie.mp4" loop></video>

3. muted

   : This attribute mutes the audio or video file. It can be useful when you want the video to play in the background of the page but don't want it to disturb the user's experience.

1<video src="movie.mp4" muted></video>

4. controls

   : Adding this attribute displays the standard player control elements, such as play/pause buttons, progress bar, and volume.

1<audio src="music.mp3" controls></audio>

5. preload

   : This attribute allows the browser to load the audio or video file before the user clicks play. It can be set to "none" (don't load), "metadata" (load only metadata), or "auto" (load the entire file if possible).

1<video src="movie.mp4" preload="metadata"></video>

Embedding YouTube Videos

In practice, we most often embed videos from external services like YouTube. For this, we use the

<iframe>

tag:

1<iframe width="560" height="315"
2  src="https://www.youtube.com/embed/video_id"
3  title="Film about the pyramids of Giza"
4  frameborder="0"
5  allow="accelerometer; autoplay; clipboard-write; encrypted-media"
6  allowfullscreen>
7</iframe>

The

<iframe>

element allows embedding another page within your page. This is the standard way of embedding YouTube videos, Google Maps, and many other external services.

Summary

Multimedia is a powerful tool in the hands of a web developer. Remember a few rules:

• Always add fallback text - the browser will display it when multimedia fails to load
• Use the

  controls

  attribute - give the user control over playback
• Add multiple formats - different browsers support different formats
• Avoid

  autoplay

  with sound - it annoys users and is blocked by many browsers

Just as in ancient Egypt, music and stories accompanied every important event, multimedia enriches your web pages with a new dimension of experiences!