In web development, we have HTML Video tags to embed video contents on our web page or html document. Did you know that out of a thousand html tags, HTML also provides a tag to embed videos. We can simply make use of these html video tags to add beautiful and interactive videos on our web page along with a variety of attributes and functions available for developers with this HTML tag.
We also get multiple attributes to customise various controls for the video playback. In this tutorial, let us learn more about html video tags and their attributes.
Syntax for HTML Video Tags
The HTML video tag can be used within an html document or web page using the <video> tag. This html tag consists of an opening and closing brackets i,e. <video></video> You have to embed the video by providing the path of the video in the src attribute of the html video tags.
There are many more attributes in the HTML video tag to help you customise the video playback on the html document web page.
| <video src = “#abc” controls></video> |
The src attribute is used to specify the URL of the video file in the tag.
The controls attribute is used to add the default controls like play, pause, volume change buttons, etc.
Apart from these common attributes the HTML video tags provide more attributes and options to customise streaming videos on our web pages and make it look more interactive and engaging.
HTML Video Tags Key Takeaways
- The HTML video tag is used in a html document using the <video></video> tag.
- HTML video tags support different video formats such as MP4, MPEG 4, WebM, and Ogg.
- You can provide an alternative test between the video tag which will be displayed when the video is not working.
- The HTML video tags are supported on all modern web browsers like Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer, etc.
HTML Video Tag Examples
Check a simple basic html video tag example given below with controls.
| <video src=”movie.mp4″ controls></video> |
We can also stream videos with multiple sources to extend support for various web browsers and ensure smooth running of our video content on the web page.
| <video controls>
<source src=”movie.mp4″ type=”video/mp4″> <source src=”movie.ogv” type=”video/ogg”> <p>Your browser does not support HTML5 video.</p> </video> |
How To Find The Right Video Path For Your Video Tags
It is important to insert the path carefully in the HTML video tag to make it work. Follow the simple steps given below to find and insert the right path in the src tag attribute.
- Find the “video” folders in the project folder. If there is no video folder, you can make one using the steps given below.
- Create a new Video Folder in the index.html directory and copy the video file in the folder.
- Now, do not copy the absolute path, first convert it into HTML suitable format and then copy the path to the HTML video tag src attribute.
- Use an alternate text between the HTML tag to flash a message when the video is not working.
How to Use Attributes in the HTML Video Tag?
You can easily integrate various attributes in the HTML video tag to customise the playback of the video on the web page. Let us take an example and understand using attributes in the HTML video tags.
The HTML attribute autoplay can be used in a <video> tag to start playing the video automatically as soon as the page loads. You can easily use this attribute in the <video> tag. Check the table below.
| <!DOCTYPE html>
<html> <body> <video width=”300″ height=”250″ autoplay> <source src=”myvideo.mp4″ type=”video/mp4″> <source src=”myvideo.ogg” type=”video/ogg”> </video> </body> </html> |
Example of HTML Video Tag in Web Development Project
Check a simple representation of using a Video tag to embed a video in a project.
| <!DOCTYPE html>
<html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Video Embed Example</title> </head> <body> <h1>My Video Embed Example</h1>
<video controls width=”600″> <source src=”Videos/RaceVideo.mp4″ controls type=”video/mp4″> Your browser does not support the video tag. </video>
</body> </html> |
Folder Structure
It is important to specify the correct path of the video elements to make them successfully render on the web page. Check the folder structure and src used in this example of VS Code setup get an understanding of embedding video elements in the HTML document.
HTML Video Tags Attributes
Let us first have a look around some of the best html attributes available in the video tag.
| Attributes | Description |
| src | It specifies the URL of the video file. |
| controls | It is used to add video controls (play, pause, volume, etc.) to the player. |
| autoplay | It starts playing the video automatically when the page loads. |
| loop | Used to add replays of the video automatically once it reaches the end. |
| muted | It mutes the audio by default. |
| poster | It displays an image before the video plays, usually a thumbnail. |
| preload | It specifies if/how the video should be loaded when the page loads. The three options are auto, metadata, none. |
| height | It sets the height of the video player ( in pixels). |
| width | It sets the width of the video player ( in pixels). |
| playsinline | It plays the video inline on supported mobile devices instead of in fullscreen. |
| crossorigin | It sets the CORS setting to control video sharing across domains. The options are anonymous or use-credentials. |
| type | It specifies the MIME type for the video, helping browsers identify the file type. |
| default | It sets this track as the default if multiple tracks are provided. (Used with <track> elements inside <video>) |
| id | It assigns a unique identifier to the video element. |
| class | It adds the CSS classes to the video element for styling purposes. |
Become a Web Developer with PW Skills
Learn Web development with PW Skills Full Stack Web Development Course and become a certified web developer after completing the course. The course is suitable for everyone whether they are from technical background or not.
You will learn everything from scratch in the interactive in-depth tutorials covered by experienced mentors. The complete course is prepared in accordance with the latest industry curriculum where you can practise with real world projects and prepare for your interviews for a wide range of opportunities in web development only with pwskills.com
HTML Video Tags FAQs
Q1. What are HTML Video Tags?
Ans: The HTML video tags are used to stream video elements on the web page. You can integrate video content in the HTML document using the video> tags.
Q2. Does HTML5 support HTML video tags?
Ans: The HTML video tag is supported on HTML5 along with its various attributes.
Q3. Which browser supports the HTML video tags?
Ans: The HTML video tags are supported on all modern popular web browsers like Google Chrome, Safari, Firefox, Opera, Edge, etc.
Q4. How do you embed a video in an HTML document?
Ans: You can use the <video element tag with the src attribute to embed a video in the web page.
Q5. What attributes are used with the HTML video tags?
Ans: Some major attributes used with the HTML video tags are controls, inline, class, type, muted, autoplay, loop, preload, etc.
