In this article, we are going to see embedding media in HTML web pages. HTML5 introduces new elements to add supported format media on the web pages. These elements are audio and video. To embed media files hosted on external media on our web page we use the iframe tag.

Audio

This 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 the 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
There are multiple audio file formats supported by commonly used browsers.
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 the 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.

Listen to T-rex :
<audio 
  controls 
  src="./audio/t-rex-roar.mp3">
</audio>

Video

This element is used to add a video file to the web page. It has the same basic syntax as an audio element. We need to provide src - the source of the media file generally a .mp4 file and also alt - alternative text. Several additional attributes can be used to influence how video content is loaded and appears in the browser. These attributes include:

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.

<video 
  controls 
  width="250"
  src="./video/flower.mp4"
  type="video/mp4">
</video>

Source Element

The <source> HTML element specifies multiple media resources for the picture, the audio element, or the video element. It is used to provide the same media content in multiple file formats in order to provide compatibility with a broad range of browsers. When more than one format is provided, the browser selects the format best suited to the visitor’s device. When the source element is used, it replaces the src attribute.

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

Track Element

The <track> HTML element is used as a child of the media elements, <audio> and <video>. It lets you specify timed text tracks (or time-based data), for example, to automatically handle subtitles. The tracks are formatted in WebVTT format (.vtt files) — Web Video Text Tracks.

<video controls
       src="/media/cc0-videos/friday.mp4">
    <track default
           kind="captions"
           srclang="en"
           src="/media/examples/friday.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.

<iframe
  src="https://example.org"
  title="iframe Example 1"
  width="400"
  height="300">
</iframe>

In the below example, I have inserted iFrame inside the table, all three youtube videos are embedded in an HTML page using <iframe> element.

https://codepen.io/Sneha_Raut/pen/qBKYWdd

Thank You

If you enjoyed this blog :)

Follow me on Linked In

HTML Embeds: Audio, Video & iFrame Elements

Table of contents