JavaScript Video Player for HTML5 Streaming – Create or Choose Best?

Early video playback on the web mostly required the use of either installing third-party plugins like Flash or Silverlight. At that time, there was no single versatile solution to stream video on all browsers. Not having a plugin won’t let the users play video on the web as plugins are used to render the video file. At this point, much research was happening to provide a no-plugin-based HTML and javascript video player.

To bring versatility, WHATWG (Web Hypertext Application Technology Working Group), on 10 April 2007, joined hands with the Mozilla Foundation, Apple, and Opera Software to begin working on HTML5. This new version of the HTML standard included other web elements like video and audio playback natively. This standard is now commonly known as HTML5 and is the most versatile solution available for video playback. Adding javascript makes the player behavior ubiquitous across various browsers by replacing standard controls with complex and advanced ones. In many cases, it is also possible to add video piracy protection to your videos by using advanced and secure video players.

What is a JavaScript Video Player?

As we discussed the empowerment of < video > HTML tag with the use of javascript, the easiest and most versatile way to accomplish that is using Javascript API. This javascript API is available for < video > tag and gets support through the browsers. All the popular players use this Javascript API to add homogeneous customizations to the HTML5 player for different browsers. The javascript API can be used by placing javascript code in the HTML document or by loading the js file from some CDN or cloud access. This code uses the media elements and available methods, properties, and events to add alterations and additional functionality to the basic player.

The < video > tag, in combination with the use of javascript, becomes powerful enough to contain features such as seek, pause, play, captions, switching video quality, and many more. Players can also be coupled with in-HTML CSS or cloud-hosted stylesheets to change the player’s display presets. Moreover, javascript is self-sufficient to make most of the inclusions, and the combined is more often called a javascript video player. We will discuss some technicalities related to javascript API, like elements, methods, properties, etc, and then we will start with the implementation. We will be discussing the addition of basic features through the javascript API, but complex solutions can also be written by combining other available API features.

Why Do You Need A JavaScript Video Player?

The use of flash for web playback is now nearly replaced by video playback using < video > tag. It is supported by most browsers and can play multiple video formats. The main issue with the < video > tag playback is varied rendering. This happens due to the rendered video player’s dependence on the browser for the requested playback. On some browsers, the user will be able to access basic controls; on others, they might find some missing. This generates inconsistent user experience. To handle this issue, < video > element is empowered by using javascript to control the player’s interface by placing custom video controls in the javascript code instead of using the browser’s default. You can place this javascript code in the HTML document or even call it as a JS file from some CDN.

How To Secure Content with JavaScript Video Player?

Any video player requires security if the media content is suspected to be pirated. The hackers have gone so smart that they easily crack basic encryption by revealing the encryption key through easy to medium hacks. You should encrypt via the best algorithm available in your time and, with that, also use the best key exchange management system. These two requirements plug 99% of the piracy cases, leaving apart the screen recording, which requires additional watermarking features.

You can also find javascript codes like the one below to encrypt and decrypt your video files, but they all have to use a “key” parameter.

var encryptor = require('file-encryptor');
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) {
});

This “key” parameter brings us to one more piece of information: “keys” can only be secured if you control the hardware or OS, and that is only possible if you are the hardware or OS provider. In today’s world, most media devices and browsers are controlled by Apple and Google. That is the reason if you are looking for video security, their help is required. The best way to achieve that will be to acquire Google Widevine and Apple Fairplay licenses and set up a DRM server. Also, DRM solution providers like Vdocipher provide multi-DRM services at the most affordable cost, saving you a lot of coding trouble and capital investment.

Multimedia Elements accessible via JavaScript

Before dealing with the use of HTML5 < video > tags and their customizations via javascript, let us know a bit more about multimedia elements. A video file is a container or a Multimedia container format containing different video data like audio, subtitles, metadata, etc. The multimedia container is then compressed with an algorithm or codec like mp4. In most cases, the recent versions of browsers are now compatible with video tags and provide format support to the following.

