[SOLVED] How to use external HLS library like hlsjs with video.js

How to use external HLS library like hlsjs with video.js

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>

Solution