HTML5 Multimedia Examples

1. Image Tag Example

Explanation: The <img> tag is used to display images. It includes attributes like src for the image source, alt for alternative text, and width and height to specify the dimensions of the image.

<img src="html.jfif" alt="A beautiful sunset" width="500" height="300">

Copy Code

2. Responsive Image Example Using <picture>

Explanation: The <picture> element allows you to specify different images for different screen sizes or resolutions. This is useful for responsive web design.

<picture>
                          <source srcset="image-320w.jpg" media="(max-width: 320px)">
                          <source srcset="image-480w.jpg" media="(max-width: 480px)">
                          <img src="image.jpg" alt="A beautiful sunset">
                        </picture>

Copy Code

3. Using srcset for Responsive Images

Explanation: The srcset attribute allows you to specify multiple image sources for different display resolutions and screen sizes. This helps in loading appropriate images for devices with different pixel densities.

<img src="image.jpg" srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w" alt="A beautiful sunset">

Copy Code

4. Audio Tag Example

Explanation: The <audio> tag is used to embed audio files. The controls attribute provides the user with built-in controls like play, pause, and volume control.

<audio controls autoplay loop muted>
                          <source src="audio.mp3" type="audio/mp3">
                          <source src="audio.ogg" type="audio/ogg">
                          Your browser does not support the audio element.
                        </audio>

Copy Code

5. Video Tag Example

Explanation: The <video> tag is used to embed video files. It supports attributes like controls, autoplay, loop, and muted, among others.

<video controls autoplay loop muted poster="thumbnail.jpg">
                          <source src="video.mp4" type="video/mp4">
                          <source src="video.webm" type="video/webm">
                          <source src="video.ogv" type="video/ogg">
                          Your browser does not support the video tag.
                        </video>

Copy Code

6. Embedding YouTube Video

Explanation: You can embed a YouTube video using the <iframe> tag, specifying the video URL in the src attribute.

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>

Copy Code

7. JavaScript Event Listeners for Video

Explanation: You can use JavaScript to listen for events like play, pause, and end on video or audio elements.

<video id="myVideo" controls>
                          <source src="video.mp4" type="video/mp4">
                          Your browser does not support the video tag.
                        </video>
                        
                        <script>
                          const video = document.getElementById('myVideo');
                        
                          video.addEventListener('play', () => {
                            console.log('Video is playing');
                          });
                        
                          video.addEventListener('pause', () => {
                            console.log('Video is paused');
                          });
                        
                          video.addEventListener('ended', () => {
                            console.log('Video has ended');
                          });
                        </script>

Copy Code