Multimedia(Audio, Video, Plugins, YouTube) in HTML

Deeksha
Last Updated: May 13, 2022

Introduction

On the internet, we have multimedia like images, music, videos, and animations. The concepts of multimedia in HTML that we will learn in this blog will be helpful when you want to add music or songs or videos to your web page. You can add various multimedia elements on your web pages using tags like AUDIO, VIDEO, EMBED, and OBJECT. Multimedia files can be recognised using extensions like .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

HTML supports only these video standards: 

  • MP4
  • WebM 
  • Ogg

 

Let’s talk about audio files now. These are the formats supported by HTML:

  •  MP3
  • WAV
  • Ogg
     

Now is the time to discuss different types of tags used for embedding multimedia in HTML:

Video Tag in HTML

The <video> tag in HTML is used for streaming movie clips or song clips on the web page.Let’s understand it with an example: 

<!DOCTYPE html>

<html>

<body>

 

<!-- Video tag of HTML-->

<video width="320" height="240" controls>

  <source src="CN.mp4" type="video/mp4">

  <source src="CN.ogg" type="video/ogg">

  Coding Ninjas

</video>

 

</body>

</html>

 

Output: 

 

Attributes Of HTML Video tags

Attribute 

Description

controlsIt shows the video controls which are displayed with play/pause buttons.
heightIt sets the height of the video player.
widthIt sets the width of the video player.
posterIt is used to specify the image which is displayed on the screen when the video is not played.
autoplayIt will play the video as soon as it is ready.
srcIt is used to specify the source URL of the video file.
loopDue to this video file will loop over again on completion.
mutedYou can use it when you want a mute video output.
preloadIt is used to show the author’s view to upload a video file when the page loads.

 

So this is how you can add video clips to your web pages and can add several functionalities to it using attributes. Now let’s move towards audio files:

Audio Tags in HTML

Suppose you want to add an audio file to your web page then <audio> tag of HTML will be of great help to you.Let’s see it with an example: 

<!DOCTYPE html>

<html>

<body>

<!--audio tag in HTML-->

<audio controls>

  <source src="Coding.ogg" type="audio/ogg">

  <source src="Ninjas.mp3" type="audio/mpeg">

Welcome to Coding Ninjas

</audio>

 

</body>

</html>

 

Output: 

 

Attributes of HTML Audio Tags

Attribute 

Description

controlsIt shows the audio controls which are displayed with play/pause buttons.
autoplayIt will play the audio as soon as it is ready.
srcIt is used to specify the source URL of the audio file.
loopDue to this audio file will loop over again on completion.
mutedYou can use it for mute audio output.
preloadIt is used to show the author’s view to upload an audio file when the page loads.

 

HTML YouTube Videos

You can also play videos on your web page using Youtube. Generally, many people struggle with converting video formats so that they can embed those in their web pages. The solution is to just let youtube play videos on your web page. It is the easiest way to play videos on your web page. Let’s see the steps involved in it:

Whenever you save or copy a video from youtube, you will always find an ID associated with that video. We will make use of this ID for playing that video on our web page. Let’s see different ways for adding a youtube video:-

Adding Youtube Video On WebPage

Using iFrame Tag

<iframe> element is used to embed a youtube video on our webpage.Let’s see an example for it:

<!DOCTYPE html>

<html>

     <body>

            <iframe width="420" height="345" 

              src="https://www.youtube.com/embed/ruZLtbWR1rU"

             </iframe>

      </body>

</html>

 

Output: 

 

Creating a YouTube Playlist

Suppose you want to make a playlist of youtube videos on your web pages then how will you achieve it in HTML? For this you have to separate different videos you want to play using a comma character. Let’s see an example for this: 

<!DOCTYPE html>

<html>

  <body>

         <iframe width="420" height="345"

              src="https://www.youtube.com/embed/SrVLcvfomtY?playlist

                      =8jlsCDwrGTU,SrVLcvfomtY&loop=1">

         </iframe>

  </body>

</html>

Output:

 

 

YouTube Controls

We can add or remove controls to the youtube videos that we have embedded in our web page.

  • controls = 0, Player controls will not display.
  • controls = 1, Player controls will display

Let me show an example for this:

<!DOCTYPE html>

<html>

     <body>

      <!--No controls will be displayed in video-->

             <iframe width="420" height="345"

               src="https://www.youtube.com/embed/ruZLtbWR1rU?controls=0">

             </iframe>

       </body>

</html>

Output: 

You can see that no controls are there in this video.

 

Frequently Asked Questions

Ques1. What is multimedia in HTML?

Ans1. Multimedia in HTML includes images, music, sound, videos, and more. You can add different types of multimedia elements to your webpage.

 

Ques 2. How can I add a video to my web page?

Ans 2. Video tag can be embedded using <video> tag. You can add different sources to the video tag and your browser will choose the first source it supports.

 

Ques 3. How can I add audio to my web page?

Ans 3. Audio content on a web page can be embedded using the <audio> tag.

 

Ques 4. Can I insert a youtube video in HTML?

Ans 4. Yes, you can insert youtube videos in HTML using the <iFrame> tag.

Key takeaways

In this blog, we discussed a super important concept in HTML that is Multimedia in HTML. These concepts will be beneficial in making your web page more appealing to the users. Here we discussed several ways to embed a video and youtube video to our web page. Now you have learned these concepts, here is a task for you to try to make a web page and try adding a video, audio, and a youtube video to it. You can learn more about HTML here. Do share this blog with your friends.

 

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think