Using HTML Video Controls and Elements for HTML5 Video Streaming

Earlier playback of videos was possible through the use of plugins like Adobe Flash or Silverlight. This was due to no native support for video playback through browsers, thus requiring third-party video and audio plugins. This issue was addressed by a consortium of major browser vendors like Apple, Google, Mozilla, and Microsoft to recommend an update to HTML markup. HTML5 was then introduced with the support of < video > and < audio > HTML elements, HTML video controls, and even a Javascript API to enhance their use for complex integrations. This made the HTML5 video streaming native to most browsers.

Nowadays, third-party HTML5 players use javascript to create and modify HTML video elements and controls for advanced looks and features. This javascript is mainly provided as a CDN-hosted JS file with the iframe URL of the video or audio file. This is not only done to add features but majorly to make the appearance and functionality of the player consistent for all browsers. Otherwise, the default looks and functionalities of playback vary across browsers.

Introduction to HTML5 Video Streaming

HTML5 markup language was first introduced to the public on 22 January 2008. It was the fifth and final major HTML version update as per World Wide Web Consortium(W3C) recommendation. This markup is used to structure and define rules for displaying content on the Internet as web pages. It is currently maintained by a consortium of major browser vendors like Apple, Google, Mozilla, and Microsoft called Web Hypertext Application Technology Working Group (WHATWG). The main goals of the HTML5 update were to support HTML5 video streaming through HTML video controls and elements, easy readability and backward compatibility.

It lets the web browsers and parsers consistently understand the defined markup, thus allowing better readability for humans and software. HTML5 processing models are more capable of extending the use of markup and also allows the use of APIs for complex web applications. The cross-platform infrastructure allows low-end devices and browsers to perform smoothly for enhanced user experience.

To add support for HTML5 video streaming, many new HTML multimedia elements like < video >, < audio > and < canvas > were introduced. They were introduced with additional features like that of Javascript API to add more interactivity and control over the HTML elements and handle. This makes the HTML5 streaming package more powerful and ubiquitous than flash players. You can make customizations to the video or audio stream, change the playback appearance, and even apply mathematical rules for computation. Apart from streaming, HTML5 also focused on semantics and introduced elements like <section>, <header>, <footer>, <article>, <aside>, <nav>, and <figure> for basic web page structuring and SEO.

What is an HTML Video Element?

< video > element was added to add support for HTML5 video streaming in all browsers supporting HTML in 2008. It was introduced with additional features like that of Javascript API to add more interactivity and control over the HTML elements and handle. The use and classification of the attributes have been discussed later, but here is the basic anatomy of a < video > tag syntactically,

< video src=”video.webm” type=”video/webm” controls >

< /video >

Or

< video controls >

< source src=”movie.mp4″ type=”video/mp4″ >

< source src=”movie.ogg” type=”video/ogg” >

< /video >

Note: < source > tag is an empty tag. There is no need to close it except in the case of XHTML.

Video Element Optional HTML Attributes

An < video > element contains the following attributes that are frequently used. Other event-based and global attributes have also been discussed with their use.

Attribute	Value	Description
controls	controls	Specifies the display of video controls like play,pause,seek, etc as symbols.
src	URL	Defines the URL of the video file
poster	URL	Image url defined here acts as an image to be displayed before the playback starts
autoplay	autoplay	Used to start the video playback as soon as it is gets loaded to stream
muted	muted	Mutes the audio output of the video as default
loop	loop	Defines that every time a video gets finished, it will start over again.
preload	auto metadata none	the value signifies how the video should be loaded when the web page starts loading
height	pixels	Defines the height of the video player
width	pixels	Defines the width of the video player

Video Element compatible Global Media Events HTML Attributes

The < video > tag also supports Global HTML Attributes and Events attributes triggered by media like videos, images, and audio. The following Media Events attributes apply to all HTML elements but are most commonly used with media elements, like <audio>, <embed>, <img>, <object>, and <video>. These event-based attributes trigger a javascript attached with the specific attributes, and a javascript’s next styling, calculation, etc steps get performed. That is why the value these attributes require is a script.

