In this session, let us learn how to add media elements to a web page. Media elements can be in different formats. It can be audio, video, animation, pictures, etc for adding media elements. html5 has introduced few tags. They are audio video source, track an iframe. We will be learning how to use audio tag, video tag, source element, and I afraid let me first start with video tag, video tag, you can embed videos into your page.

The formats that are the video formats that are supported are mp4 WebM and odg. This video tag has got few attributes like SRC, the name of the video, which you want to embed in the page, then controls if you want to have play pass and why buttons, then you need to add this controls attribute. There is one more attribute called as autoplay. If you want the video to be placed, the moment the page is getting loaded, you need to go in for this autoplay. Other than that this video is having a child tag that is so if you are having different formats of the same video, you can add them to the source. The reason for doing this is if the browser is not supporting a particular format, automatically it will go in search of an alternate format, which is given in this full stack.

This video tag has got few Dom methods and properties. The methods are played fast and load. These actually are JavaScript methods. Like if you want to specify what should happen when the video is getting loaded, or when it is getting played or passed. You need to add the functionality in these methods and for giving heights In which you need to go in for the property and even for of course you know play and father even. Let us see an example of how to use this video tag.

Having a concrete example, I've got two video tags. In the first video tag I have given SRC, then movie are the video which I want to embed, then height and width for my video, then controls so automatically the video will come together with controls, play pass and volume buttons. Come to the second video tab. Here also I have included height and width. I have attached controls. I have attached autoplay, but I have not added SRP.

Instead, I am going in for the child stat. So, wherein I am specifying different formats of the same video, movie dot mp4 movie dot o GG. If the browser is not supporting mp4, it is going from odd format I hope it is clear. Now what we will do is we will try the same example in sublime HTML page and I have added the video tag. This video tag is having four attributes SRC height, which then controls src. Here you need to specify the video which you want to invert.

If it is in the same folder you can add the video directly. But if it is in a different folder you are supposed to give the path for me I have created a video folder, which is a sub folder of HTML files. And my video is sitting inside this folder. They open video you can see I've got movie dot mp4. So in SRT, I need to specify a video slash movie dot mp4. Let me save this.

And let me open this in the browser. Yeah, now I opened it in the browser. Have a look. I have got the play button. Then again the pause button and then also watch the volume. show you the difference.

I will remove controls. Let me save this, I will reload the page. You can see the video is embedded, but you don't have that controls. What if you want to autoplay it in that scenario, you can go in for autoplay. Let me save this, I will minimize here, refresh, automatically it will start playing. In this case, I cannot stop the video or I cannot pass the video because there are no controls.

So the right approach is to add controls to your video. Let me show you the second way of embedding a video to a web page wherein we are going to add the source step. Let me add the code first. Yes, now I have added it. You can have a look I've got a video tab with tools So tagging but if mp4 is not supported automatically it is going to just odd. This is for the browser compatibility only.

So as a developer, you must have both the format's added to this video folder. Now what I will do here I will add controls to the first one also are a lot of place. And I will remove this autoplay part here. Let me save this, like right click open in browser. You can see both the videos are added over here and put it over here. What about the second one?

There is some problem and check it out. As you can see, I didn't get the video because I didn't do that correctly. It has to be video slash movie dot mp4 and video slash movie dot o GG Let me refresh. Now I have got the both the videos. The second one is autoplay for automatically this getting started. So this is fast video.

Similarly, you can add audio to your web page. Let me go back to the slides to embed an audio to your web page you have to go in for audio element. This also has got controls autoplay, and the methods just similar to the video tag. And what are the format's this audio tag the supporting mp3, WV an odd format. Let me show you an example. Just like how you have worked with video, you can do the same thing for audio, audio SRC equals to the file name dot mp3, then the controls.

If you want to have autoplay, of course, you can add autoplay also are going for an alternate way wherein you will be having an audio tag within the source. Now, let me show you an example for this audio. So now I have a HTML page wherein I have added the audio tag. I added both the ways of I embedding an audio first, directly SRC and other attributes. The second one is this Get the source tab Have a look over here and I have not added the mp3 file directly to the main folder. I have created a sub folder of audio inside audio I have got found dot mp3 that is what I have attached.

Right now let me open this in process. You can see the first one is autoplay, automatically distracting. The second one is not autoplay. So, it is coming with a play, I mean with the play symbol directly, because we are added controls all the controls are shown over here. So this is what audio Next, let us see how to embed a YouTube video for embedding a video from YouTube. You have to go in for this iframe.

And then you need to pass on the SRC part rather than the taking the wrap code. I will show you how it can be done directly from YouTube. I am open the YouTube page Now what I can do is right click, copy embed code, you copy this, then come back to your page. Now right click paste. So you can have a look The video is getting embedded automatically using iframe. Let me save this right click open in browser.

You can see the video is shown over here. You can do height and width for your video as required. So this is how you add video, I mean media elements to your web page. If you want to add your own videos or audios added to the appropriate folder and use the video and audio tab. If you want to embed a video from YouTube ad using iframe. In case of embedding a video from my iframe, you can even specify the controls height and which further videos THANK YOU