Ojambo

HTML5 Video Tag

Written by

Edward

in

Revised 3 min, 20 sec read

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.

🚀 Recommended Resources

Disclosure: Some of the links above are referral links. I may earn a commission if you make a purchase at no extra cost to you.

About Edward

Edward is a software engineer, author, and designer dedicated to providing the actionable blueprints and real-world tools needed to navigate a shifting economic landscape.

With a provocative focus on the evolution of technology—boldly declaring that “programming is dead”—Edward’s latest work, The Recession Business Blueprint, serves as a strategic guide for modern entrepreneurship. His bibliography also includes Mastering Blender Python API and The Algorithmic Serpent.

Beyond the page, Edward produces open-source tool review videos and provides practical resources for the “build it yourself” movement.

📚 Explore His Books – Visit the Book Shop to grab your copies today.

💼 Need Support? – Learn more about Services and the ways to benefit from his expertise.

🔨 Build it Yourself – Download Free Plans for Backyard Structures, Small Living, and Woodworking.

View all posts | Website

Comments

One response to “HTML5 Video Tag”

More posts