Audio and Video Embedding

Audio Embedding

To include audio files on a web page, we can utilize the <audio> element. Let's consider an example:

In this example we have.

• <audio> element contains a <source> element, which specifies the URL and file type of the audio file. Commonly supported formats are MP3 and OGG;
• controls attribute displays standard playback controls such as play, pause, and volume;
• If the user's browser doesn't support the audio element, a fallback message will be displayed.

Additional attributes commonly used with the HTML audio element include:

• autoplay - starts playing the audio file as soon as the page loads;
• loop - causes the audio file to loop continuously;
• muted - mutes the audio by default;
• volume - specifies the default volume level for the audio file, ranging from 0.0 (silent) to 1.0 (full volume).

Here's an example demonstrating the usage of all these attributes:

Video Embedding

We can use the <video> element to embed video files on a web page. Consider the following example:

In this example:

• <video> element contains a <source> element, which specifies the URL and file type of the video file. Commonly supported formats are WebM, MP4, and OGG;
• controls attribute displays standard playback controls;
• If the user's browser doesn't support the video element, a fallback message will be displayed.

Commonly used attributes for the HTML video element include:

• autoplay - starts playing the video file as soon as the page loads;
• loop - causes the video file to loop continuously;
• muted - mutes the audio by default;
• volume - specifies the default volume level for the audio file, ranging from 0.0 (silent) to 1.0 (full volume);
• poster - specifies the URL of an image to display as the video thumbnail before the video is played;
• width and height - specifies the width and height of the video player in pixels.

Here's an example demonstrating the usage of all these attributes:

Note

Additionally, there are many JavaScript libraries and APIs available that provide additional functionality for playing and manipulating video content on the web.