In this tutorial we will show you how to insert mp4 video in HTML, there are several ways of inserting a video in a website. HTML tags like embed, frame and object are used for inserting videos in HTML documents.
However they are deprecated now, but also we must know about them with nowadays video and iframe tags that are used mostly.
Step By Step Guide On How To Insert MP4 Video In HTML :-
Using embed tag:
The first way would be using the embed tag. This tag does not need an end tag. It is a singular tag. Here, is an example of embed tag with the help of html codes to understand how it work, i.e.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
</head>
<body>
< embed type="video/mp4" src="your_video.mp4" width="300" height="200">
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Here we use <embed> tag, (which is a singular tag) with attributes type, src, width, height…
- Here type is for the type of document, src specifies the source from where we have to embed, height and width are used to provide a particular dimension for your source file.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Supported extension for embed tag:
- .swf - made by Macromedia Flash
- .wmv - Microsoft Windows Media Video
- .mov - Quick Time Movie, related to Apple
- .mpeg - created by Moving Picture Expert Group
.mpeg and .swf are mostly used, because of their compact format.
Attributes of embed tag are:
- autostart - sets whether the file will run automatically after the page is loaded. Can have the true or false value
- hidden - sets whether the buttons are hidden or not. Can have the true or false value
- volume - can have any value from 0 to 100
- loop - sets whether the file will be replayed after it is finished. Can have the true or false value.
- playcount - this establishes how many times the file will be replayed. For example playcount="2" means it will be replayed two times and after it will stop.
By using the video tag:
The video is added in HTML5 along with its sibling, audio. The HTML5 video element specifies a standard way to embed a video in a web page.
That is to say that the video is identified by adding a video URL to a source attribute. One can use it to embed videos imported from the computer or hosted by an external website.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
</head>
<body>
<video width="320" height="240" controls>
<source src=" **** " type=video/mp4>
</video>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Here we use <video> tag, (which is a paired tag) with attributes width, height. These attributes are used to give dimensions to video here.
- A <source> tag is used here, with attributes src and type to define about the location of source file and type of document.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
At a minimum, to use the video element, the following attributes need to be used
- .src - which defines the URL where the video content is hosted
- .type - which defines the format of the file
- .control - which must be specified or no visual element will appear to control playback of the content
Attributes of video tag are:
- autoplay - At a minimum, to use the video element, the following attributes need to be used:
- loop - which specifies that the video will start over again every time it is finished
- poster - which selects an image to display as the poster for the video until playback begins
- preload - which tells how the author thinks the video should be loaded when the page loads.
Conclusion :-
At last here we can say that for embedding a video of mp4 in html, we can use embed and video tag. Whereas embed tag is a singular tag and video tag is paired tag.
Both of them used to give same result. Whereas height and width attributes are used in both of them to give dimensions to video in browser. I hope this tutorial on how to insert mp4 video in HTML helps you.
About Ashish
