Once upon a time, when HTML4 still ruled the land of interwebs, embedding a video to a webpage was like a gamble. There’s no way to be sure that the person viewing the page will be able to see the video. The main reason was that playing video on a webpage required a third-party plugin — Flash.
The big problem with Flash was it was a security risk and also crashed a lot, so some people chose not to install it. In an office environment, the IT department would very much block Flash altogether.
These days, with HTML5 becoming more ubiquitous, embedding a video to a webpage is no longer a hit and miss. Popular browsers now support video playback natively and end-user no longer needs to install any plugins.
How it’s done
The following is simple example of how to embed and HTML5 video:
<video controls="controls" width="320" height="240"> <source src="myVideo.mp4" type="video/mp4" /> <source src="myVideo.ogg" type="video/ogg" /> Sorry. It seems your browser does not support the HTML5 video tag.</video>
In this example, we specify bot the width and the height of the video. These two attributes attributes are optional, but we highly recommend you to always use them.
Specifying both the width and height allows the browsers to know video size beforehand, therefore allowing it to set aside the correct amount of space for it. Removing those attributes may cause the web page to flicker as the browser is adjusting the layout to accommodate the video.
After dictating the width and height, we also specify the video container to have controls. In the rare case that you don’t want people to stop or pause the video, you may omit this attribute.
Is it truly foolproof?
Well, HTML5 <video> element is supported by major browsers such as Chrome, Firefox, Safari, Opera, and Edge. Those five browsers account for 92.56% of the global market share of internet browsers. This means using HTML5 video should cover most of, if not all, your user base. For the minority of population who don’t have the latest version of those five browsers, they will see the error message “Sorry. It seems your browser does not support the HTML5 video tag.”
As far as video format support goes, there are 3 video formats that HTML5 supports are MP4, Ogg, and WebM.
Yes, only 3 formats are supported so far. However, if you have already saved your video in different formats, just use the online video converter tools. And if you have already uploaded your videos to your website, you don’t have to download, convert, and re-upload them. The online tool lets you convert videos from a URL. That’s convenient, right?
Follow us