• .webm extension
• .mp4 extension
• .ogg extension

The < video > tag acts like a < img > tag for displaying an image on the frontend. You can playback multiple supported formats and control the JS player via attributes and for homogeneity via javascript. This < video > tag also provides various APIs like play, pause, change the speed, or seek during video playback and these APIs are directly accessible via javascript. The JS players we usually see, like videojs and other open-source alternatives, have complex javascript to make the rendering common to all viewers. For example, features like switching between video quality and support for multi-language captions are the evolved and necessary demands of today’s world.

The Media Elements which API provides can be categorized as,

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

How to build a custom JavaScript video player for streaming?

Two categories of the workflow are required for creating a custom javascript video player. One controls the player, and another instantiates those controls with some added HTML elements. Let us discuss both with examples,

Control player’s video with JavaScript

There are 3 methods to control media elements via JavaScript API, they are:

• play() to start or restart playing of media file
• pause() to stop playback at the current location
• load() allows substituting the active video in the player with another

As a method, like functions of an object, to execute them, you need to identify the video through the document.getElementById(id) and then instantiate the method with the dot notation.

For example:

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

myVideoObject.play()
myVideoObject.pause()
myVideoObject.load()

In addition, as objects, video elements also have several properties, like,

• currentTime : time at a given time in seconds
• duration : duration of the video file in seconds
• volume : volume level between 0.0 and 1.0

For example:

console.log (myVideoObject.currentTime);
console.log (myVideoObject.duration);
console.log (myVideoObject.volume);

Create controls in HTML5 javascript video player

Using the javascript API’s methods and properties associated with < video > tag, we can easily add custom html5 video controls in place of standard controls by the browser. In the previous section, we discussed using the play, pause, and load method directly with a video object. In that case, the code acts as instantiated, and repeating requires another instantiation. To make it user-friendly, we use HTML handles that can run that code for you. These handles can be buttons, clickable SVGs, or any other interactive HTML element. For example, we will create buttons to access play and pause methods through a button handler. These HTML buttons will access the API through javascript and will enable the required feature.

// 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 ();
}

Note: For complex operations, you will have to combine functions of various methods and arrange them in logic to form a complex function.

Adding a Video in JavaScript with multiple sources and subtitles

We have now understood the controls and handler, but adding dynamic information through an API can also be fulfilled through javascript. Media Source Extensions and Source Buffers are used for advanced features to recalibrate the audio and video files separately, etc.

The < video > tag can also be created using a document.createElement(“video”), and then its attributes like source, controls, etc., can be modified. We will discuss an example of creating a video element and modifying it to add multiple sources and subtitles.

// HTML code

<div id="myVideoObject"></div>

// JavaScript code:
var video = document.createElement ("video");
vc.controls = true;
var source1 = document.createElement("source");
source1.src = "video.mp4";
var source2 = document.createElement("source");
source2.src = "video.ogg";
var track1 = document.createElement("track");
track1.kind = "subtitles";
track1.src = "subtitles_en.srt";
track1.label = "English";
track1.srclang = "en";
track1.type = "text/srt";
var track2 = document.createElement("track");
track2.kind = "subtitles";
track2.src = "subtitles_es.srt";
track2.label = "Spanish";
track2.srclang = "br";
track2.type = "text/srt";
vc.appendChild(source1);
vc.appendChild(source2);
vc.appendChild(track1);
vc.appendChild(track2);
cc.appendChild(video);

// Output HTML
<video controls = "">
<source src = "video.mp4">
<source src = "video.ogg">
<track kind = "subtitles" src = "subtitles_en.srt" label = "English" srclang = "en">
<track kind = "subtitles" src = "subtitles_es.srt" label = "English" srclang = "es">
</video>

Note: For complex operations, you will have to use multiple handles, combine functions of various methods, and arrange them in logic to form a complex function.

Best JavaScript or JS video player

