Using the <video> Element in HTML5

Computer display showing a video player.

In this article, which is not meant to be extensive by any means, we will take a quick look at using the HTML element <video> which was new with implementation of HTML5. You can very simply add videos to your web page using this element along with the <source> element. We will do two simple, but useful tasks in this article:

Adding a poster to a video. The poster is the placeholder image that shows on the web page before the video plays.
Adding Closed Captions (in two languages). A little more complicated, but fun.

All modern browsers have the ability to play videos in several formats. Three formats used often are MP4, OGG and WebM. Of those MP4 may possibly be the most common. When I say browsers can play these formats, I mean without any programming or assistance from HTML. If you have a compatible video on you computer, you can drag and drop it, from it's folder onto an open browser and it will play. It can also be opened by dragging and dropping onto a browser icon.

When the video is being played, the browser automatically uses its own built-in player and includes some controls. If you right-click on the video, the option for View Source will be grayed out. This is because there is no HTML source. The video is being played by the browser natively without any HTML.

Note: This page you are reading, is an written in ASPX (Active Server Pages), mostly because that's the type of server I have. The three example pages we will create, will be in pure HTML and work on any server and also open without a server, on your local computer using any modern browser. This article is for a beginner with some experience in using HTML to create web pages.

To begin with, create a folder and copy the resources from the links below. Keeping everything in one folder helps your links be simple for this small project. You can copy the code for your minimal HTML file, and I know I say this a lot, but it is always better to write or at least type the code yourself. This helps you remember the code and also helps you figure out errors when something goes wrong. Next, use your favorite editor to create a very minimal HTML5 file and save it in that folder. Your HTML5 file should look something like this:

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<title>HTML5 - Video-Poster Attribute</title>
</head>
<body>
    <header>
        <h1>HTML5 - Video-Poster Attribute</h1>
        <p>Date: 3/3/2025</p>
        <p>An example using the POSTER attribute within a VIDEO element in HTML5. </p>
    </header>
    <main>
         Our video player will go here!
    </main>
    <footer>
        <h4>&copy; <a href="http://www.krobbins.com">krobbins.com</a> 2025</h4>
    </footer>
</body>
</html>

Resources for this article.

If you would like to use the video I am using, you can download it here:
archive.org.
The HTML can be copied from the gray boxes on this page as needed.
The video poster and VTT files can be downloaded here:
Video Poster.
Closed Captions English.
Closed Captions Spanish.
I always include all the code and materials for an article. But remember that writing and typing the HTML, CSS and JavaScript (or any code) always helps you learn coding and makes you a better programmer.

Adding a poster to a video.

Everything we will add for the first two examples will be within the <main> elements. Let's start by adding the necessary elements and attributes for the basic video. We have the HTML for the page above, so I'll just show the <main> element and it's contents. Then give a little explanation. The lines are numbered to help.

1 <main>
2     <video poster="poster-univac.png" controls>
3             <source src="UNIVAC2_512kb.mp4" type="video/mp4">
4             Your browser does not support HTML5 video.
5     </video>
6 </main>

Line 1 and line 6 signify this is the main content.
Line 2 and 5 are the open and close <video> element which has two attributes.
- The poster attribute followed by the equals sign, gives us a path to an image.
  My example image is a PNG file in the same folder.
- The second attribute for the <video> element is controls, which tells the
  browser to show video controls.
Line 3 is the <source> element followed by two attributes.
- src=, an attribute which gives the path to my video.
  My file is an MP4 video file, also in the same folder.
- The second attribute, type designates the encoding property of the video.
  This is usually the same as the file extension and tells the browser what type of video to render.
Line 4 will be visible if the browser is older and not able to render the video.

Here is my finished example of a video using a poster: HTML5 - Video-Poster Attribute
Take a look at the HTML and notice the entire file takes only 23 lines of code. We can save that file as is and create our next example, using it as a template or just continue on and add the next portion of code to it.

