How to Display a Video Using HTML
In this article, we show how a video can be displayed on a website using HTML.
And this is done through the HTML <video></video> tag.
The video tag used in HTML is relatively new. It hasn't been around forever. In fact, prior to this tag created with HTML5, HTML could not be used to display a video. Instead, Flash would have to be used. Now, with HTML5, with the video tag, videos can be shown with HTML.
The browsers that support the rendering of the HTML5 video tag are Chrome 4.0, Internet Explorer 9.0, Firefox 3.5, Safari 4.0, and Opera 10.5. If you are using any of these respective browsers prior to these editions, the browser may be unable to render the video using the video tag. So keep this in mind if you are using an older browser.
Also realize that the video tag only supports and can display mp4, ogg, or webm video formats. This means that only videos with the .mp4, .ogg, and .webm file extensions can be displayed. All other video formats will not work with the HTML video tag.
So below is an example of a video displayed through the HTML <video> tag. The video is an mp4 video file.
So this video above, you can see, works pretty well.
HTML Code
The HTML code to display the video above is shown below.
So you can see the code above.
For this video, we specify width and height dimensions. This is so that we can predict the size of the video on the screen. In this day in age, lots of users search for information on their phones that can be as small as a 320px width. Therefore, we set the width to 320 pixels so that it can be easily displayed on all screens.
In the video tag, we also specify controls; this means we want controls to be displayed on the video, such as play/pause, volume, full screen adjustment, etc. It give the user more options and most of the times is preferred over having no controls. When there are no controls, the user cannot stop the video in any way other than to leave your site. Therefore, you should almost certainly put controls on your videos.
We then specify the source of the video, which is the complete pathway to the video file. Since our video is located in the same directory that we are currently in (Articles directory), the src is simply the file name.
We specify the type of video used with the type attribute set to video/the type of file extension the video is.
We put the line, "Your browser does not support the video tag" in between the video tags. In case the browser does not support the video tags, as explained above with older browsers, this line will be displayed, telling the user.
And this really all that is required to display a video using HTML.
AutoPlay Feature
One modification we can make to the code shown above is autoplay.
Maybe sometimes you want the video to play automatically once the page uploads.
HTML Code
To do this, the HTML code is shown below.
So basically the code is exactly the same, but now we've added autoplay.
This video will now be displayed automatically once the page is loaded.
Just to create a more dynamic environment, if you couple HTML with a server side language like PHP, we can create a dynamic video upload form, that can play a video once uploaded.
See the upload form below.
This video uploader accepts videos of the file extension mp4, ogg, and webm.
Video Uploader
If you want to see the full article on how to create a video uploader such as seen above, see How to Upload Videos Using PHP.
But this goes to show you that HTML can display and play videos at a very high quality level. And using a server
language, you can do even more dynamic things such as upload videos to your website and play them back.
Related Resources
How to Play an Audio File Using HTML
How to Upload Videos to a Website Using PHP
How to Insert Videos into a MySQL Database Using PHP
How to Create a Video Search Engine For Your Website Using PHP
How to Create Your Own File Transfer Protocol (FTP) For Your Website Using PHP
How to Upload Images to a Website Using PHP
How to Upload Files to a Website Using PHP
How to Create a Search Engine Using PHP
How to Insert Images into a MySQL Database Using PHP