Multimedia

Introduction

In this lesson, we will explore various HTML multimedia elements and how to use them. Multimedia elements are essential for enhancing the user experience by embedding rich media, such as videos and audio, directly into web pages. Prior to HTML5, the only way to embed multimedia was to use third-party plugins, such as Adobe Flash. HTML5 provides a safe and standard way to embed multimedia content on web pages.

Source

The <source> element is used to define specific media files for an <audio> or <video> elements. Unlike image files such as jpg or png, different browsers and operating systems support different audio or video media formats. The <source> element allows you to specify multiple copies of the same media file for the browser to choose from. The browser will select the first file that it supports.

Let’s take a look at an example audio source element:

html

	<source src="audio.mp3" type="audio/mp3">

The src attribute specifies the URL of the media file, this may be a local file in your project or an absolute link to a hosted media file. For example:

html

	<source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">

The type attribute specifies the media type of the file. This is what the browser uses to check if it supports the file before attempting to play it.

Source elements do not stand alone, in the next sections we will learn how to implement them in the context of an <audio> or <video> element.

Audio

The <audio> element is used to embed audio content on a web page. This can be useful for including narration or text-to-speech content as an additional accessibility feature.

The audio element has the following key attributes:

autoplay - Specifies whether the audio will
controls - Specifies whether audio controls will be displayed to the user
loop - Specifies whether the audio start over again at the end of the file
muted - Specifies whether the audio element should be muted when the page loads

There are more attributes that may be useful in more advanced use cases, you can read about them all in the MDN docs.

Let’s take a look at an example for a blog post narration:

html

	<audio controls id="narrator">
	  <source src="example-blog-post.mp3" type="audio/mp3">
	  <source src="example-blog-post.ogg" type="audio/ogg">
	  Your browser does not support HTML audio narration.
	</audio>

This audio element provides two source elements, one for an mp3 file and one for an ogg file. The browser will select the first file that it supports. If the browser does not support either of these files, the text “Your browser does not support the audio element.” will be displayed.

Due to the controls attribute, the browser will display audio controls to the user. This configuration makes sense for a narration, as the user may prefer to read the text instead - and once they start the audio, they should have control over playing or pausing.

Using another example, we can explore another configuration. In order to add background music to a web page, we may want to use the autoplay and loop attributes. This will ensure that the music starts playing as soon as the page loads and will continue to loop until the user leaves the page.

html

	<audio autoplay loop id="background-music">
	  <source src="background-music.mp3" type="audio/mp3">
	  <source src="background-music.ogg" type="audio/ogg">
	</audio>

In this case we do not need to show controls, as the user does not need to interact with the audio element. We also do not need to display a message if the browser does not support the audio element, as this is not crucial to understanding the content of the page.

Please note that different browsers and operating systems enforce different restrictions on autoplaying media. For example, Chrome will only autoplay media if the user has interacted with the page before. You can read more about this in the MDN docs.

Let’s look at a working example:

html

	<audio controls>
	  <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
	  <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
	  Your browser does not support HTML audio.
	</audio>

Video

The <video> element is used to embed video content on a web page. This can be useful for including short video clips, gifs, or even full-length movies. It works in a similar way to the <audio> element, but with a few additional attributes:

poster - Specifies an image to be displayed while the video is downloading, or until the user hits the play button
width - Specifies the width of the video player
height - Specifies the height of the video player

Let’s take a look at an example for a short video clip:

html

	<video controls width="250" height="200" poster="https://noroff.dev/assets/img/noroff-logo.png">
	  <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
	  Your browser does not support HTML video.
	</video>

We can use a video element without controls and some CSS styling to produce a background effect:

css

	.video-banner {
	  height: 100px;
	  width: 100%;
	  position: relative;
	}
	
	.video-banner > video {
	  object-fit: cover;
	  height: 100%;
	  width: 100%;
	}
	
	.video-banner-content {
	  position: absolute;
	  inset: 0;
	  padding: 1rem;
	  text-align: center;
	  display: flex;
	  align-items: center;
	  z-index: 2;
	  color: white;
	  text-shadow: 0 0 10px black;
	  font-size: 2rem;
	}

html

	<div class="video-banner">
	  <video autoplay loop muted id="background-video">
	    <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
	    Your browser does not support HTML video.
	  </video>
	  <div class="video-banner-content">
	    <span>Excellent Video Banner</span>
	  </div>
	</div>

Iframe

The <iframe> (Inline Frame) element enables you to embed another HTML document within your current webpage. This is commonly used for embedding maps, videos, or even other webpages. This element is commonly used to embed YouTube or Vimeo content on a website and is an HTML feature we use very single day.

Like many of the other interactive or multimedia HTML elements, the <iframe> element has some familiar attributes:

src - Specifies the URL of the page to embed
width - Specifies the width of the iframe
height - Specifies the height of the iframe

There are a number of additional attributes that can be used to configure the iframe, you can read about them all in the MDN docs.

Video iframes

Let’s take a look at an example for embedding a YouTube video:

html

	<iframe width="560" height="315" src="https://www.youtube.com/embed/-1wcilQ58hI?si=fTyZIMhnUx0mLVbP&amp;start=2696" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Map iframes

We can also use the iframe element to embed a Google Map:

html

	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3473.6384749985277!2d30.167515076162818!3d-29.46856540481236!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1ef6aa02a52a5731%3A0x4e020c16f3c28781!2sMandela%20Capture%20Site%2C%20R103!5e0!3m2!1sen!2sza!4v1695284227010!5m2!1sen!2sza" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" title="Mandela Capture Site"></iframe>

Webpage iframes

Finally, we can use the iframe element to embed another webpage:

html

	<iframe src="https://www.noroff.no/" width="100%" height="500" title="The Noroff website"></iframe>