While browsing the web, we all have come across sites that have amazing animations and videos running in the background. Be it a video of some people working together, or people travelling to exotic locations – it makes the website look stunning and makes it stand apart!
But how are these videos added to the web pages? That is what we’ll find out in this article.
Here we will learn the following methods to add video in html:
1) Using the HTML5 <video> Element
The <video> element in HTML 5 is used for inserting a video in a web page. It can also be used for adding audio content.
Inside the <video> element, we add the path to the media we want to display using the src attribute within the <source> element. Alternative video files are also added using this element. The controls attribute adds video controls such as play, volume and pause. The width and height attribute is used to set the width and height of the video.
If the browser does not support the <video> element, the text inside the <video> and </video> tags is displayed.
Attributes of <video> Element
- autoplay – If specified, the video starts playing automatically as soon as it can without the data being completely loaded
- autoPictureInPicture – If set to True, this enables the video to toggle between picture-in-picture, when the user switches between two documents
- buffered – This lets you read the time ranges in a buffered media
- controls – Offers media controls such as pause, resume, seek, volume and stop video
- controlslist – This helps the browser to select the controls for the media when the browser displays its own set of controls
- crossorigin – It indicates whether CORS is used to fetch the image
- currentTime – Returns the current playback position of the video in seconds
- disablePictureInPicture – Prevents the browser from suggesting picture-in-picture within the video
- disableRemotePlayback – This Boolean attribute disables the remote playback functionality of wired and wireless devices
- duration – Indicates the total video duration in seconds
- height – Height of the video display
- width – Width of the video display
- intrinsicsize – Tells the browser to ignore the original intrinsic size of the image and consider the size specified in the attribute
- loop – If this Boolean value is specified, the video will replay again after it reaches the end
- muted – If set to True, the video will be silent initially, and if False, the audio will play along with the video
- playsinline – Specifies that the video must play within the video element’s playback area
- poster – An image URL displayed when the video is downloading
- preload – This mentions whether and if the author wants the video to be loaded when the page loads
- src – The URL of the video to be included
Example
<video width="300" height="200" controls>
<source src="action.mp4" type="video/mp4">
Sorry, your browser does not support the video tag.
</video>
Explanation
Here, you can see the video called action.mp4 is placed inside the <video> tag. It has a height of 200 pixels and a width of 300 pixels. The controls attribute indicate the video has play, resume and volume controls. The source attribute mentions the video source and its type. The text “Sorry, your browser does not support the video tag.” will be displayed if the browser does not support the video tag.
Adding Video with Autoplay
Example
<video controls autoplay>
<source src="action.mp4" type="video/mp4">
Sorry, your browser does not support the video tag.
</video>
Explanation
This example demonstrates that the video has controls such as pause/play and autoplay mechanism. This means that it will start playing when it can and not stop.
Files Supported by <video> Tag
The video element supports MP4, OGG and WebM.
2) Using the <object> Element
A <object> tag is used as a container for a resource such as a video, image, web page or a plug-in application.
Syntax
<object data="action.mp4" width="450" height="350"></object>
Here, the video called “action.mp4” is added to the web page having a width of 450 pixels and height of 350 pixels.
Attributes of <object> element
- data – This specifies the URL of the resource such as a video
- type – Specifies the type of resource mentioned in the data attribute
- form – Mentions the form to which the object belongs
- height – Height of the object
- width – Width of the object
- name – Mentions the name of the object
- typemustmatch – Specifies whether the type attribute and the content-type must match so that it can be displayed
- usemap – This is the name of the client-side image map that will be used along with the object
Example
<object data="action.mp4" width="450" height="350">
<param name="autoplay" value="true" >
<param name="loop" value="true" >
</object>
Video Files Supported by <object> Tag
The video element supports MP4, OGG and WebM file formats.
3) Using the Embed Element
The embed tag defines a container for a resource such as a video, plug-in or a web page. The tag embeds this external resource at a particular point within the HTML document.
Example
<embed type="video/webm" src="video.mp4" width="450" height="350">
Here, the embded tag describes a container that will hold the video.mp4 which has a format of WebM. The width and height is mentioned as 450 px and 350 px respectively.
Attributes of the embed element
- height – Specifies the height of the content
- width – Specifies the width of the content
- src – The URL of the resource or the content
- type – Specifies the media type of the content
Adding Video with Autoplay
<embed type="video/webm" src="video.mp4?autoplay=1" width="450" height="350">
Video Files Supported by Embed Tag
File formats supported by embed are SWF, WMV, MPEG and MOV.
4) Using JavaScript
You can create a video player using JavaScript in HTML that has all controls for starting, stopping, playing and volume controls.
Example
<!DOCTYPE html>
<html>
<head>
<script>
var myvideo = document.getElementById("myVideo");
function playVideo() {
myvideo.play();
}
function pauseVideo() {
myvideo.pause();
}
</script>
</head>
<body>
<p>
<video id="myVideo" width="320" height="200">
<source src="myvideo.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</p>
<button onclick="playVid()" type="button">Play</button>
<button onclick="pauseVid()" type="button">Pause</button>
</body>
</html>
But as you can see above you need to write down the functions for each process, which can be complicated.
That is why using the <video> element for inserting a video in the HTML document is easier and more convenient. It has the most useful attributes. However, the object and embed tag are also good.
How to Add YouTube Video in HTML?
YouTube videos can be easily added to an HTML page using the <iframe> element.
Example
<!DOCTYPE html>
<html>
<body>
<iframe width="500" height="400" src="https://www.youtube.com/embed/uyyyhhyyhh?controls=1">
</iframe>
</body>
</html>
Explanation
Here, the controls=1 attribute at the end of the video URL indicates that the user will see the controls such as play, pause, seek and volume controls. If you set autoplay attribute to 1 and mention in at the end of the URL, the video will start playing when the player loads.
Conclusion
Adding videos in HTML is easy as mentioned in the above sections. Make sure the attribute values are correct and no obsolete attributes are used.