13 popular HTML5 video players for the Web
▲ Scan the QR code in the picture to learn more about the audio and video technology conference ▲
Translation: Alex
Technical review: Zhang Qi
This article is from OTTVerse and written by Krishna Rao Vijayanagar.
Easy-Tech #033#
When video streaming media is sweeping the communication world, in order to maintain and enhance the growth of users, content creators and streaming media service providers need to provide high-quality user experience. To achieve this, they all need to embed an HTML5 video player on their websites.
In this article, we will learn about the available HTML5 video players (including open source and commercial players).
HTML5 video players are often used to play videos on browsers such as Chrome, Edge, Firefox, Safari and other platforms that support HTML5 video playback, such as Samsung and LG TV. They can be configured as single-rate video streams (ordinary mp4 files), HLS, MPEG-DASH, HDS, etc. In addition, companies can also configure the HTML5 video player with DRM(Widevine, PlayReady or FairPlay), advertisement insertion using CSAI or SSAI technology, subtitles, data analysis and other functions.
Next, I will introduce 13 popular HTML5 video players (please note, in no particular order).
Before it’s too late, let’s get started!
1、VideoJS
VideoJS is the most popular free and open source HTML5 video player on the market. In 2010, it was developed from scratch and has become the basis of many open source and commercial players in the market.
In terms of playing form, VideoJS can be used for live broadcast and on-demand, and supports HLS, DASH, WebM and MP4 to play while downloading. In terms of appearance and style, VideoJS can be highly customized, and there are many skins to choose from in the open source community. Most important functions such as Multi-DRM, advertisement insertion, subtitles, etc. can be configured into the player through plug-ins. See https://docs.videojs.com/ for more complete functions and features of VideoJS.
Linkedin, The Guardian, Tumblr and many other high-traffic organizations and companies use the VideoJS player, which also proves that it is not only stable, but also being continuously improved, while ensuring adequate testing.
2、Shaka Player
Shaka Player is a very popular free and open source HTML5 video player. It can support adaptive bit rate streaming media protocols such as HLS and DASH without any plug-ins or Flash. Shaka plays videos through open Web standards such as MSE and EME. It supports functions such as on-demand, live broadcast, multi-time content, Multi-DRM, and subtitles. You can check all its functions here: https://github.com/google/shaka-player#dash-features.
As an open source player, it can provide you with a variety of options: including viewing the source code, making the modifications and extensions you need. On the other hand, if you encounter difficulties in using the player, you must rely on the help of the open source community.
3、Clappr
Clappr is an open source, extensible and free HTML5 video player, which is used to play video content in HTML5. Media giant Globo.com supported its development. This open source player can be easily integrated into your project and expanded according to your needs. Clappr uses a plug-in-based architecture, which allows you to write plug-ins for all kinds of functions you need, and you don’t need to study and mess up the core code in depth.
Clappr uses HTMLVideoElement [1] for video playback by default. In addition, it also supports functions such as DASH, HLS, playing while downloading, advertisement insertion, dynamic Overlay, and picture in picture.
For such an open source and community-supported player, you can use a large number of third-party plug-ins, or write your own plug-ins and submit them to Clappr.
4、dash.js
Dash.js player is one of the best MPEG-DASH players, and its stated goal is: "dash.js is initiated by DASH Industry Forum, with the purpose of using the media source extension API defined by W3C to realize a product-level quality framework, which is used to create video and audio players for playing MPEG-DASH content." Dash.js is suitable for all kinds of coding formats, supports in-band events and multi-periods, and supports DRM across browsers, and is free for commercial use. You can see that many companies use dash.js as a stand-alone player or as a plug-in (such as VideoJS-contrib-dash [2]) built into videojs.
For this open source player, you can use the source code for free, and modify the dash.js player according to your own needs and requirements. In addition, through the continuous development of some important architects in the MPEG-DASH community, you must be using the latest and greatest MPEG-DASH specification.
To test the dash.js player, you can visit: http://reference.dashif.org/dash.js/nightly/samples/dash-if-reference-player/index.html.
5、hls.js
Hls.js is another popular video player, which is used to play HLS(m3u8) video stream. It is free, open source and maintained by developers in the technical community. Its website statement is: "HLS.js is a JavaScript library that implements the HTTP video streaming client. It relies on HTML5 video and media source extensions for playback. " You can often see people using hls.js as a stand-alone player, or using it with VideoJS through plug-ins (such as VideoJS-HLJS [3]).
Hls.js has rich functions, including support for live broadcast and on-demand, fMP4 (CMAF), DRM(AES-128 and SAMPLE-AES), subtitles and closed captions. You can check all its functions here: https://github.com/video-dev/hls.js/#features.
To access the hosted demo of the player, please click: https://hls-js.netlify.app/demo/.
6、JWPlayer
JWPlayer is a popular end-to-end video solution for video streaming companies. You can upload the video to JWPlayer, which will compress, package and transmit the video to the player, and provide monitoring. JWPlayer can be used across websites, mobile applications or connected TV platforms. As a reliable video player, it is a good choice.
In terms of functions, JWPlayer supports HLS and DASH video streaming, 360-degree full-motion video and VR, advertisement insertion (CSAI and SSAI), Multi-DRM, subtitles and their own audience interaction and data analysis services. Once the video is released, JWPlayer’s audience interactive products can automatically insert related videos from your content library, which is an exciting solution for large-scale media companies. JWPlayer also provides mobile SDK(Android and iOS), which makes it a popular choice for multi-platform streaming media service providers.
You can check all the functions of JWPlayer here: https://www.jwplayer.com/html5-video-player/.
7、Bitmovin
Bitmovin is a top video streaming technology provider, which has developed services such as video player, analysis and cloud coding. Bitmovin’s technology has been trusted by big companies such as DAZN, BBC, Discovery, Telecine, RTL and iflix. If you choose to use Bitmovin player, then you have joined the ranks of these big companies.
Bitmovin HTML5 player supports most modern streaming media protocols, such as HLS, DASH and Smooth Streaming. It also supports various codecs, subtitles, closed captions, DRM, and advertisement insertion (CSAI and SSAI). You can learn more about its functions here: https://bitmovin.com/docs/player.
One advantage of using Bitmovin is that video players are set up for their own analysis services and can be seamlessly integrated. In addition, Bitmovin provides players with a huge ecosystem including Android, iOS, tvOS, Roku, Chromecast, Amazone Fire TV, Samsung and LG smart TV, and other platforms, which makes it a good choice for multi-platform streaming media services.
8、THEOplayer
THEOplayer is another popular video player software company, which has won many awards in video playback technology. The company has excellent video players (supporting HLS, DASH and MSS, etc.), which are suitable for other streaming media platforms such as Web(HTML), Android and iOS. In addition, CNN, RAI, VRT, Telia, BT Sport, etc. are all their big customers, which is a good sign for THEOplayer brand.
THEOplayer’s HTML5 video player supports HLS, DASH, Smooth Streaming and the low-latency variant protocols of HLS and DASH. Users can use THEOplayer player in Web, mobile Web, set-top boxes and smart TVs. This player also has a custom ABR algorithm for downloading video slices, and can support Multi-DRM, advertisement insertion (CSAI and SSAI), subtitles, analysis and other functions through vendors (such as NPAW, Conviva, MediaMelon, Mux Data, Agama, etc.).
Similar to other video providers, THEOplayer is a great player choice (in view of its huge ecology, strong support for various functions and multi-platform availability).
9、NexPlayer
NexPlayer is a video playback technology provider, and has more than 15 years of experience in video streaming and HLS and MPEG-DASH playback (on all devices). Many video player manufacturers usually base their players on open source players and make a lot of modifications. Unlike these manufacturers, NexPlayer developed its own players from scratch and wrote all the codes.
NexPlayer fully supports HLS, DASH, Smooth Streaming, DRM, advertisement insertion (CSAI and SSAI), subtitles and other functions. Although it does not have its own analysis service, it is fully compatible with mainstream analysis service providers. You can check all its features here: https://nexplayersdk.com/.
10、castLabs
CastLabs is a video solution company, which provides video playback software, DRM and content processing toolbox. Many companies can use its PRESTOplay video player toolbox to create players embedded in websites. Streaming media service providers can also deploy their players on smart TVs (such as Samsung and LG) and game platforms (such as Xbox one). PRESTOplay is built on the popular Shaka player and has been modified a lot for commercial use.
PRESTOplay of castLabs supports HLS, DASH, MSS, playing video while downloading, AirPlay, Chromecast, Multi-DRM, and advertisement insertion (CSAI and SSAI). You can check its full function here:
Although castLabs does not have its own analysis platform, it supports integration with popular analysis service providers such as Conviva, Mux Data, NPAW and Agama.
Like other video players, castLabs’ player can be used on Android and iOS platforms, and it is a good choice for multi-platform video playback.
11、Flowplayer
Flowlayer is a very lightweight and extensible video player, which is a part of Flowlayer full-stack solution for video streaming media providers. It provides all the functions of encoding, hosting, playing and monitoring for your video service. In addition, its system is configured to be very easy to modify and set styles (see the screenshot above), so founders and creators without technical background can easily use this player.
Flowplayer supports HLS, DASH and mp4 playback. Based on HTML5 native player, Flowplayer can support functions such as Chromecast, AirPlay, Android, iOS, advertisement insertion, DRM and data analysis. You can check all its functions here:
https://flowplayer.com/features/html5-player
As a full-stack solution, the analysis function provided by Flowplayer is well integrated into the player, which is an attractive choice for streaming media providers.
12、Radiant Media Player
Radiant Media Player describes itself like this: "The modern HTML5 video player that can be seen everywhere can quickly create Web, mobile and OTT applications." For Radiant Media Player, which has a wide range of functions and features, this description deserves its name. As a cross-device HTML5 video and audio player, it can display HLS, DASH or progressive (download and play) downloaded content.
In terms of functions (you can check it in its documentation: https://www. Radiant Media Player.com/docs/latest/quick-start.html), radiantmediaplayer supports HLS, DASH and playing while downloading. It also supports DRM(Widevine, Fairplay and PlayReady), closed captioning, captioning and advertisement insertion (CSAI and SSAI).
One advantage of Radiant Media Player is that teams can use a code base to create applications for mobile platforms through their players in Cordova and Ionic. Although it has no built-in analysis service, it supports integration with Google Analytics, MediaMelon, Mux Data and Matomo.
13、VisualON
VisualOn is a mainstream player SDK provider with its own player technology stack, which can support cross-platform content transmission on any networked device.
Their players support the most important streaming media protocols such as HLS, Smooth Streaming, MPEG-DASH, downloading and playing, RTSP and MS-HTTP. In addition, it also supports a variety of video and audio codecs, Multi-DRM, advertisement insertion (SSAI and CSAI), subtitles, AirPlay, Chromecast, low-delay transmission and so on. You can learn more about its functions here: https://www.visualon.com/index.php/onstream-analytics/.
The advantage of VisualON is that it can closely integrate its own streaming media monitoring service (or analysis service) into the player. The second advantage is that it is a player manufacturer that supports multiple platforms and supports Android, iOS and tvOS at the same time.
tag
I hope the popular HTML5 video players listed above can help you. Of course, each player has its own advantages and disadvantages in terms of performance, pricing, support, usability and ecology. You can choose these players after fully studying them according to your own needs and budget.
If you know any other HTML5 video players, please comment below.
See you next time. Take care! Happy Streaming！
Notes:
[1] https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement
[2] https://github.com/videojs/videojs-contrib-dash
[3] https://github.com/streamroot/videojs-hlsjs-plugin
References:
https://videojs.com/
https://github.com/shaka-project/shaka-player
https://github.com/clappr/clappr
https://github.com/Dash-Industry-Forum/dash.js?
https://github.com/video-dev/hls.js/
https://www.jwplayer.com/html5-video-player/
https://www.theoplayer.com/
https://nexplayersdk.com/
https://flowplayer.com/
https://www.radiantmediaplayer.com/
Acknowledgement:
This article has been translated and published by the author Krishna Rao Vijayanagar. Thank you.
Original link:
