VideoJS is a free open-source HTML5 video player that supports modern video streaming formats on both desktop and mobile devices. It’s popularity has ensured ongoing updates through a thriving community. These are some of the many reasons that make VideoJS a great choice for your website.
While the base platform checks the boxes for all the basics such as support for a wide variety of formats and streaming qualities (MP4, WEBM, HLS, DASH), there are some features that are only available through community provided plugins such as Quality Selection. Thankfully this is actually pretty simple thanks to the silvermine/videojs-quality-selector plugin.
What is VideoJS Quality Selector?
A plugin for videojs versions 6+ that adds a button to the control bar which will allow the user to choose from available video qualities or resolutions provided by an Adaptive Bit-rate video stream.
Adding the player to your website
If you are already using the MediaCP Video Panel then the included iFrame Player utilises VideoJS with the Quality selection already. You just need to copy the embed code and paste it on your website.
For those not using the MediaCP, you just need to follow the steps below, ensuring to replace the <source src=”https://yourdomain.com/live/playlist.m3u8″> with your actual HLS url. Unsure of what the HLS url is? Then you should ask your provider.
Step 1 – Include the below into the <head> section of your website
<link href="https://unpkg.com/video.js@7/dist/video-js.min.css" rel="stylesheet"> <link href="https://unpkg.com/[email protected]/dist/css/quality-selector.css" rel="stylesheet"> <script src="https://unpkg.com/video.js@7/dist/video.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-quality-levels/2.0.9/videojs-contrib-quality-levels.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/videojs-hls-quality-selector.min.js"></script>
Step 2 – Include the below HTML where you want your video to play
Be sure to replace https://yourdomain.com/live/playlist.m3u8 with your own streaming URL.
<video id="videojs" class="video-js vjs-fluid vjs-default-skin vjs-big-play-centered" controls preload="auto" autoplay muted fluid="true" liveui="true">
<source src="https://yourdomain.com/live/playlist.m3u8" type="application/x-mpegURL">
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<script type="text/javascript">
var player = videojs('videojs');
player.hlsQualitySelector();
</script>
The result
The result is an automatic detection of qualities through the provided HLS/m3u8 playlist.
