HTML5 Video Tag

Revised 3 minutes, 47 seconds read By Edward

HTML5 Web Video Element

HTML5 video tag can be used to view streaming video, finished video or part of a video. As of Spring 2013, MPEG4, WebM and Ogg video files were supported by the video tag. The video tag was supported in major browsers

The HTML5 video tag allows for option attributes such as preloading the video and displaying video controls. Tracks can be used to specify subtitles, captions or overlaid text. HTML5 was a draft specification as of Spring 2013.

This tutorial uses HTML5.

    Tools are required:

  • Text editor.
  • Folder for web server.
  • Browser to view output.

HTML5Video.html File

<!--
   HTML5Video.html
   
   Copyright 2013 edward <http://Ojambo.com>
   
   This program is free software; you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
   the Free Software Foundation; either version 2 of the License, or
   (at your option) any later version.
   
   This program is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   GNU General Public License for more details.
   
   You should have received a copy of the GNU General Public License
   along with this program; if not, write to the Free Software
   Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
   MA 02110-1301, USA.
   
   
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Ojambo.com HTML5 Video Tag</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.22" />
</head>

<body>
	<div>		
		<video controls preload="none" width="391" height="218"
			poster="video.png">
			 <source src="video.webm" type='video/webm' />
			 <track kind="captions" src="video.vtt" srclang="en" label="English" default />
		</video>			
	</div> 
</body>

</html>

The “controls” displays the video controls such as the play button. Preload gets content whenever the page loads. The width and height are the dimensions of the video player in pixels.

The “poster” is the image file that is displayed when the video is unavailable. The source type is the mime type of the video. The “src” attribute specifies the location on the file.

The track kind is the type of timed text such as the captions. The label is the title of the text track. The “srclang” is the track language. A preferred track can be chosen as the default text track.

How to Use:

    Open Browser

  • Wait for video to load.
  • Click the play button.

Demonstration:

Ojambo.com HTML5 Video Tag Tutorial

Ojambo.com HTML5 Video Tag Example

Conclusion:

HTML5 video tag supports optional attributes such as width and height. Multiple text tracks can be added to the video. Text tracks can be defined in different languages.

The HTML5 specification has not be finalized, but the HTML5 video tag can be used today.

    Recommendations:

  1. Choose a preferred text track using the default attribute.
  2. Files can be hosted remotely and specified using the src attribute.
  3. Add a poster image in case the video loads slowly.