Last updated on January 23rd, 2024 at 02:18 am
HTML stands for Hypertext Markup Language. It is a web coding language.
It sends instructions to a web browser like Chrome, Firefox or Opera how to display a web page.
The latest HTML version is HTML5.
How is HTML5 different from previous HTML versions?
Apart from support for SVG graphics, HTML5 is unique because of the way it displays videos on a web page.
Let’s take a look at how the HTML5 video element work.
HTML5 Video Element Basics
The HTML5 video element sends instructions to a web browser to load a video file.
The web page itself doesn’t store the video file. Instead, the video file is in an external location.
The HTML5 video tag is opened <video> and closed </video>.
Within these tags, instructions are written on how a web browser should display a video.
An important part of the HTML5 video element is the src or source attribute.
The source attribute can indicate the video format and the location of the video.
HTML5 Video Code
Let’s take a look at an example of an HTML5 video code:
<video>
<video width=”320″ height=”240″ controls>
<source src=”abc.com/videos/movie.mp4″ type=”video/mp4″>
<source src=”movie.ogg” type=”video/ogg”>
Your browser does not support HTML5 video.
</video>
The first line indicates the width and height of the video.
The source src tells the browser where the video is located.
In the first instance, the video is located outside of the server where the web page is hosted. For example, this could be a YouTube video.
The second source src tells the browser that the video is located in the local server.
For example, you’ve uploaded a video to your WordPress hosting server. So, you just have to name the file for the browser to find it.
Video type is also specified.
type=”video/mp4″ means it is an MP4 video.
type=”video/ogg”> indicates that it is an OGG video.
Your browser does not support HTML5 video. This message will be displayed if an older browser has no support for MP4 or OGG video.
Other attributes include autoplay, loop, and muted.
There’s also the poster attribute. This attribute will tell the browser to display a picture before the video is played.
Play, pause, and volume attributes can be added to the code to allow the user to control video playback.
Web Video Before HTML5
Before HTML5 you needed the Adobe Flash plugin to play videos on a web browser. Adobe stopped supporting this browser plugin after the end of 2010, as explained below.
Although Flash Video was a functional solution, it had security issues. It was an open target for malware attacks and many platforms did not want to have anything to do with it.
The solution was HTML5, not entirely foolproof but better equipped than the Flash plugin.
For one, HTML5 takes up less processing power than Flash. So, it runs faster. Also, HTML5 supports video streaming ( live and on-demand) better than Flash.
HTML5 dispensed with the need for a plugin by using only HTML tags. Installing and constantly updating a video player plugin like Adobe Flash was no longer necessary.
Adobe itself ended support for the Flash plugin after 31st December 2020.
If you visit the Adobe Website, you’re advised to uninstall the Flash player owing to security concerns.
