HTML5 Video Tag Examples

3 min readSep 26, 2018

A basic need for most web pages is to display audio and video content. HTML5s’ video and audio tags create a strong foundation to build upon.

To display a video file takes only one line of code:

<video src="video/1.mp4"></video>

This will give you an image of the first frame of the mp4 file. In order to play the file, the user needs to right click the image and select ‘show controls’.

This is not so easy on a mobile device so let's add the ‘controls’ property to the video tag:

<video src="video/1.mp4" controls></video>

This will fix the controls to the bottom of the image when the page loads. To add a fallback message to display if the users' browser does not recognize the HTML5 video tag simply add text between the video tags:

<video src="video/1.mp4" controls>      <p>Your browser doesn't support HTML5 video. Here is a <a href="video/1.mp4">link to the video</a> instead.</p></video>

HERE is a live example!

The video tag allows for basic styling using width, height, and the poster properties. These properties are used inline in the video tag. The poster property takes an image file and uses it as the display image for the video file on the page.

<video src="video/1.mp4" controls width="400" height="400" loop muted poster="img/3.png">    <p>Your browser doesn't support HTML5 video. Here is a <a href="video/1.mp4">link to the video</a> instead.</p></video>

It is good practice to move the src=”video/1.mp4” portion of the code to its own source tag:

<source src="video/1.webm" type="video/webm">

This also opens up the feature of having fallback video files for older browsers. Here is an example:

<video controls width="400" height="400" loop muted poster="img/3.png">    <source src="video/1.mp4" type="video/mp4">
    <source src="video/1.ogg" type="video/ogg">
    <source src="video/1.webm" type="video/webm">    <p>Your browser doesn't support HTML5 video. Here is a <a href="video/1.mp4">link to the video</a> instead.</p></video>

The HTML5 video tag also makes it super easy to add subtitles to your video files when played through a browser. Just create a track tag:


  <track kind="subtitles" label="English" src="video/subs.vtt" srclang="en">

Place the track tag below the source tags within the video tag:

<video controls poster="img/3.png">
  <source src="video/1.mp4" type="video/mp4">
  <source src="video/1.webm" type="video/webm">
  <track kind="subtitles" label="English" src="video/subs.vtt" srclang="en">
</video>

The source for our track tag is a file with a .vtt extension (video text track). This is a text file that must be in a specific format. Here is an example:

WEBVTT FILE1
  00:00:00.500 --> 00:00:02.000 D:vertical A:start
  The Web is always changing2
  00:00:02.300 --> 00:00:04.200
  and the way we add subtitles to the video element3
  00:00:04.500 --> 00:00:08.000
  Is using the track element and a .vtt file

It’s as simple as that. Here is a live example!

In order to customize the video player, we need to rebuild the built-in controls with our own using javascript.

Also, remember to remove the controls property from the video tag.

Create a separate javascript file and CSS file.

link to these files in the head of your HTML:

<link rel="stylesheet" href="css/vid.css" />
<script type="text/javascript" src="js/vid.js"></script>

You can also put the script link right above the closing body tag. In your javascript file put this:

document.addEventListener("DOMContentLoaded", function() { startplayer(); }, false);
var player;function startplayer()
{
 player = document.getElementById('video_player');
 player.controls = false;
}
function play_vid()
{
 player.play();
}
function pause_vid()
{
 player.pause();
}
function stop_vid()
{
 player.pause();
 player.currentTime = 0;
}
function change_vol()
{
 player.volume=document.getElementById("change_vol").value;
}

Add ids’ to your HTML elements and create a new div below your video tags. Give this new div the ID of ‘player_controls’ and inside the div create 4 input elements:

<video id="video_player" poster="img/3.png" >
    <source src="video/1.mp4" type="video/mp4">
    <source src="video/1.webm" type="video/webm">
    <track kind="subtitles" label="English" src="video/subs.vtt" srclang="en">
  </video><div id='player_controls'>
     <input type="image" src="img/3_play.png" onclick="play_vid()" id="play_button">
     <input type="image" src="img/3_pause.png" onclick="pause_vid()" id="pause_button">
     <input type="image" src="img/3_stop.png" onclick="stop_vid()" id="stop_button">
     <img src="img/3_volume.png" id="vol_img">
     <input type="range" id="change_vol" onchange="change_vol()" step="0.05" min="0" max="1" value="1">
    </div>

Now You can style your video player in the CSS file using the different IDs’:

#video_player
{
 width:100%;
}input[type="image"]
{
 float:left;
 height:110px;
 margin-left:2px;
 margin-right:5px;
 margin-top:2px;
}
#vol_img
{
 margin-left:150px;
 width:120px;
}#player_controls
{
 top:162px;
 position:absolute;
 background-color:#386fff;
 height: 150px;
 width:100%;
 padding:5px;
 box-sizing:border-box;
}

Check out a live example HERE!

HTML5 Video Tag Examples

Written by Brian Mayrose