I am currently trying to implement a feature that allows users to select the quality of the video. I am using videojs along with the videojs-quality-selector plugin, but even though the video runs successfully, the option to choose the quality is not appearing. Any assistance on this matter would be greatly appreciated. Thank you.
Here is the HTML code:
<head>
<link href="plugins/css/video-js.min.css" rel="stylesheet" />
<link href="https://unpkg.com/@silvermine/videojs-quality-selector/dist/css/quality-selector.css" rel="stylesheet">
</head>
<video id="video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" data-setup='{}'>
<source src="" type="video/mp4">
</video>
<script type="text/javascript" src="plugins/js/video.min.js"></script>
<script src="https://unpkg.com/@silvermine/videojs-quality-selector/dist/js/silvermine-videojs-quality-selector.min.js"></script>
And here is the JavaScript code:
var options, player;
options = {
controlBar: {
children: [
'playToggle',
'progressControl',
'volumePanel',
'qualitySelector',
'fullscreenToggle',
],
},
};
player = videojs('video_1', options);
player.src([{
src: 'video1.mp4',
type: 'video/mp4',
label: '720P',
},
{
src: 'video2.mp4',
type: 'video/mp4',
label: '480P',
selected: true,
},
{
src: 'video3.mp4',
type: 'video/mp4',
label: '360P',
},
]);