The video tag in html is used to adding an video to browsers.
Video tag is represented using <video>.....</video>.
Video tags have multiple attributes such as :
- Controls - Displays the video user interface.
- Autoplay - It start to play when the page gets load.
- Loop - After the end of video .Again its start to play.
- Muted - It is used to mute the audio until the user unmuting.
Note: Video does take an width and height more than the window .This is depends on video width and height ,that can be controlled using width and height attributes.
Case-1:
You can use "src" attribute in video tag for embedding video.Like this below:
<!DOCTYPE html>
<html>
<head>
<title>video tag</title>
</head>
<body>
<video src="C:\Users\avengers\Videos\Captures\keyboard.html - web - Visual Studio Code 2021-07-03 19-42-59.mp4" controls>This is a video.It is not supporting to your browser</video>
</body>
</html>
In above code if you forget to give controls attribute then you can't able to see video.
Suppose this video is not supported then it displays the text inside the video tag .
Output:
Video tag in html
Now the width and heigth of video is not responding not well .So we use definitely width and height property.
Case-2: Use width and height
<!DOCTYPE html>
<html>
<head>
<title>video tag</title>
</head>
<body>
<video src="C:\Users\sugan\Videos\Captures\keyboard.html - web - Visual Studio Code 2021-07-03 19-42-59.mp4" autoplay controls width="100%" height="100%"></video>
</body>
</html>
Here I use width and height for good response.
Output:
Video tag with width and height
Case-3:
- Now we are using source tag .
- Here is a advantage of using source tag if first source tag is not supported then it will play the second video.
- If not all video is not supported ,then the text in video tag display in place of video.
<!DOCTYPE html>
<html>
<head>
<title>video tag</title>
</head>
<body>
<!-- <video src="C:\Users\sugan\Videos\Captures\keyboard.html - web - Visual Studio Code 2021-07-03 19-42-59.mp4" autoplay controls width="100%" height="100%"></video> -->
<video controls>
<source src="C:\Users\sugan\Videos\Catures\birthday using css js.mp4">
<source src="C:\Users\sugan\Videos\Catures\keyboard.html - web - Visual Studio Code 2021-07-03 19-42-59.mp4">
Not supporting
</video>
</body>
</html>
Post a Comment