THE MULTIMEDIA IN HTML

HTML AND MULTIMEDIA

In the introduction of the post “The Multimedia in HTML” we start by saying that multimedia contents are available in many different formats. It can be almost anything you can hear or see, such as pictures, music, sounds, videos, records, movies, animations, and more. Web pages often contain multimedia elements of different types and formats. Multimedia elements (such as audio or video) are stored in multimedia files. The most common way to find out the type of a file is by looking at its extension. The files have different formats and extensions such as: .wav, .mp3, .mp4, .mpg, .wmv and .avi.

VIDEO

There are many video formats. MP4, WebM and Ogg formats are supported by HTML. MP4 format is recommended by YouTube. To show a video in HTML, use the <video> element. The controls attribute adds video controls, such as play, pause, and volume. It is a good idea to always include the width and height attributes. If the height and width are not set, the page may flicker while the video is loading. The <source> element allows you to specify alternative video files that the browser can choose from, it will use the first recognized format. The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

To automatically start a video, use the autoplay attribute
To mute the sound, add the muted attribute.

HTML VIDEO FORMATS

PLAYING YOUTUBE VIDEOS

To play a video on a webpage, do the following:

Make a note of the video id
Define an <iframe> element on your web page
Let the src attribute point to the video URL
Use the width and height attributes to specify the size of the player

YOUTUBE AUTOPLAY + MUTE

You can allow autoplay when a user visits the page by adding autoplay = 1 to the YouTube URL.
Add mute = 1 after autoplay = 1 to allow automatic playback of the video (with audio muted).

YOUTUBE PLAYLIST

A comma separated list of videos to play (in addition to the original URL).

LOOP

Value 0 (default) the video will be played only once
Value 1 the video will be played in a loop.

CONTROLS

Add controls = 0 to hide the controls in the video player.

Value 0 the player controls are not displayed
Value 1 (default) Player controls are displayed.

AUDIO

To play an audio file in HTML, use the <audio> element. The control attribute adds audio controls, such as play, pause, and volume. The <source> element allows you to specify alternative audio files that the browser can choose from, it will use the first recognized format. The text between the <audio> and </audio> tags will only appear in browsers that do not support the <audio> element. There are three supported audio formats: MP3, WAV and OGG. Browser support for the different formats is:

IFRAME

In the post “The Multimedia in HTML” we introduced YouTube videos. In the YouTube video, all the content is inside an <iframe> tag, let’s explain its meaning. The HTML <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.

The HTML <iframe> tag specifies an inline frame
The src attribute defines the URL of the resource to embed
The height and width attributes specify the size of the iframe
Use border: none; to remove the border around the iframe

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>MULTIMEDIA IN HTML</title>
      
</head>
<body class="class1">
    <h1>RIPRODUZIONE DI UN VIDEO IN HTML</h1>
    <div class="multimedia">
        <video class="video" width="320" height="240" controls>
            <source src="video.mp4" type="video/mp4">
            <source src="video.ogg" type="video/ogg">
          IL BROWSER NON SUPPORTA I VIDEO
        </video>          
    </div>
    <h1>RIPRODUZIONE DI UN FILE AUDIO</h1>
    <div class="multimedia">
        <audio class="audio" width="320" height="240" controls>
            <source src="audio.ogg" type="video/ogg">
          IL BROWSER NON SUPPORTA IL FILE AUDIO
        </audio>          
    </div>
    <h1>RIPRODUZIONE DI UN FILE YOUTUBE</h1>
    <div class="multimedia">
        <div class="rll-youtube-player" data-src="https://www.youtube.com/embed/tgbNymZ7vqY" data-id="tgbNymZ7vqY" data-query="autoplay=1&mute=1" data-alt=""></div><noscript><iframe width="420" height="315" style="margin-top: 20px;"
            src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
        </iframe></noscript>
    </div>
</body>
</html>

LINKS TO PREVIOUS POST

PREVIOUS POST LINKS

LINK TO THE CODE ON GITHUB

GITHUB