HTML Video Tag, Full tutorial with Programming Examples.
HTML TUTORIAL NO: 15
HTML Video Full Tutorial
HTML Video <video> tag is used to embed the video content in a websites and webpages, such as a movie and all types of video clips.
To embed the video, we have to use the <video> element with the src attribute or the <source> child element with its src and type attributes for each.
We can specify a text inside the <video> element that will be shown as a fallback in browsers that don’t support embedding videos.
HTML Video Attributes
| Attributes | Functions |
| autoplay | It specific the embedded video will automatically play when we upload browser. |
| loop | It specific the embedded video will play over and over again in the endless loop. |
| controls | It specific to control the embedded video in browser, such as muted, sound, full screen, play and pause. |
| poster | Poster attribute specific to use show thumbnail on video, like YouTube video. |
| muted | It specific to use the muted the video in browser, when we open browser, the video will mute. |
| src | It specific a path file path that points to the video file. |
| height | Height Attribute use to control the height of video’s display area in pixels. |
| width | It specific to use the control the width of video’s display area in pixels. |
Now here we see the Examples of all Attributes one by one.
Example of autoplay Attributes in HTML
<!DOCTYPE html> <html lang="en"> <head> Â <metacharset="UTF-8"> Â <meta http-equiv="X-UA-Compatible" content="IE=edge"> Â <meta name="viewport" content="width=device-width, initial-scale=1.0"> Â <title>HTML Video</title> </head> <body> Â <video src="wildlife.mp4" width="250" height="400" autoplay> </video> </body> </html> |
Output of above Example
 |
Example of controls Attribute in HTML
<!DOCTYPE html> <html lang="en"> <head> Â <meta charset="UTF-8"> Â <meta http-equiv="X-UA-Compatible" content="IE=edge"> Â <meta name="viewport" content="width=device-width, initial-scale=1.0"> Â <title>HTML Video</title> </head> <body> Â <video src="wildlife.mp4" width="250" height="190" controls> </video> </body> </html> |
Output of above Example
 |
As you can see the above example “controls” the display area of video has control option like pause, play, sound, full screen and mute but in example of autoplay controls option are not see because we not use controls attribute in autoplay.
Example of loop Attribute in HTML
<!DOCTYPE html> <html lang="en"> <head> Â <meta charset="UTF-8"> Â <meta http-equiv="X-UA-Compatible" content="IE=edge"> Â <meta name="viewport" content="width=device-width, initial-scale=1.0"> Â <title>HTML Video</title> </head> <body> Â <video src="wildlife.mp4" width="250" height="190" autoplay loop></video> </body> </html> |
Output of above Example
 |
Example of muted Attribute in HTML
<!DOCTYPE html> <html lang="en"> <head> Â <meta charset="UTF-8"> Â <meta http-equiv="X-UA-Compatible" content="IE=edge"> Â <meta name="viewport" content="width=device-width, initial-scale=1.0"> Â <title>HTML Video</title> </head> <body> Â <video src="wildlife.mp4" width="270" height="190" controls muted></video> </body> </html> |
Output of above Example
The source <source> Element in HTML
Some browser doesn’t support all types of video format, that time use of <source> element. We can upload multiple video file and format in browser by using through source element.
Example of source <source> element.
<!DOCTYPE html> <html lang="en"> <head> Â <meta charset="UTF-8"> Â <meta http-equiv="X-UA-Compatible" content="IE=edge"> Â <meta name="viewport" content="width=device-width, initial-scale=1.0"> Â <title>HTML Video</title> </head> <body> <video controls height="150" width="250"> <source src="wildlife.mp4" type="video/mp4"> <source src="wildlife.avi" type="video/avi"> Â </video> </body> </html> |
Output of above Example
  |
In this tutorial we learned HTML Video tag with its all Attributes, I hope you learned this and entertain with. And next tutorial we will learn a new topic of HTML.
Also Learn This-
15 Comments
zoritoler imol · July 3, 2022 at 11:15 am
Just desire to say your article is as amazing. The clearness to your publish is simply spectacular and that i could assume you’re knowledgeable on this subject. Well along with your permission let me to snatch your RSS feed to keep up to date with imminent post. Thanks one million and please continue the rewarding work.
graliontorile · August 21, 2022 at 1:17 am
Today, I went to the beachfront with my kids. I found a sea shell and gave it to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She put the shell to her ear and screamed. There was a hermit crab inside and it pinched her ear. She never wants to go back! LoL I know this is completely off topic but I had to tell someone!
antika eÅŸya alım satım · November 18, 2022 at 8:51 pm
You can definitely see your expertise within the work you write. The world hopes for more passionate writers such as you who are not afraid to say how they believe. At all times go after your heart.
Gene-Eden-VIR and Novirin · January 21, 2023 at 4:10 am
We’re a bunch of volunteers and opening a brand new scheme in our community. Your site provided us with useful information to work on. You’ve performed a formidable job and our whole group will be grateful to you.
best bitcoin casinos · January 21, 2023 at 8:34 am
I’m really impressed with your writing skills as well as with the layout on your blog. Is this a paid theme or did you modify it yourself? Anyway keep up the excellent quality writing, it is rare to see a great blog like this one nowadays..
cheap flight tickets · January 23, 2023 at 6:10 pm
Hi there, You have done an excellent job. I?ll definitely digg it and personally recommend to my friends. I’m confident they will be benefited from this web site.
Beste Afwasrek · January 24, 2023 at 9:02 pm
fantastic post, very informative. I wonder why the other experts of this sector don’t notice this. You should continue your writing. I am confident, you’ve a great readers’ base already!
neurotonix · February 4, 2023 at 6:09 am
I do agree with all the ideas you have presented in your post. They are really convincing and will certainly work. Still, the posts are very short for beginners. Could you please extend them a little from next time? Thanks for the post.
pop over to this site · February 17, 2023 at 8:22 am
Wow, awesome weblog layout! How lengthy have you ever been blogging for? you made running a blog look easy. The overall look of your site is magnificent, let alone the content material!
Cumin Noir · March 10, 2023 at 9:29 am
I just could not leave your site prior to suggesting that I actually loved the standard information a person provide in your visitors? Is going to be again incessantly in order to investigate cross-check new posts
yif · July 25, 2023 at 3:59 am
Wow, this article is mind-blowing! The author has done a phenomenal job of conveying the information in an engaging and informative manner. I can’t thank her enough for sharing such precious insights that have undoubtedly enhanced my knowledge in this subject area. Bravo to her for creating such a masterpiece!
situs porno · July 30, 2023 at 7:26 pm
It?s really a great and useful piece of information. I?m happy that you simply shared this helpful info with us. Please stay us up to date like this. Thank you for sharing.
Psychic Parties · July 31, 2023 at 11:23 am
I’ve been surfing on-line more than three hours as of late, yet I by no means discovered any interesting article like yours. It?s lovely price enough for me. In my view, if all webmasters and bloggers made good content as you probably did, the internet will be much more helpful than ever before.
dagsmejan sleepwear review · August 9, 2023 at 6:25 am
Excellent weblog right here! Additionally your website so much up very fast! What host are you the use of? Can I get your associate link on your host? I want my website loaded up as fast as yours lol
JimmyBloks · February 7, 2024 at 10:06 pm
Good luck 🙂