Adding closed captions (CC) to a video.

For this example, I have made a copy of the previous file and changed the name to video-player-cc.html. Using CC on our web page involves adding at least one more file. But here we will need two files since we will add CC in both English and Spanish using VTT files.

There are several file types used to add CC and WebVTT is one of the most common types. WebVTT stands for Web Video Text Track and is a type of XML (Extensible Markup Language). I wrote another article titled, Display XML Data Using ASP.net Data Controls, which shows how to extract data from an XML file using ASP.net controls on a web page. This is possible with the XML data type because the text in the file is structured very strictly, as you will see with VTT files. VTT files may have a dual file extension consisting of the two letter designation of the language before the VTT extension. In this example the English file is named: UNIVAC2_512kb.en.vtt.

A good naming habit to develop, when using supporting files in your projects is to name using the file they support. In this case, the VTT file is named using the video-name.language.vtt. The two letter language designation is not required if you are only using one language. Using it tells the browser what language the CC is in and when using multiple languages it gives the user the ability to choose the language from a menu.

Creating VTT files and other CC files "by hand" is time consuming. This is because the words have to be matched to a timing mark in the text. Most companies that require it, hire a third party and/or use software to add it to their videos. YouTube automatically and very sophisticatedly adds CC in just about every language on Earth to all videos, including mine: https://www.youtube.com/@kkrobbins.

Here is a portion of the English VTT file which I explain below. The lines are numbered for explanatory purposes and do not appear in the actual file. The entire file is available from the resources links above.

1  WEBVTT
2
3  00:00:00.188 --> 00:00:02.088
4  UNIVAC the giant electronic brain made only
5
6  00:00:02.188 --> 00:00:04.088
7  by Remington Rand takes business statistics
8
9  00:00:04.188 --> 00:00:06.088
10 from magnetic tape.
11
12 00:00:06.305 --> 00:00:08.295
13 Letters, numbers and punctuation marks;

Line 1 is the file type and must be followed by a blank line.
Lines 2, 5, 8 and 11 are blank. After every time sequence and track text, there must be a blank line.
Lines 3, 6, 9, and 12 are the timing sequence.
- Timing sequence uses this format: Beginning hours:minutes:seconds.milliseconds --> ending hours:minutes:seconds.milliseconds
Lines 4, 7, 10, and 13 are the text tracks that appear during each preceding time sequence.

Since we already have a template for our HTML file, I will only show the code that goes inside the <video> element. Here is the HTML:

1 <video poster="includes/poster-univac.png" controls>
2   <source src="UNIVAC2_512kb.mp4" type="video/mp4" />
3   <track src="UNIVAC2 512kb.en.vtt" kind="captions" srclang="en-us" label="English" default />
4   <track src="UNIVAC2 512kb.es.vtt" kind="captions" srclang="es" label="Spanish" />
5   Your browser does not support HTML5 video.
6 </video>

Lines 1, 2, 5 and 6 remain the same as the previous example.
Lines 3 and 4: HTML5 introduced the <track> element to cue text rendering. One track for English and one track for Spanish. The attributes we are using are:
- <src>: The source path to the VTT file.
- <kind>: Indicates the intended purpose, in this case captions. There are several other possibilities.
- <srclang>: The two letter language code that specifies the track text language. Required for captioning.
- <default>: Indicates that the track should be used by default if it does not override user preferences.

If you have added the <track> elements to your HTML file and placed the VTT files in the same folder as your HTML files, you should be ready to roll. Notice we have only added two lines of code to the first HTML file. Here is my finished example video closed captioning in two languages: Video player with closed captioning.

Open my example and click the ellipsis (more options) button in the video player. Notice that English is the default. Play the video and click the same button to go from English to Spanish. If you are using my VTT file, notice the word/track timings. Are they slightly out of sync with the voice? Can you change the timings and see if you can improve them?

Thanks for viewing. Please check out my other articles on education and technology. I welcome any comments!

Comments »