How to Insert Mp4 Video in HTML
Before introducing HTML5, to play video files users need to install plugins like a flash player or any equivalent player inside the browser. This would take more storage and extra resources also but nowadays almost all mobile platforms don’t support a flash player, I think you know that. Then what is the solution to these problems how do we let users play video files on any platform without depending on plugins, the solution is an HTML5 video tag. So, In this article, you will learn how to insert mp4 video in HTML.
Almost all modern browsers of all platforms support the HTML5 video tag. Now, using HTML video tag users can play video files without installing any plugins, because videos are directly played by the browsers, hence need not depend on plugins.
Four Methods to insert video in HTML
There are four ways to embed video in HTML and the best and easiest method is to use a video tag. Because the other three methods like embed tag, object tag, and Iframe tags look to be very similar or identical to each other concerning their syntax or code. So, Let’s try to use the first method of video tag and understand how it works. Before you insert the video, Make sure your video file and HTML file are in the same folder.
Video Element
<html>
<head>
<title>HTML5 Video tag demo</title>
</head>
<body>
<div class="wrapper">
<video src="sample.mp4" width="80%" height="auto"
poster="thumbnail image URL" controls></video>
</div>
</body>
</html>Output:
Steps:
1. The code above has, a basic index page that has a wrapper inside the body tags meaning that all the content is going to stay within a certain width in the middle of my website and inside the wrapper.
2. You need to add a video tag. Video tag is something that we got included in HTML5. At that time we didn’t have native support in browsers for videos called Flash. Today you can play videos in a browser without using Flash.
3. You must specify the path to the video file via the ‘SRC’ attribute in the video tag. And you must also add the video format to your video path, for example, video.mp4
4. Inside the video tag we need to add two important attributes. First, is something called the ‘autoplay’ attribute, which means that the video is gonna play automatically once the user enters the page that has the video net. Another one is, If you don’t have control like play, pause, fast forward, etc. in the video then you need to add an attribute called ‘controls‘. You can get video controls inside the video just like you did with autoplay.
5. The ‘poster’ attribute, which is a thumbnail image for your videos, is similar to a YouTube thumbnail. So, if you don’t like the default thumbnail that the video decides for you. You can choose your image, which you might have created using Canva, Photoshop, or something else, and include it inside the poster attribute. Just remember that it can include a custom thumbnail by using the poster attribute.
6. So, now if you go inside the browser, you can see a video inside the browse, and as you can see it also plays automatically.
How to convey a message to the user using video-tag
<video autoplay controls>
<source src="sample.ogg" type="video/ogg">
Your browser does not support this video,
change your browser!
</video>The unsupported browser Output is:
1. Now, suppose you don’t select an mp4 video. You must let the user know that the browser you choose does not support the format you have decided to upload to the website, then we can do this in a slightly different way. And don’t forget to add controls and autoplay attributes in the video tag. So, now we have the ‘source’ tag to link the video.
2. Add an attribute called “source” inside a video tag. If you use the source tag inside the video tag then use the ‘SRC’ attribute in the source tag instead of the ‘SRC’ attribute in the video tag. And add your video path to the ‘SRC’ attribute in the source tag, also don’t forget to give your video format. This tag makes the browser choose the format that it supports.
3. And you should use the ‘type‘ attribute in it and give “video/your video format” as the value, for example, video/mp4. I have an mp4 video, so I put forward-slash mp4. If you have a video in Ogg format write (video/Ogg).
4. So what we can do now is, if that browser that the user viewing the video in does not support this mp4 video, then we can let the user know. Give them a message by writing something like “your browser does not support this video, change browser!”. If you do this, the user will understand that this video is not supported by our browser.
Common Video tag Attributes
- SRC – It is used to locate your video path or URL
width and height – To specify the width and height of your video - loop – To play your video repeatedly
- autoplay – It is used to play the video play automatically
- controls -It is used to add some video controls like play, pause, mute, and fullscreen.
- poster – To add your video thumbnail like a YouTube thumbnail.
- title – To add a tooltip with title text to the video player. A tooltip is displayed when you move the mouse over the video player.
Insert Mp4 video in HTML using the Iframe Element
The advantage of actually embedding is that the video loads faster than the video tag. And another benefit as well is that if you were to include a video inside your root folder, the video is probably take up a lot of space on your server. You need to upload the video to the Internet like youtube, you don’t have to take up too much space by adding videos to your server. Object and embed tag has some problems if you insert video, whereas iframe tag has no problem, it will at least give you correct information.
The way to embed videos from YouTube or Vimeo is called embedding. Embedding is something we have available to us on youtube and Vimeo. The iframe is the tag we need to embed the video. HTML iframe stands for an inline frame, it is quite similar to the frame tag and it is used to display a local web page as well as a remote web page. To use the iframe tag we need not omit the body tag, we can use the iframe tag inside the body tag itself. The iframe tag is used to display a particular web page in iframe size. In this, we are going to insert custom videos in HTML.
You can embed videos in two ways using this iframe tag, one is embedding youtube videos or other online videos and the other is embedding your file videos. Everyone knows the first way, if you press the share button of your favorite video on YouTube and click the embed option, you will get an HTML iframe link which you can partition your HTML file. But the second way is not known to many, let’s see step-by-step how to insert mp4 video in HTML using the iframe tag.
<iframe src="sample.mp4" width="560" height="315"
title="city "><p>your browser does not support this
video, change browser!.</p></iframe>Steps
- First, add the iframe tag inside your HTML body tag.
- Give your video file path with video format using SRC attribute in iframe tag eg: sample.MP4.
- To set the width and height of your video, use the width and height attribute in the Iframe tag.
- If you use another video format, you can inform the user between the iframe tag.
Insert Mp4 videos in HTML using the Embed Element
To embed a video, images or audio, or any file we can use an embed tag. Embed tag you can think like a universal tag, it is used to embed almost any files to your web page. If you use the embed tag, the controls are automatically visible, so you don’t need to add any attributes. It is one of the Applets elements, so most browsers do not support Java applets and plugins. So what I suggest is, that if you insert your video in HTML using a video tag or iframe tag, you won’t face any problems. Apart from that, compared to Video Tag it has fewer attributes. And I suggest you people use embed tag only when you cannot perform something using the iframe tag. So, Let’s see how to insert mp4 video in HTML using an Embed tag.
<embed src="sample.mp4" width="560" height="315" >
</embed>- If you want to insert your Mp4 video by using the embed tag. First, add an embed tag in the HTML body tag.
- Then use the SRC attribute to give the video link or path, for example, video.ogg.
- And use the width and height attributes to set the width and height for your video.
Object Element Method
Object tag has one of the attributes called data, to this you have to give the URL of a file or a resource so that we can be able to embed that resource in your webpage. if you use the object tag if you want to run the java applet and I suggest you people use the embed tag over the object tag because it is getting deprecated. So, Let’s see how to insert mp4 video in HTML using an Object tag.
<object data="sample.mp4" width="560" height="315" >
your browser does not support this video, change your
browser!</object>- Create object tag in your HTML <body> tag.
- Object tag has one of the attributes called ‘data’ to this we have to give URL or path of your video file. SRC attribute is to give file path in the embed tag like that ‘data’ tag is to give video file path in an Object tag.
- If you use another video format, you can inform the user between object tags.
.
Difference between Iframe, Embed, and Object tags
| Iframe tag | Embed tag | Object tag |
| It is Element of <frame> tag. | The embed tag is an Element of the Applet. | Object tag is an Element of the Applet |
| Iframe tag is a block element in HMTL. | The Embed tag is a block element. | The Object tag is an inline element. |
| An iframe is used to import (use ) another webpage or videos in the main webpage. | Embed tag is used to integrate external (mostly, non-HTML) applications like a flash, SVG, etc. | It is commonly used to embed web page elements such as Flash and Java items that are handled by browser plug-ins. |
| In which the “SRC” attribute gives the URL or file path | Embed tag the “SRC” attribute gives the URL or file path | In which the “Data” attribute gives the URL or file path |
| It is dynamic and it is supported by almost all the browser | The embed tag is Static and some browsers cannot support it. | It is Static and some browsers cannot support it. |
Conclusion
You can insert your MP4 video in any of these four ways, but I recommended you use a video tag and iframe tag instead of an object or embed tag. If you have HTML5 then use a video tag otherwise use an iframe tag. Mobile devices do not support flash players if we embed a video using the object or an embed tag then the video can’t be played, because they don’t know which video player or a plugin or software is available on the viewers’ device as they are static.
