CS306 - Web Programming: HTML

4. HTML Multimedia

ΛΏ Back to homepage

Multimedia in HTML refers to the integration of audio, video, and other interactive content into web pages, enhancing user engagement and providing richer experiences. HTML provides dedicated elements like <audio> and <video> to embed multimedia content directly into web pages without relying on third-party plugins.

4.1. Audio

<figure>
    <audio controls src="audio.mp3"></audio>
    <figcaption>Listen here</figcaption><span> or </span><a href="../assets/misc/audio/audio.mp3">Download</a>
</figure>
                     
Listen here
or Download

The <audio> element is used to embed sound files, such as music or podcasts, and supports attributes like controls (to display play/pause buttons), autoplay, loop, and muted.

4.2. Video

<video controls width="400">
    <source src="video.mp4" type="video/mp4">
</video>

                     

the <video> element is used to embed video files and supports additional attributes like width, height, poster (for a preview image), and preload.

Both elements allow multiple sources to be specified using the <source> tag, enabling support for different file formats (e.g., MP3, OGG, WAV for audio; MP4, WebM, OGG for video) to ensure compatibility across browsers. Additionally, the <track> element can be used with <video> to provide subtitles or captions, improving accessibility. HTML5 multimedia elements are highly customizable and can be controlled using JavaScript for advanced functionality, such as creating custom media players.