Attribute	Value	Description
onplay	script	initiate a script when the media is ready to start playing
onpause	script	initiate a script when the media is paused either by the user or programmatically
onplaying	script	initiate a script when the media actually has started playing
onprogress	script	initiate a script when the browser is in the process of getting the media data
onseeked	script	initiate a script when the seeking attribute is set to false indicating that seeking has ended
onseeking	script	initiate a script when the seeking attribute is set to true indicating that seeking is active
onstalled	script	initiate a script when the browser is unable to fetch the media data for whatever reason
onsuspend	script	initiate a script when fetching the media data is stopped before it is completely loaded for whatever reason
ontimeupdate	script	initiate a script when the playing position has changed (like when the user fast forwards to a different point in the media)
onvolumechange	script	initiate a script each time the volume is changed which (includes setting the volume to “mute”)
onwaiting	script	initiate a script when the media has paused but is expected to resume (like when the media pauses to buffer more data)
onabort	script	initiate a script on abort
oncanplay	script	initiate a script when a file is ready to start playing (when it has buffered enough to begin)
oncanplaythrough	script	initiate a script when a file can be played all the way to the end without pausing for buffering
oncuechange	script	initiate a script when the cue changes in a <track> element
ondurationchange	script	initiate a script when the length of the media changes
onemptied	script	initiate a script when something bad happens and the file is suddenly unavailable (like unexpectedly disconnects)
onended	script	initiate a script when the media has reach the end (a useful event for messages like “thanks for listening”)
onerror	script	initiate a script when an error occurs when the file is being loaded
onloadeddata	script	initiate a script when media data is loaded
onloadedmetadata	script	initiate a script when meta data (like dimensions and duration) are loaded
onloadstart	script	initiate a script just as the file begins to load before anything is actually loaded
onratechange	script	initiate a script each time the playback rate changes (like when a user switches to a slow motion or fast forward mode)

What are HTML Video Controls?

We discussed the attributes of < video > element and here we will discuss basic controls as well as controls for customizations we want to place over the defaults of the player.

Basic Controls

Basic controls get initiated by using the controls attributes within the video tag. It is a boolean attribute and specifies the display of video controls like play,pause,seek, etc as symbols over the video player. It displays the following controls as per their availability.

• Play
• Pause
• Seek
• Fullscreen toggle
• Volume
• Alternate Audio Track (when available)
• Captions/Subtitles (when available)

Custom Controls

Custom controls are added via event based or optional attributes with the support of javascript. You can even make complex HTML handlers to initiate a calculated action of play, seek, etc by combining functions of various methods and arrange them in logic to form a complex function. Custom controls are also necessary to provide homogeneity across browsers via javascript. Here is a basic example of creating custom controls via HTML and Javascript API.

// Adding Video Tag with multiple source

<video id = "myVideoObject">

<source src = "1920x1080.mp4">

</video>

 

// Adding the HTML buttons with ID

<button id = "playButton"> Play </button>

<button id = "pauseButton"> Pause </button>

 

// Adding the JavaScript to identify HTML elements

var myVideoObject = document.getElementById ("myVideoObject");

var playBtn = document.getElementById ("playButton");

var pauseBtn = document.getElementById ("pauseButton");

 

playButton.onclick = function () {

myVideoObject.play ();

}

 

pauseButton.onclick = function () {

myVideoObject.pause ();

}

Need of HTML Video Elements and Controls

Earlier, if you were to copy the video playback code of a video from YouTube, it used to be a < object > tag and used to look like this,

<object width="720" height="480">

<param name="movie" value="https://www.youtube.com/v/8FHI1AUFJKk&hl=en_GB&fs=1&"></param>

<param name="allowFullScreen" value="true"></param>

<param name="allowscriptaccess" value="always"></param>

<embed src="https://www.youtube.com/v/8FHI1AUFJKk&hl=en_GB&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>

</object>

