5 Open Source HTML5 Video Players for 2019
When HTML5 introduced the <video> and <audio> tags, they made your media files genuinely accessible to the Internet. HTML5 videos are fast replacing Flash Player and other similar third-party media players. Historically, it’s been quite a cumbersome process to get media to play correctly. Often the <embed> and <object> tags would need to be used which would assign an extensive list of parameters to get the media playback working.
The difference with HTML5’s audio and video tags is that they consider the files as images. Attributes like height, width and autoplay can be defined in the tags similar to any other HTML element –
<video src=”url” width=”640px” height=”380px” autoplay/>Shared in Bit’s blog
Bit turns UI components into building blocks you can share, discover and develop in any project. It’s open source, so feel free to give it a try.
Why Choose an Open Source Player?
Open source video players offer some advantages over players developed with proprietary software. Many businesses and individual users prefer to go the open source route as it does away with the procurement barrier.
Video players built with proprietary software use private source code and is offered via licensing where users need to pay for and agree to the different terms and conditions before being able to use the player.
Given the vastly improved scrutiny around security, the availability of patches and bug fixes, open source video players are free to use without licensing fees and cumbersome, contracts. Some additional benefits include -
Free To Use
Open source media players are entirely free for the general public to download and use. Even the source code can be reviewed and evaluated. Some open source media player vendors include a free version of their software packages for trial purposes which also consists of the source code.
Few Bugs and Fast Fixes
Popular open source video players have thousands of people looking through the code; therefore, there is a much higher chance of a bug being identified than compared to a proprietary media player where the developer organization would have a far smaller IT staff. Additionally, open source communities are usually much quicker to develop and implement a fix, patch or a workaround.
The potential for Customization
Open source video players can be customized and modified to meet the specific requirements of the organization or individual. On the other hand, with proprietary video players, the most you can do is submit feature requests and enhancements that would better align with your needs. It is up to the developer organization to consider them or not.
Free and Instantaneous Support
When it comes to open source video players, irrespective of whether it is currently in the evaluation stage or is being integrated commercially, its global community of developers and users are always available to answer questions and give advice. This support can include detailed documentation, wikis, newsgroups, forums, email lists as well as live chat. All of which is absolutely free.
Top 5 Open Source Players
In this section, we have compiled a list of 5 open source HTML5 media players that we feel are among the top open sources players available today.
Plyr
Plyr is a customizable and straightforward HTML5, Vimeo and YouTube media player. It is lightweight, accessible and customizable and supports all modern browsers. You can access the complete source with NPM using npm install plyr.
Here are some code samples for HTML5 Audio and Video -
HTML5 Audio
<audio id=”player” controls>
<source src=”/path/to/audio.mp3" type=”audio/mp3">
<source src=”/path/to/audio.ogg” type=”audio/ogg”>
</audio>HTML5 Video
<video poster=”/path/to/poster.jpg” id=”player” playsinline controls>
<source src=”/path/to/video.mp4" type=”video/mp4">
<source src=”/path/to/video.webm” type=”video/webm”>
<! — Captions are optional →
<track kind=”captions” label=”English captions” src=”/path/to/captions.vtt” srclang=”en” default>
</video>Video.js
A web video player specifically built for HTML5, Video.js supports HTML5 and Flash video in addition to Vimeo and YouTube. Playback on the desktop and mobile devices is also supported. Started in 2010, Video.js is now actively used on ~200,000 websites.
A free to use CDN hosted version of Video.js is available publicly. You need to add the following tags to your document’s <head>:
<link href=”//vjs.zencdn.net/7.0/video-js.min.css” rel=”stylesheet”>
<script src=”//vjs.zencdn.net/7.0/video.min.js”></script>Using Video.js is as easy as creating a <video> element, but with an added data-setup attribute. This attribute must, at a minimum, have a value of ‘{}’, but it can include any Video.js options as long as it contains valid JSON as shown below-
<video
id=”my-player”
class=”video-js”
controls
preload=”auto”
poster=”//vjs.zencdn.net/v/oceans.png”
data-setup=’{}’>
<source src=”//vjs.zencdn.net/v/oceans.mp4" type=”video/mp4"></source>
<source src=”//vjs.zencdn.net/v/oceans.webm” type=”video/webm”></source>
<source src=”//vjs.zencdn.net/v/oceans.ogv” type=”video/ogg”></source>
<p class=”vjs-no-js”>
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href=”http://videojs.com/html5-video-support/” target=”_blank”>
supports HTML5 video
</a>
</p>
</video>Once the page loads, Video.js will automatically setup a player once it locates this element.
Afterglow
Afterglow is a tool used to create fully responsive video players from different HTML5 video elements with minimal effort.
It has a very simple initialization process and supports different qualities -
!DOCTYPE html>
<html>
<head>
<title>afterglow player</title>
<script type=”text/javascript” src=”//cdn.jsdelivr.net/afterglow/latest/afterglow.min.js”></script>
</head>
<body>
<video class=”afterglow” id=”myvideo” width=”1280" height=”720">
<source type=”video/mp4" src=”/path/to/myvideo.mp4" />
</video>
</body>
<html>MediaElement.js
MediaElement.js is a HTML5 is a <video> or <audio> player with Flash and Silverlight that imitates the HTML5 MediaElement API and allows for a consistent UI across browsers.
Rather than offer an HTML5 player to modern browsers and a standalone Flash player to older browsers, MediaElement.js provides an upgrade with custom Flash and Silverlight plugins imitating the HTML5 MediaElement API.
A complete guide to install MediaElement.js is available at Installation with a brief on creating and using instances of MediaElement available at Usage. For any additional features, you can refer their GitHub repository.
jPlayer
jPlayer is a free open source, media library written in JavaScript. jPlayer allows you to rapidly weave cross platform audio and video into your web pages via a jQuery plugin. Its comprehensive API supports innovative media solutions while support is provided by jPlayer’s active open source user and developer community.
jPlayer has a good package for PHP that you can install using composer. You will need to add the following lines to composer.json to your project:
// …
“require”: {
// …
“happyworm/jPlayer”: “2.*”
// …
}
// …
“config”: {
“component-dir”: “your/desired/asset/path”
},
// …Once done, you can execute the following:
php composer.phar updateComposer will now download all components and install the needed files into the specified path.
Additional Video Players You Should Know About
In case you are interested, here are some of the best non-open source HTML5 video players available today that deserve a mention –
Cloudinary
This HTML5 video player by Cloudinary is primarily aimed for businesses and enterprises. It is optimized to provide the best in class viewer experience and supports high-resolution videos and adaptive streaming.
However, Cloudinary video player stands out from the rest because it offers video encoding, manipulation and hosting service for your video assets. The video transformations happen at the player level and happen on the fly. It contains lightweight and easy to use embed codes which allow for simple integration to an organization’s website.
Cloudinary’s inbuilt video analytics provides real-time actionable data on viewer interaction with videos and reports videos performance in terms of conversion rates.
JW Player
JW Player has expanded its support to allow for HTML5 video playback. It is fully customizable, with response responsive HTML5 video and contains a wide range of exciting features from accessibility to analytics to full HTML5 video controls.
JW player is exceptional as an HTML5 video player for WordPress websites. It is also compatible as an alternate option for YouTube’s video player. JW Player also lends support to a range of user-defined themes. Its numerous plug-ins are consistent with the more popular CMSs making integration relatively easy and quick.
Kaltura HTML5 Video Player
Kaltura Player is a free, open source HTML5 video player used to create multiple customized inter-device and inter-browser skins to match or complement your website. Some key features include:
- Multi-Platform Support
- Efficient, All Round Performance
- Advertising & Analytics Support
Conclusion
Without a doubt, there is a wide gamut of HTML5 video players available in the market today — both open source, as well as proprietary. The answer lies in finding the appropriate video player that meets all your requirements.
Probably, the last situation you want to find yourself in is using an unnecessarily bloated solution, or even worse, being unable to execute what you set out to accomplish.
