Multimedia in HTML

1. Embedding Audio

The <audio> element is used to embed sound content in documents. It allows you to play audio files directly in the browser. The controls attribute provides playback controls to the user.


    <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>

2. Embedding Video

The <video> element is used to embed video content in documents. Similar to audio, it provides controls for play, pause, and volume. The controls attribute is also used here.


    <video controls width="600">
        <source src="video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

3. Embedding YouTube Videos

To embed a YouTube video, you can use the <iframe> element. This allows you to display a video from YouTube directly on your webpage.


    <iframe width="560" height="315" 
        src="https://www.youtube.com/embed/VIDEO_ID" 
        title="YouTube video player" frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen></iframe>

Example


<html>
<head>
    <title>Multimedia in HTML</title>
</head>
<body>

    <h1>Video</h1>
    <video src="movie.mp4" controls></video>
    
    <h1>Audio</h1>
    <audio src="music.mp3" controls></audio>
    
    <h1>Youtube</h1>
    <iframe width="560" height="315" 
    src="https://www.youtube.com/embed/LinWJsangs4?si=jJGgZX8FbrnePH8A"
    title="YouTube video player" frameborder="0" allow="accelerometer; 
    autoplay; clipboard-write; encrypted-media; gyroscope; 
    picture-in-picture; web-share" allowfullscreen></iframe>

</body>
</html>

Run Code

Previous Next