hls.js 专为浏览器播放 hls 流媒体封装的工具库，只要浏览器支持 MSE (Media Source Extensions) 都能正常使用。

hls.js 这玩意儿相当于是一个底层工具，主要用来解析 m3u8 文件，并不会提供一整套的播放器功能，所以如果想得到一个完整的播放器，用这工具不太实现哦！！

hls.js使用

npm 安装

npm i hls.js

导入依赖

// CommonJS
const hls = require('hls.js');

// ESM
import hls from 'hls.js';

浏览器端引入

<!-- 传统 script 引入 -->
<script src="https://cdn.jsdelivr.net/npm/hls.js@1.6.15/dist/hls.min.js"></script>

<!-- ESM -->
<script type="module">
import hls from 'https://cdn.jsdelivr.net/npm/hls.js@1.6.15/+esm'
</script>

用法

<script src="https://cdn.jsdelivr.net/npm/hls.js@1.6.15/dist/hls.min.js"></script>
<!-- autoplay 自动播放必须在静音条件下开启，所以必须添加 muted -->
<video id="video" controls autoplay muted></video>
<script>
    const video = document.getElementById('video');
    const videoSrc = 'https://live5.ahtv.cn/ydds1/playlist.m3u8?_upt=8177b47d1770291471';
    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource(videoSrc);
      hls.attachMedia(video);
      // 监听媒体附加完成后自动播放
      hls.on(Hls.Events.MANIFEST_PARSED, function() {
        video.play();
      });
    }
    // 如果浏览器本身就支持 m3u8，则直接播放
    // 可以将这个逻辑分支提前，优先使用浏览器自带的解析功能
    else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = videoSrc;
      video.play();
    }
</script>

虽然用法看起来很简单，但文档那是一点也不少，高端配置项请去摸文档哦~

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/5010