There are many javascript players in the market, and many are even open source. Thus, the important decision here of choosing the best one is dependent upon the features it provides. It also depends on your use case; for example, if security is your concern, a secure video player will be the only choice.

VdoCipher – Secure Video Player

VdoCipher provides a JavaScript video player for HTML5 playback with the added advantage of DRM encryption to secure videos from being illegally downloaded. As discussed in the need of security section, the “key” parameter can only be secured if you are in control of the hardware or OS, and that is only possible if you are the hardware or OS provider. In today’s world, most media devices and browsers are controlled by Apple and Google. That is the reason if you are looking for video security, their help is required. VdoCipher is already a partner with Google Widevine and helps you set up a multi-DRM setup for secure video playback. In addition to DRM, VdoCipher also adds a layer of dynamic watermarking and a safety net to deter rooted devices and compromised apps from hacking and screen capture. We’ve also written a blog on how to stream videos on iOS using AVPlayer, do check it out to know more about video streaming in iOS.

Apart from security, VdoCipher smart player has all many more customization features, like,

• Enable Caption Search
• Multi-Language Subtitles
• Adaptive Bitrate Streaming
• Show Progress Bar
• Show Scrubbing Preview
• Auto Resume
• Enable Keyboard Shortcuts
• Primary Color change via Hex color code
• Show Time Text
• Show Quality Control
• Hide Controls on Pause
• Lock Controls
• Enable Save Offline

VideoJS

Video.js is an HTML5 web video player which supports modern streaming file formats such as MP4 and WebM, as well as YouTube, Vimeo, etc. It also supports adaptive bitrate streaming formats like HLS and DASH. It is designed to keep the styling customizations open, thus having a consistent base to build on top of, and can be easily modified with a little bit of extra CSS. This open-source project which was started in mid-2010, supports not only desktop devices but also mobile devices. Users can also use plugin architecture with documentation support to add additional functionalities to the player. The VideoJS community also has hundreds of skins and plugins built-in to be installed for Chromecast, IMA, VR, etc.

Plyr

Plyr is a simple, lightweight, and customizable HTML5 Video player with YouTube and Vimeo media playback support. It is supported on all modern browsers with full VTT captions, responsiveness, monetization options, HLS streaming and playback, API support, keyboard shortcuts, Picture-in-Picture, speed controls, and much more. YouTube and Vimeo playback is supported and functions much like an HTML5 video.

Projekktor

Projekktor is a free and open-source (GPL) HTML5 web video player written in Javascript. It acts similarly for cross-browser player compatibility issues and provides ubiquitous behavior across devices. This HTML5 video player automatically detects the best way to play your favorite video with its impressive and attractive styling elements. You can use the player for your live streaming platform and integrate Pre- & Postroll Ads, build playlists of your videos, stream multiple channels, Youtube HTML5 support, easy to integrate, theme customization, and also comes with Unified Javascript API.

Xgplayer

Xgplayer is an HTML5 video and audio player library designed with separate and detachable UI components. The UI layer is very flexible and has multiple good functionalities for improving video loading, buffering, and multiple file format support for video dependence. It provides features to load control, seamless switching without artifacts, and Adaptive bandwidth for video bandwidth savings. Xgplayer also provides support for plugins which can be divided into two categories: one is self-starting, and another inherits the player’s core class named xgplayer. The official plugins are self-starting, and the packaged third-party libraries get inherited.

FAQs

Can you play mp4 using a JavaScript player?

MP4 file format or MPEG-4 playback is supported by all browsers and is also gets used in video cameras and other video media Hardware. This format was developed by the Moving Pictures Expert Group. This is also the most recommended format by YouTube.

Is it possible to stream audio via a JavaScript player?

Yes, audio can be streamed on a javascript player and can also be separated from the video for handling buffers or adding additional capabilities via javascript.

Can JavaScript handle video piracy through encryption?

JavaScript allows you to use various libraries to encrypt files through aes256 and other algorithms, but this is only partially secure. You need a dynamic key exchange mechanism and encryption like DRM for the best video protection.