HTML Multimedia

    Using HTML elements , we can display various multimedia formats on the web page, which includes sound, music, video and animations.

    Multimedia

    Multimedia represent almost everything that we hear and see, such as images, music, videos, films, movies, animations and all other things. In HTML5 apart from <img> element for images we have specific elements for individual multimedia format.

    Browser Support

    It may be possible that the old browser does not support all the new HTML5 elements, so make sure that you are using the latest browser.

    HTML <video> Element

    Using the HTML5 <video> element we can display video on our web page. The video controller will be varying from browser to browser.

    Example

    There are two methods by which we can embed a video on our web page. 

    <video src="video.mp4" controls width="200" height="200">
Browser does not support video.
</video>

    OR 

    <!-- Here the Browser will play first video which source is supportable-->
<video width="200" height="200" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
Browser does not support video.
</video>

    The width and height attribute specifies the dimension of the video player and controls determine whether to display all the controls or not. The <source> element specifies the video to play. Using the source element, we can pass alternative video formats, and the browser will play the first one, which is supported. If the browser does not support the <video> element, then the text content would be display on the screen.

    Video Attribute

    <video> element has 3 major attributes:

    • controls
    • autoplay
    • loop

    Control

    The control attribute specifies the basic controls present in a video player such as play, pause, volume, forward, etc. 

    <video width="200" height="200" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
Browser does not support video.
</video>

    autoplay

    The autoplay attribute will play the video without the user permission. The video will be starting playing automatically once it is loaded completely. 

    <video width="200" height="200" autoplay>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
Browser does not support video.
</video>

    <Note> The autoplay does not work on Apple devices.

    Loop

    The loop attribute plays the video in loop. 

    <video width="200" height="200" loop>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
Browser does not support video.
</video>

    Different Types of Video Format

    There are various video formats out there, here is the list of some common video format.

    • .mpeg (Moving Picture Expert Group)
    • .avi (Audio Video Interface)
    • .wmv (Windows Media Video)
    • .mov
    • .ram, .rm
    • .swf, .flv
    • .ogg
    • .webm
    • .mp4

    HTML <audio> Element

    Using the <audio> element we can play audio files on our web page.

    Example 

    <audio src="audio.mp3" controls>
Browser does not support audio.
</audio>

    OR 

    <audio controls>
  <source src="audio.mp3" type="audio/mp3">
  <source src="audio.ogg" type="audio/ogg">
Browser does not support audio.
</audio>

    The text between the <audio> and </audio> tags will display if the browser does not support the <audio> element.

    Audio Element Attributes

    • controls
    • autoplay
    • loop

    Controls

    The controls attribute specifies the control buttons for the audio player. 

    <audio src="audio.mp3" controls>
Browser does not support audio.
</audio>

    Autoplay

    The autoplay attribute makes sure that audio start playing as soon as browser load the audio. 

    <audio src="audio.mp3" autoplay>
Browser does not support audio.
</audio>

    Loop

    Loop attribute will replay the audio every time it is finished. 

    <audio src="audio.mp3" loop>
Browser does not support audio.
</audio>

    Major Audio formats

    There are some common audio formats supported by browsers audio players.

    • .mid or .midi
    • .rm or .ram
    • .wma
    • .acc
    • .wav
    • .ogg
    • .mp3
    • .mp4

    Play Youtube videos on the Web Page

    Most of the time the browser fails to load the <audio> and <video> data on the web page. Because the default audio and video player of a web browser need a lot of resources, so it's a good practice to let youtube handle the video player and data. To play the youtube videos, we use the <iframe> element and specify the video ID in the src attribute with Youtube/embed URL. Every Youtube video has an id (_lsjCH3fd00) you need to mention that id with https://www.youtube.com/embed/ source

    Example 

    <iframe width="420" height="315"
 src="https://www.youtube.com/embed/_lsjCH3fd00">
</iframe>

    Summary

    • Using HTML elements, we can display multimedia files on the web page.
    • For Image see have <img> element.
    • Before HTML5, we did not have dedicated elements for the audio and video files.
    • To embed a youtube video on your web page, we use the <iframe> element and youtube video id.
    Previous Tutorial Next Tutorial