UI Development

10 Javascript libraries to work with videos

HTML 5 video player offers easier way to play videos on the browser using ‘video’ tag. Earlier one need to install flash player to stream videos. HTML 5 video players are replacing flash player to meet the needs of modern web browsers. Custom video players offer more features such as control over video display, playback options, addressing cross browser issues, accessibility and so on. This blog talks about 10 best java script video players to work with. Most video players use HTML 5 video tag, pass on additional attributes to work with.

sample HTML 5 video tag

<div class="container-fluid">
Hello, Welcome!
html5 Video Player Demo
<video width="400" controls>
<source src="img/mov_bbb.mp4" type="video/mp4">
<source src="img/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>

Video.js

Video.js is a free and open source video player for HTML5. It supports HTML5 video, YouTube, Vimeo and even flash(through plugins). It supports playback options in desktop and mobile. This player also allows video playing on old IE version and can also support google analytics tracking.

To get start with Video.js one can use either CDN link or via npm.

<link href=”//vjs.zencdn.net/7.0/video-js.min.css” rel=”stylesheet”>
<script src=”//vjs.zencdn.net/7.0/video.min.js”></script>
 
For IE older version support, use this
<script src=”https://vjs.zencdn.net/ie8/1/1/2/videojs-ie8.min.js”></script>
 
$npm install –save-dev video.js

Video tag can be directly used for playing video, having class name as ‘video-js’.

<video id="my-videojs-video" class="video-js" controls preload="auto"
width="640" height="264" poster="img/green-nature.jpg" data-setup="{}">
<source src="img/mov_bbb.mp4" type="video/mp4">
<source src="img/mov_bbb.ogg" type="video/ogg">
</video>

Once the page is loaded on the beowser, video element will automatically be applied with Video.js player with default skin. config options can also be passed to player in constructor.

var player = videojs('my-video', {
autoplay: 'muted'
});

Since video player built on top of HTML and css, this can be easily customized to suit user requirements. Video.js offers more configuration options such as auto play, responsive layout, aspect ratio, inactivityTimeOut etc.

Plyr

Plyr is a simple, light weight HTML5 video player.  It also offers support for YouTube and Vimeo players. Some of its features are accessibility, picture in picture, monetization, full support for captions and screen readers. Plyr offers several customization options like responsive, full screen, shortcuts, i18N support etc. To get started with Plyr, CDN links can be used.

<link rel="stylesheet" href="https://cdn.plyr.io/3.5.10/plyr.css" />
<script src="https://cdn.plyr.io/3.5.10/plyr.js"></script>
 
<video poster="/img/green-nature.jpg" id="player" playsinline controls>
<source src="img/mov_bbb.mp4" type="video/mp4">
<source src="img/mov_bbb.ogg" type="video/ogg">
</video>

To play more with Plyr video player, instance can be created using Plyr constructor.

<script>
const player = new Plyr('#player');
</script>

Video playing config options can be passed as JSON in Plyr constructor function or in data-plyr-config attribute for video element.

Afterglow

Afterglow is a fully responsive HTML5 video player. Its very easy to integrate and configure with in the web page. This player works on all major browsers, devices and even supports IE down to IE9 which makes it cross browser compatible. It can also play videos hosted by YouTube and Vimeo as well. Some of its features are responsive, resolution switching and drop-in replacement. In code sample CDN link is been used. This player works with video tag.

<script src="//cdn.jsdelivr.net/npm/afterglowplayer@1.x"></script>
 
<video class="afterglow" id="afterglow-video" width="640" height="264">
<source src="img/coverr-bird-walking-on-the-beach-1578584793241.mp4" type="video/mp4">
</video>

Once the player is loaded on the page, its API can be accessed using ‘afterglow’ keyword. We can use player instance to get more video details such as ‘duration’, ‘remainingTime’.

<script>
var myplayer = afterglow.getPlayer('afterglow-video');
myplayer.pause();
</script>

Explore Afterglow player documentation for its API and more config options.

jPlayer

jPlayer is a free, open source lightweight HTML5 player. It allows quick weaving of cross-platform video and audio into web pages. it supports both HTML 5 video and flash videos. Features of jPlayer include easy installation, comprehensive documentation, extensible architecture and cross browser support, custom skinning options and so on. To use jPlayer, either CDN link can be used or clone it from GitHub. jPlayer node package is also available, can also be installed using npm.

Below example has used CDN link to include jPlayer. Placeholder element will be added in HTML, which will be instantiated by jPlayer plugin.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/skin/blue.monday/css/jplayer.blue.monday.css">
 
<div class="container-fluid">
Hello, Welcome!
html5 jPlayer Video Player Demo
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1">
<a href="#" class="jp-play">Play</a>
<a href="#" class="jp-pause">Pause</a>
</div>
</div>
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
title: "Big Buck Bunny",
m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",
webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm",
poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
});
},
swfPath: "http://jplayer.org/latest/dist/jplayer",
supplied: "webmv, ogv, m4v",
size: {
width: "640px",
height: "360px",
cssClass: "jp-video-360p"
}
});

with this jPlayer will apply all necessary functions on the placeholder div element and video gets displayed on the browser. jPlayer object itself can be accessed for other API functions.

var jp = $('#jquery_jplayer_1'), jpData = jp.data('jPlayer');

MediaElement.js

MediaElement.js is a fast and amazingly powerful HTML 5 audio and video library. It also supports YouTube, Vimeo and Daily Motion. Unlike other video players which used flash as fallback for old browsers, MediaElement.js uses same video player for all browsers. Some of its features are standard play controls, full screen video display and skinning. There are several ways to get start with MediaElement.js, it can be cloned from GitHub, use CDN link or through npm or bower. Below sample code example uses CDN link.

