Lecture No. 5: Mastering HTML - Complete Guide to the HTML Video Tag
Welcome to Lecture 5 of the Mastering HTML series! In this video, we'll dive deep into the HTML tag. You'll learn how to embed videos on your website, add controls, specify video sources, and ensure compatibility across all browsers. Whether you're building a personal project or enhancing your web development skills, this guide will give you all the insights you need.
What you'll learn:
Basics of the HTML tag
How to add video controls (play, pause, volume)
Working with multiple video sources for cross-browser support
Adding subtitles or captions to your videos
Best practices for embedding videos
Don’t forget to check out the other videos in this Mastering HTML series to further sharpen your coding skills!
Subscribe for more tutorials on HTML, CSS, JavaScript, and React!
#HTML #WebDevelopment #Coding #LearnHTML #HTMLVideoTag #LearnCoding #Programming #WebDesign #FrontendDevelopment #React #JavaScript #TechTips #CodeTutorial #BeginnersGuide #WebDevelopmentTutorial
Welcome to Lecture 5 of the Mastering HTML series! In this video, we'll dive deep into the HTML tag. You'll learn how to embed videos on your website, add controls, specify video sources, and ensure compatibility across all browsers. Whether you're building a personal project or enhancing your web development skills, this guide will give you all the insights you need.
What you'll learn:
Basics of the HTML tag
How to add video controls (play, pause, volume)
Working with multiple video sources for cross-browser support
Adding subtitles or captions to your videos
Best practices for embedding videos
Don’t forget to check out the other videos in this Mastering HTML series to further sharpen your coding skills!
Subscribe for more tutorials on HTML, CSS, JavaScript, and React!
#HTML #WebDevelopment #Coding #LearnHTML #HTMLVideoTag #LearnCoding #Programming #WebDesign #FrontendDevelopment #React #JavaScript #TechTips #CodeTutorial #BeginnersGuide #WebDevelopmentTutorial
Category
📚
LearningTranscript
00:00Welcome back guys, today we are going to see how to use video tag.
00:05In html, it is considered difficult to use video tag but it is not difficult at all.
00:13First of all, you go and click on the subscribe button and also click on the bell icon so that you can get my video notification.
00:24First of all, I have written the video tag here.
00:29The video tag is the same as we use the normal element in html.
00:35Along with that, we get some attributes.
00:38We talked about attributes that are additional information that we are giving to the tag.
00:44So we get an attribute of width that the content of the video that we are showing, how much width it will take our page.
00:53Along with that, we get an attribute of height that will show us how much height this video will take our space on our website.
01:02Along with that, we get controls.
01:04Controls is that you have to move your video forward and backward.
01:07This is an attribute of controls.
01:10And this is an attribute for which you only need a key.
01:15You don't need a value.
01:16In the last video, you will definitely check out how we define attributes and what attributes are.
01:24So we talked about that attributes are basically key value pairs that tell our tag.
01:30It gives additional information.
01:32We have this tag to follow up this information with us.
01:38So we give attributes to tags for this.
01:41So here in the video tag, now here we have one thing that is going to note is that we also have a source tag.
01:50Auto closing tag is used in our video.
01:54Now here we use the tag of the video that we have to show the video.
01:58But now we have to show that we have taken the video from the source.
02:04So here we have a source tag.
02:07Basically, it is used for the tag of the video.
02:11So in the video tag, we nest an auto closing tag of a source.
02:17I have also told the nesting of the tag in the last video.
02:21So kindly you will definitely check out that video.
02:24You will get a good view of how you can nest in tags.
02:29Now after that, we have used a source tag here.
02:33Along with that, an attribute src.
02:35src is basically a comprehensive word that stands out.
02:41It stands out the source.
02:43And the value of this key is what is the absolute path and what is the relative path.
02:50Basically, I have also told in the last video that what is the absolute path and what is the relative path.
02:55Here we have to tell this because this source is basically the auto closing tag of this source.
03:03It is also used for video.
03:07And along with that, we also use this source tag for images.
03:12So along with that, we have an attribute of type.
03:16And what does this attribute of type tell?
03:18What is the extension of your video?
03:21The extension of our video is mp4.
03:24So I have written mp4 here.
03:26Let's suppose I say that my video is here.
03:30And the type of the video is let's suppose bus is also a type.
03:35Or we have mp4 which we had kept.
03:38So you define a type of your video here.
03:41Now let's go to the browser screen and see that the tag of this video that we have used.
03:47What impact does it give us?
03:50So here we are on the browser screen.
03:52And see on the browser screen that we click on play here.
03:57So the video that we had kept here, that video is played here.
04:01So awesome, our HTML tag is working perfectly.
04:05Along with that, we also have additional attributes here.
04:09Here we can say let's suppose, see how many additional attributes are available here.
04:15Now here comes an attribute of autoplay.
04:18Which whenever anyone comes to your website, it will automatically start playing.
04:24And controls are basically these things that you can do big screen by doing controls.
04:30Here you can play it again.
04:33And we can also say here that we also have an attribute of loop available.
04:39Basically HTML is so vast.
04:42You can learn HTML, it is very easy.
04:45Whatever comes to your mind, that attribute is available here.
04:50Most of the cases we do the same here.
04:53Now see here that when 10 seconds will pass.
04:56So after 10 seconds, this loop, because I have used this attribute.
05:00So it will automatically start running again, you saw.
05:05Now here, if I finish the controls.
05:09So see here, I have finished the controls.
05:12So now when I hover, nothing is coming to me.
05:15It means that our video has started running as such.
05:19So we have seen the video tag in this series of HTML.
05:24How do we utilize the video tag?
05:27And I told you a detail on the video tag.
05:30That video tag, along with utilizing us.
05:35What attributes does it provide us?
05:37Today's video takes us to the conclusion.
05:41That it is very easy for us to use the video tag.
05:46And HTML tells us in a very unique and precise way.
05:51How we can put our video tag or any video on our website.
05:58So this video's comment target is 10.
06:01So kindly comment and tell me.
06:05How can you use the video tag other than this format?
06:11See you in the next video.