I'm using the video.js library as a video player. Since the native videojs-http-streaming module doesn't handle some special cases, I have to use an external HLS library instead.
I'm trying to do it with the following code, but unfortunately the built-in VHS is still being used.
<!DOCTYPE html>
<html>
<head>
<link href="https://vjs.zencdn.net/7.21.4/video-js.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/hls.js"></script>
<script src="https://vjs.zencdn.net/7.21.4/video.min.js"></script>
</head>
<body>
<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264">
<source src="https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8"
type="application/x-mpegURL">
</video>
<script>
var player = videojs('my-video', {
techOrder: ['html5'],
html5: {
vhs: {
overrideNative: true,
debug: true
}
}
});
player.ready(function () {
var hlsTech = player.tech({IWillNotUseThisInPlugins: true});
hlsTech.on('hlsDebug', function (event, data) {
console.log('HLS.js Log:', data);
});
hlsTech.on(Hls.Events.MEDIA_ATTACHED, function () {
console.log('video and hls.js are now bound together !');
});
hlsTech.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
console.log(
'manifest loaded, found ' + data.levels.length + ' quality level'
);
});
});
</script>
</body>
</html>
Use the alternative core build which doesn't include VHS.