Html Video Tags - Autoplay, YT Video Tags

Q: 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.

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.

Table of Contents

Syntax for HTML Video Tags

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.

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.

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.

<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>

</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>

<head>

<title>Video Embed Example</title>

</head>

<body>

<h1>My Video Embed Example</h1>

Your browser does not support the video tag.

</video>

</body>

</html>

html video tags

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

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.