如何在video.js中使用hls.js类外部HLS库？内置VHS仍调用问题

你当前的代码没能彻底禁用内置VHS模块，原因是overrideNative: true仅控制VHS是否覆盖原生HLS播放，而非完全禁用VHS。要强制切换到hls.js，需要直接禁用VHS并配置HTML5技术优先使用hls.js。

修改后的完整代码 #

<!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模块
            vhs: false,
            // 强制使用hls.js替代原生HLS播放
            hls: {
                overrideNative: true,
                debug: true
            }
        }
    });

    player.ready(function () {
        var html5Tech = player.tech({IWillNotUseThisInPlugins: true});
        
        // 绑定hls.js的事件
        if (html5Tech.hls) {
            html5Tech.hls.on(Hls.Events.MEDIA_ATTACHED, function () {
                console.log('video与hls.js已绑定');
            });
            html5Tech.hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
                console.log('manifest加载完成，发现' + data.levels.length + '个画质等级');
            });
            html5Tech.hls.on(Hls.Events.ERROR, function (event, data) {
                console.log('hls.js错误:', data);
            });
        }
    });
</script>
</body>
</html>

关键修改说明 #

• 禁用VHS：将html5.vhs设为false，彻底关闭内置的VHS模块，避免它抢占HLS流的处理权。
• 配置hls.js：通过html5.hls.overrideNative: true，让Video.js的HTML5技术优先使用hls.js而非原生HLS播放能力。
• 事件绑定修正：原来的代码直接监听hlsDebug事件，改为通过html5Tech.hls获取hls.js实例，再绑定官方事件，确保事件监听生效。

内容的提问来源于stack exchange，提问作者Grzegorz Kalisz