I have implemented an HTML5 video player using Video.js, but it does not provide video quality or resolution selector, is there any javascript that can help me add a quality selector?
1 Like
JavaScript and the Video.js API can be used to provide a quality or resolution selection to an HTML5 video player that uses Video.js. The flexible video player library Video.js can have its capabilities expanded to include a quality selector. Here’s how to accomplish this step-by-step:
1. Get Your Streams Ready for Video
Make sure you have many video streams available in varying quality before adding a quality selection. Generally, you would have multiple versions of your video, each with a distinct bitrate or resolution. These videos have to be in WebM or MP4 formats.
2. Add JavaScript Libraries and Video.js
Verify that your HTML file has the Video.js library and any other JavaScript libraries that are required. Video.js is available for download from the official website or can be included through a content delivery network (CDN). Include jQuery as well, since it will be utilized for DOM manipulation.
<link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.15.4/video.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
3. HTML Structure
Include a video element in your HTML structure and add another container for the quality selector. You can design a drop-down menu with many qualities to choose from.
<video id="my-video" class="video-js" controls preload="auto" width="640" height="360">
<source src="video-720p.mp4" type="video/mp4" data-res="720p">
<source src="video-480p.mp4" type="video/mp4" data-res="480p">
<!-- Add more source elements for different qualities -->
</video>
<div id="quality-selector">
<select id="quality-select">
<option value="720p">720p</option>
<option value="480p">480p</option>
<!-- Add more quality options -->
</select>
</div>
4. Code in JavaScript
JavaScript can be used to manage quality switching and control the video player. To make DOM manipulation simpler, you can utilize jQuery.
// Initialize Video.js
var player = videojs('my-video');
// Handle quality change when selecting an option
$('#quality-select').change(function() {
var selectedQuality = $(this).val();
var selectedSource = $('source[data-res="' + selectedQuality + '"]').attr('src');
// Change the video source to the selected quality
player.src({
type: 'video/mp4',
src: selectedSource
});
// Load and play the new source
player.load();
player.play();
});
5. Modality
The quality selector can be styled to have a more pleasing appearance. The dropdown menu’s look can be altered with CSS.
#quality-select {
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: white;
cursor: pointer;
}
Note:
-
Don’t forget to include all the required source materials in various quality levels for the video.
-
More advanced features like adaptive streaming using HLS or DASH can be added to this, but that will require further settings and libraries.
These instructions will help you add a quality selector to your HTML5 video player that uses Video.js and lets users choose between several video resolutions or qualities. Offering options for varied network circumstances and device capabilities, can enhance the user experience.
1 Like
Great! Let me check and try and will come back soon if I need more help or information.
Thanks
1 Like
I am also facing the same issue, I am confused about how to use these plugins, and I don’t even see any examples of plugins in React. The way I used the plugins don’t work. Please help.
1 Like
Can you please share your code here?
Yes sure!
Here it is
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<script src="https://cdn.streamroot.io/videojs-hlsjs-plugin/1/stable/videojs-hlsjs-plugin.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-overlay/1.1.4/videojs-overlay.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<script src="../dist/silvermine-videojs-chromecast.min.js<?php echo "?".$version; ?>"></script>
<div class="col-sm-6">
<div class="video-player1">
<video autoplay id="example-video" class="video-js vjs-theme-fantasy custom-videojs" controls>
</video>
<script>
var options = {
html5: {
hlsjsConfig: {
// Put your hls.js config here
}
},
controls: true,
techOrder: [ 'chromecast', 'html5' ], // You may have more Tech, such as Flash or HLS
plugins: {
chromecast: {}
}
};
// setup beforeinitialize hook
videojs.Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer, hlsjsInstance) => {
// here you can interact with hls.js instance and/or video.js playback is initialized
});
var player = videojs('example-video', options, function() {});
var overlay_content = '<div class="overlay_title"><div class="wrapper"><img src="images/nologo.jpg" align="middle" class="logoVideo" id="logovideo"> <div style="padding-left:10px"><h2 id="channeltitle" style="font-size: 22px;" ></h2><h4 id="descrtitle" style="font-size: 17px;"></h4></div></div><div id="progressp" class="progress-bar"><div id="progress_channel" class="progress"></div></div>';
player.overlay({
overlays: [{
start: 'useractive',
content: overlay_content,
end: 'userinactive',
align: 'bottom'
}]
});
function play(url) {
player.pause();
player.src({
src: url,
type: 'application/x-mpegURL'
});
player.load();
player.play();
// here you can interact with hls.js instance and/or video.js playback is initialized
}
</script>
1 Like
Did you try to add this plugin: GitHub - silvermine/videojs-quality-selector
I think you need to insert these imports on top rather than inside the script.
After that try to add the control for players like this player.controlBar.addChild('QualitySelector');I hope this may resolve your issue.Cheers!