It was a generic container for foreign objects like Flash movies. Browsers were more compatible with the < embed > tag to handle inconsistencies in the display styling. The object tag within the embed code used to carry various parameters but due to browser compatibility issues, the results were often a disrupted or unreadable player option. The plugins like flash and silverlight also inherited these issues and were not always able to match the browsers specifications due to being different technologies.

The HTML5 < video > element came as a good but not perfect fix for all these issues in 2008. It bought too many attributes and also the support of javascript API to handle dynamic controls over the player.

About Controls:

The basic controls are required for easy navigation across the video playback and custom controls provide homogeneity in styling and features across the devices. Nowadays, all open source and third party HTML5 players provide attached javascript with their embed code so that the player remains constant across devices and browsers.

Role of Javascript API to trigger Video Controls

Before taking about the Javascript API, let us look at the categorization of Media Elements which API provides,

• Methods like play() for reading the media
• Properties like currentTime to obtain or modify some time properties
• Events like timeupdate to trigger specific behavior for specific media events

The role which Javascript API plays can also be divided into two parts, one is writing javascript to control the player through attributes, and another is to instantiate those javascript methods with some added HTML elements. The HTML5 Javascript API has methods, properties, and events for <video> element. These allow you to control and modify default capabilities of <video> element and player using JavaScript. You can use the API to play video, pause it and play again at specific time using play() and pause() API methods.

For example:

var myVideoObject = document.getElementById ("myVideo");

myVideoObject.play()

myVideoObject.pause()

Similarly as objects, video elements also have several properties and events, like,

• currentTime : time at a given time in seconds
• duration : duration of the video file in seconds
• onplay : initiate a script when the media is ready to start playing

Sample styling of HTML Video Controls

You can change the appearance of various controls like play, pause, volume, etc through basic CSS for controls like,

.controls {

visibility: hidden;

opacity: 0.8;

width: 720px;

border-radius: 1px;

position: absolute;

bottom: 10px;

left: 90%;

background-color: blue;

transition: 2s all;

display: flex;

}

.player:hover .controls, player:focus .controls {

opacity: 0.8;

}

This CSS can be placed directly in the HTML document or can be imported via cloud hosted css link.

Need of Security for HTML5 Video Streaming

HTML5 video playback in itself does not have any default security. The basic encryption can be smartly cracked using any hack and softwares. Apart from strong encryption, we need the best key exchange mechanism so that it cannot be retrieved by any unauthorized user. What is now left is screen recording which can be addressed by additional watermarking features.

There are many open source codes available to apply encryption on HTML5 video playback through javascript. For example, the below Javascript code encrypts and decrypts your video files through a third party library.

var key = 'SUPER-SECRET-KEY';

var options = { algorithm: 'aes256' };

encryptor.encryptFile('myVideoObject.mp4', 'encrypted.dat', key, options, function(err) {

});

encryptor.decryptFile('encrypted.dat', 'outputfile.mp4', key, options, function(err) {

});

You can notice the key parameter in the above code, these keys are best secured at the hardware or OS level, which in today’s time is controlled by Google and Apple. This is the reason why normal video protection via javascript often fails. For reliable video security, the best possible way is through Google Widevine and Apple FairPlay license and set up of a DRM server. To help secure your videos, multi-DRM platforms like VdoCipher offer complete infrastructure at affordable pricing, saving coding requirements and capital investment.

FAQs

Do controls like play, pause, volume, etc, appear as default with HTML video element?

No, they do not display as default and can only be visible if you use the controls attribute with the video tag.

Do I need a plugin for HTML5 video playback?

No, after the introduction of video tag for HTML5 video playback, third-party plugins like flash or Silverlight are not required.

Why to use a Javascript file with an HTML5 third-party or open-source video player?

It is not mandatory to use the javascript file accompanied by a player. Still, in that case, you miss out on the added features and styling for different browsers, usually provided for homogeneity. This is why most players include a JS file with their embedded code. This JS file can sometimes be used to add Video SEO to the page or for security purposes.