In this article, we are going to discuss embedding media in HTML web pages. HTML5 offers additional elements for displaying media in supported formats on web pages. These are audio and video components. The iframe tag is used to embed media files stored on external media on our website.

Audio

This Audio element is used to add audio files to the web page. HTML5 has an inbuilt playback engine. We can add multiple file formats and fallback options too. It has the below attributes,

• src - It defines the source URL.

• type - Defines file format.

• controls - Displays control playback of the content.

• autoplay - Automatically plays audio file on load.

• muted - Puts audio file on mute.

• loop - It plays an audio file on repeat.

• preload - It tells the browser to preload an audio file.

File formats

The majority of widely used browsers support a variety of audio file types.

• Wav files are very high-quality files but large.

• MP3 format is much smaller than Wav, but it is a proprietary format and quality issues become apparent at low bitrates.

• AAC format is similar to MP3 in that it is a proprietary format. It performs better at bitrates above 100kbps.

• Ogg is an open-source standard, making it popular with developers, and sound quality is much better at low bitrates than MP3.

Video

A video file can be added to the web page using this element. It shares a similar fundamental syntax to an audio element. The source of the media file, usually an MP4 file, and alternate text must both be provided. The loading and display of video material in the browser can be affected by many extra properties. These qualities consist of:

• src - It defines the source URL.

• type - Defines the file format.

• controls - Displays control playback of the content.

• autoplay - If this attribute is used, the video will begin to play as soon as enough of the video has been downloaded to begin playback.

• loop - When this attribute is present the video will automatically start over once it has finished playing.

• muted - If you want the audio content of the video to be muted use this attribute.

• preload - This element can be used with the value none, metadata, or auto to tell the browser how much of the video file to preload. Note that if autoplay is applied to a video element it will override the preload attribute.

• poster - Use this attribute to select an image to display as the poster for the video until playback begins.

File Formats

Two leading video file formats can be used with the video element and are supported by most web browsers:

WebM is a newer open-source format developed by Google.

MP4 has higher quality and global browser support than WebM

Source Element

The <source> tag is used to define multiple media resources in different formats: video, audio or image. This is necessary to achieve the best possible cross-browser compatibility. The browser may select the format it supports from the available options and play audio and video files without any problems. In a single document, the <source> element may be used many times to indicate alternate audio, video, and picture files in a variety of formats.

Example:

<audio controls autoplay>
        <source src="Demo.mp3" type="audio/mp3">
        <source src="Demo.ogg" type="audio/ogg">
</audio>

Track Element

Track Element defines subtitles, captions, descriptions, chapters, or metadata for either a <audio> or <video> media element. It is used as a child of the media elements.

<video controls
       src="/media/cc0-videos/Demo.mp4">
    <track default
           kind="captions"
           srclang="en"
           src="/media/examples/Demo.vtt">
</video>

iFrame

The Inline Frame element is used to embed externally hosted media in the web page. <iFrame> represents a nested browsing context, embedding another HTML page into the current one.