<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.16/mediaelement-and-player.min.js"></script>

HTML 5 video element can be directly used by adding class ‘mejs__player’ to video tag. All the player configurations can be added through ‘data-mejsoptions’ attribute.

<div class="container-fluid">
 
            Hello, Welcome!
 
            MediaElement.js plugin Demo
 
            <video width="320" height="240" class="mejs__player"
 
                data-mejsoptions='{"alwaysShowControls": "true"}'>
 
                <source src="img/mov_bbb.mp4" type="video/mp4">
 
            </video>
 
    </div>

If not in tag, mediaplayer can be instantiated and player can be used for all API related functions.

<script>
$('#mediaplayer').mediaelementplayer({
success: function(player, node) {
// do things
player.addEventListener('ended', function(e){
alert('ended');
});
alert('success');
}
});
</script>

YouTube Player

YouTubePlayer is HTML 5 based video player and is very easy to use. To play YouTube videos on any browser, videos need to be embedded using an iFrame. Accessing YouTube API needs key to be obtained from account. it supports all formats and work on all modern browsers. To get start with YouTube API, include URL in head tag along with key. Placeholder element is needed to embed YouTube videos.

https://www.googleapis.com/youtube/v3/videos? key=api_key
 
<h1>YouTube Player Embed API</h1>
<div videoID="9iGA6xy15W4" startTime="1330" endTime="1466"
height="309" width="550" id="my-yt-player">
</div>

We have YT ready function to determine whether YouTube player is ready to use. Its time to instantiate player for our place holder element for further use.

var player = new YT.Player('my-yt-player', {
videoId: video_id,
'autoplay': 1,
'loop': 1,
'rel': 0,
playerVars: {
'controls': 1,
'showinfo':0,
'enablejsapi':1 ,
'rel':0,
'playsinline': 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});

Ckin Player

Ckin video player is pure JavaScript based player. This player is very easy to use and can be customized. To get start with Ckin video player, clone it from GitHub and start using it. HTML 5 video element can be used to work with this player.

After cloning from GitHub, include css in head and js in body at the end. Once the page loads, ckin will automatically be applied for video element.

<link href="./css/ckin.css" rel="stylesheet" />
 
<script src="./js/ckin.js"></script>
 
<div class="container-fluid">
Hello, Welcome!
Ckin Video Player Demo
<video width="400" data-overlay="1" data-title="ckin video player"
data-color="#ff0000">
<source src="./img/mov_bbb.mp4" type="video/mp4">
<source src="./img/mov_bbb.ogg" type="video/ogg">
</video>
</div>

vLite

vLite is a light weight native player built using JavaScript. It supports playing native videos as well as YouTube videos. This player is fully compatible with popular modern browsers.

To start using vLite Player, clone it from GitHub and start using it. Include css file in head tag and js in body tag.

<head>
<link rel="stylesheet" href="./css/vlite.css">
</head>
 
<script src="./js/vlite.js"></script>

HTML 5 video tag can be used for playing both native and YouTube videos on browser. Additional data attribute need to be passed on to video tag for YouTube Video.

<div class="container-fluid">
Hello, Welcome!
VLite Video Player Demo
<video id="demo" class="vlite-js" src="./img/ckin.mp4"> </video>
<video id="demo" class="vlite-js" data-youtube-id="ICanFGTsW8c"> </video>
</div>

As shown in above example, embedding YouTube video is very simple, it can be achieved by simply passing video Id as data attribute.

vLite video player options can be passed in two ways, one as data options attribute in video tag, other through vLite constructor.

<script>
var playerHtml5 = new vlitejs({
selector: '#demo',
options: {
// options here
}
});
 
</script>

This player instance can be used for all other events.

Flowplayer

Flowplayer is an extremely simple video player designed for creators who wish to include video playback on their websites. Integrating Flowplayer is very simple. Flowplayer is primarily aimed at users who host video files independently. Flowplayer is very easy to customize as well as skinnable.  Some of its features are subtitles support, modifying the playback speed, including video analytics and monetization.

To get start with Flowplayer, CDN links can be used. Flowplayer is licensed, key is needed to use its API and is obtained from account. Create placeholder div, instantiate the same.

<link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/stable/style/flowplayer.css">
<script src="//cdn.flowplayer.com/releases/native/stable/flowplayer.min.js"></script>
 
<div id="player_container"></div>
 
<script>
flowplayer('#player_container', {
src: 'my_video.mp4',
token: '<my_token>'
})
</script>

JW Player

JW Player was mostly used for flash video players, now it supports HTML 5 videos. It is fully responsive and customization is very simple. Some of its features are analytics support, video controls, 360 video VR and monetization. This player supports user defined themes by configuring player. JW player is licensed and need a key to use this on web pages.

To get start with JW player, create placeholder element in HTML, later the placeholder can be instantiated using JW player.

https://cdn.jwplayer.com/libraries/{key}.js
 
<div id="myElement"></div>
 
<script type="text/JavaScript">
 
jwplayer("myElement").setup({
playlist: "https://cdn.jwplayer.com/v2/playlists/xxxxYYYY"
});
 
</script>

Conclusion

HTML 5 video players are fast to use and safe and there are many video players available to choose both open source and licensed. Each video player is best in its own way and offers lot of features to choose right from cross browser compatibility to themes and analytics. Choosing best video player is entirely dependent on requirements.

References

https://videojs.com/
https://plyr.io/
https://afterglowplayer.com/
http://jplayer.org/
http://www.mediaelementjs.com/
https://developers.google.com/youtube
https://hunzaboy.github.io/Ckin-Video-Player/
https://yoriiis.github.io/vlitejs/
https://flowplayer.com/
https://www.jwplayer.com/

 

About The Author