HTML5 Videos
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video width="600" height="600" autoplay muted>
<source src="sample_video.mp4" type="video/mp4">
Your browser does not support HTML5 video element
</video>
<p> This video is a countesy of Intellipart Youtube channel </p>
</body>
</html>
HTML5 Video
HTML5 Video tag is used to display a video on a webpage. From an SEO standpoint, video increases the viewers’ retention time on a webpage leading to a high Google ranking. Therefore, HTML5 <video> tag should be deemed as an important SEO metric.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video width="600" controls>
<source src="introduciton to cybersecurity certifications.mp4" type="video/mp4">
Your browser does not support HTML5 video element
</video>
<p> This video is a countesy of Intellipart Youtube channel </p>
</body>
</html>
The output of this code will be
How Does HTML5 Video Element Work?
controls attribute in video tag add controls in the video like play, pause, and volume. It is a good development and web designing practice to include width in the video tag. Otherwise, your webpage will flicker while displaying video that leads to a bad user experience.
Eventually, our website ranking will also get hurt. Therefore, we strongly recommend you always define the width inside the HTML5 video tag.
The <source> element tells the browser where the video is located and the format.
The text between the <video> and </video> tag will only be displayed in those browsers that don’t support the <video> element
Video Autoplay Attribute
Add the autoplay attribute at the start of the video tag so start the video automatically.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video width="600" height="600" autoplay>
<source src="sample_video.mp4" type="video/mp4">
Your browser does not support HTML5 video element
</video>
<p> This video is a countesy of Intellipart Youtube channel </p>
</body>
</html>
The output of this code will be
It is worth mentioning here that chromium browsers do not allow autoplay in most cases. However, muted autoplay works perfectly well there.
Add both muted and autoplay attributes inside your video tag to start your video automatically but muted at the beginning.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video width="600" height="600" autoplay muted>
<source src="sample_video.mp4" type="video/mp4">
Your browser does not support HTML5 video element
</video>
<p> This video is a countesy of Intellipart Youtube channel </p>
</body>
</html>
The output of this code will be
Acceptable Formats for Video Element
HTML5 video support three main video formats that are Mp4, WebM, and Ogg. The browser’s support for different formats is listed below.
Video Methods, Properties, and Events
HTML5 <video> elements are equipped with different methods, properties, and events that allow you to pause, play, load, and set the duration and volume.
Also, some DOM elements can notify you when the video starts playing or pausing.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="text-align: center;">
<button onclick="playPause()"> Play/Pause </button>
<button onclick="makeBig()"> Big </button>
<button onclick="makeSmall()"> Small </button>
<button onclick="makeNormal()"> Normal</button>
</div>
<video id="myVideo" width="600" height="600">
<source src="sample_video.mp4" type="video/mp4">
Your browser does not support HTML5 video element
</video>
<p> This video is a countesy of Intellipart Youtube channel </p>
<script>
var myVideo = document.getElementById("myVideo")
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig() {
myVideo.width = 690;
}
function makeSmall() {
myVideo.width = 190;
}
function makeNormal() {
myVideo.width = 390;
}
</script>
</body>
</html>
The output of this code will
For complete DOM reference, visit HTML5 video DOM Reference.
Key Takeaways
HTML <video> element embed videos in our webpage.
<source> element is used to insert multiple media elements like audio and video inside an HTML5 documents.
