I've tested videojs-http-source-selector v1.1.6 with videojs-contrib-quality-levels v4.0.0 and video.js v8.6.0, but I get this error:
<head>
<link href="https://unpkg.com/[email protected]/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/video.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-quality-levels/4.0.0/videojs-contrib-quality-levels.min.js" integrity="sha512-3Jrm6nQebMfkSWFmpC12Nhzn1R87CfrzCXJfhvTxmEyml05sUr3Fw37Aiazh1Fo9HKuYEzi0oluFjBvdOW8aPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/[email protected]/dist/videojs-http-source-selector.min.js"></script>
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>
<body>
<video
id="player"
class="video-js"
width="720"
height="400"
>
</video>
<script>
videojs.Vhs.xhr.beforeRequest = function(options) {
if (options.headers == undefined){
options.headers = {}
}
options.headers["Custom-Header"] = "Custom"
return options;
};
var options =
{
controls: true,
preload: 'auto',
plugins: {
httpSourceSelector:
{
default: 'auto'
}
}
}
var url = 'https://my.streaming.url/encrypted-slug';
var player = videojs('player', options);
player.httpSourceSelector();
player.src({ type: "application/x-mpegurl", src: url });
</script>
</body>