侧边栏壁纸
博主头像
邱少羽梦 博主等级

90后北漂程序员,认真写好每一行代码

  • 累计撰写 54 篇文章
  • 累计创建 59 个标签
  • 累计收到 43 条评论

目 录CONTENT

文章目录
前端 Web 播放器 HLS 程序员专栏

HLS.js 使用及各种常用事件

邱少羽梦
邱少羽梦
2024-05-30 / 0 评论 / 0 点赞 / 759 阅读 / 15445 字 / 正在检测是否收录...
温馨提示：
本文最后更新于 2024-05-30，若内容或图片失效，请留言反馈。部分素材来自网络，若不小心影响到您的利益，请联系我们删除。

介绍

HLS.js 是一个 JavaScript 库，用于在网页上实现 HTTP Live Streaming (HLS)。它允许你在网页上播放由流媒体服务器提供的 HLS 格式的视频，这是一种常用于在线视频播放的协议。

HLS.js 的主要特点包括：

  1. 跨平台兼容性：支持在各种现代浏览器和平台上播放 HLS 视频，包括桌面和移动设备。
  2. 无需插件：HLS.js 不需要额外的插件或扩展程序，只需在网页中包含相应的 JavaScript 文件即可。
  3. 模块化：HLS.js 提供了模块化的设计，可以方便地集成到各种项目中。
  4. 开源：HLS.js 是开源项目，源代码托管在 GitHub 上，可以自由使用和修改。

使用教程

以下是使用 HLS.js 的简单教程：

  1. 引入 HLS.js 库：首先，你需要在你的网页中引入 HLS.js 库。你可以从 CDN 上获取最新版本的 HLS.js，也可以下载到本地然后引入。
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  1. 创建视频播放器：在 HTML 文件中创建一个 <video> 元素，用于播放 HLS 视频。
<video id="videoPlayer" controls></video>
  1. 初始化 HLS.js：在 JavaScript 中初始化 HLS.js，指定 HLS 视频的 URL，并将其绑定到 <video> 元素。
if (Hls.isSupported()) {
  var video = document.getElementById('videoPlayer');
  var hls = new Hls();
  hls.loadSource('your_hls_video_url.m3u8');
  hls.attachMedia(video);
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
  video.src = 'your_hls_video_url.m3u8';
  video.addEventListener('canplay', function() {
    video.play();
  });
}

示例

下面是一个简单的示例，演示了如何使用 HLS.js 播放 HLS 视频：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HLS.js Demo</title>
</head>
<body>
  <video id="videoPlayer" controls></video>

  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script>
    var video = document.getElementById('videoPlayer');
    
    if (Hls.isSupported()) {
      var hls = new Hls();

      // HLS.js 事件监听
      hls.on(Hls.Events.MEDIA_ATTACHED, function() {
        console.log('Video and HLS.js are attached');
      });

      hls.on(Hls.Events.MANIFEST_PARSED, function() {
        console.log('Manifest has been successfully parsed');
      });

      hls.on(Hls.Events.ERROR, function(event, data) {
        var errorType = data.type;
        var errorDetails = data.details;
        console.error('HLS.js error occurred:', errorType, errorDetails);
      });

      // Video 元素事件监听
      video.addEventListener('play', function() {
        console.log('Video started playing');
      });

      video.addEventListener('pause', function() {
        console.log('Video paused');
      });

      video.addEventListener('ended', function() {
        console.log('Video ended');
      });

      video.addEventListener('error', function() {
        console.error('Video playback error occurred');
      });

      // 加载 HLS 视频源
      hls.loadSource('your_hls_video_url.m3u8');
      hls.attachMedia(video);
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = 'your_hls_video_url.m3u8';
      video.addEventListener('canplay', function() {
        console.log('Video can start playing');
        video.play();
      });
      video.addEventListener('error', function() {
        console.error('Video playback error occurred');
      });
    }
  </script>
</body>
</html>

HLS 常用事件

  • hls.on(Hls.Events.MEDIA_ATTACHED, handler)：当媒体元素与hls.js实例进行关联时触发。
  • hls.on(Hls.Events.MEDIA_DETACHED, handler)：当媒体元素与hls.js实例解除关联时触发。
  • hls.on(Hls.Events.MANIFEST_LOADING, handler)：在加载manifest文件之前触发。
  • hls.on(Hls.Events.MANIFEST_LOADED, handler)：在成功加载manifest文件后触发。
  • hls.on(Hls.Events.LEVEL_SWITCHING, handler)：在切换清晰度级别时触发。
  • hls.on(Hls.Events.LEVEL_SWITCHED, handler)：在成功切换清晰度级别后触发。
  • hls.on(Hls.Events.FRAG_LOADING, handler)：在加载片段时触发。
  • hls.on(Hls.Events.FRAG_LOADED, handler)：在成功加载片段后触发。
  • hls.on(Hls.Events.ERROR, handler)：在发生错误时触发。
  • hls.on(Hls.Events.BUFFER_CREATED, handler)：在创建缓冲区时触发。
  • hls.on(Hls.Events.BUFFER_APPENDING, handler)：在将数据附加到缓冲区时触发。
  • hls.on(Hls.Events.BUFFER_EOS, handler)：在缓冲区到达末尾时触发。

运行时事件【参考】

hls.js触发了一系列事件，可以按照以下方式注册和取消注册：

function onLevelLoaded(event, data) {
  var level_duration = data.details.totalduration;
}
// 订阅事件
hls.on(Hls.Events.LEVEL_LOADED, onLevelLoaded);
// 取消订阅事件
hls.off(Hls.Events.LEVEL_LOADED, onLevelLoaded);
// 仅订阅一次事件调用
hls.once(Hls.Events.LEVEL_LOADED, onLevelLoaded);

完整的事件列表如下：

  • Hls.Events.MEDIA_ATTACHING

    • 在MediaSource连接到媒体元素之前触发
      • 数据：{ media }

  • Hls.Events.MEDIA_ATTACHED

    • 在MediaSource成功连接到媒体元素后触发
      • 数据：{ media }

  • Hls.Events.MEDIA_DETACHING

    • 在从媒体元素分离MediaSource之前触发
      • 数据：{}

  • Hls.Events.MEDIA_DETACHED

    • 在从媒体元素分离MediaSource后触发
      • 数据：{}

  • Hls.Events.BUFFER_RESET

    • 当缓冲区将要被重置时触发
      • 数据：{}

  • Hls.Events.BUFFER_CODECS

    • 当为推入缓冲区所需的编解码器有所了解时触发
      • 数据：{ audio? : [Track], video? : [Track] }

  • Hls.Events.BUFFER_CREATED

    • 当sourcebuffers已经被创建时触发
      • 数据：{ tracks : { audio? : [Track], video? : [Track], audiovideo?: [Track] } } 接口 Track { id: 'audio' | 'main', buffer?: SourceBuffer, container: string, codec?: string, initSegment?: Uint8Array, levelCodec?: string, metadata?: any }

  • Hls.Events.BUFFER_APPENDING

    • 当将一个段附加到缓冲区时触发
    • 数据：{ parent, type, frag, part, chunkMeta, data }

  • Hls.Events.BUFFER_APPENDED

    • 当将媒体段附加到缓冲区完成时触发
      • 数据：{ parent : 触发BUFFER_APPENDING的播放列表类型, type, frag, part, chunkMeta, timeRanges : { video?: TimeRange, audio?: TimeRange, audiovideo?: TimeRange } }

  • Hls.Events.BUFFER_EOS

    • 当流结束并且我们想通知媒体缓冲区将不再有数据时触发
      • 数据：{ type: SourceBufferName }

  • Hls.Events.BUFFER_FLUSHING

    • 当应该刷新媒体缓冲区时触发
      • 数据：{ startOffset, endOffset, type: SourceBufferName }

  • Hls.Events.BUFFER_FLUSHED

    • 当媒体缓冲区已刷新时触发
      • 数据：{ type: SourceBufferName }

  • Hls.Events.BACK_BUFFER_REACHED

    • 当回退缓冲区根据backBufferLength配置选项被触及时触发
      • 数据：{ bufferEnd: number }

  • Hls.Events.MANIFEST_LOADING

    • 表示manifest加载开始时触发
      • 数据：{ url : manifestURL }

  • Hls.Events.MANIFEST_LOADED

    • 在manifest加载完成后触发
      • 数据：{ levels : [可用质量级别], audioTracks : [可用音轨], captions? [可用封闭字幕媒体], subtitles?: [可用字幕轨道], url : manifestURL, stats : [LoaderStats], sessionData: [解析的#EXT-X-SESSION-DATA], networkDetails: [用于调试的加载器特定对象(XMLHttpRequest或fetch Response)]}

  • Hls.Events.MANIFEST_PARSED

    • 在manifest解析完成后触发
      • 数据：{ levels : [可用质量级别], firstLevel : Manifest中首个质量级别的索引, audioTracks, subtitleTracks, stats, audio: boolean, video: boolean, altAudio: boolean }

  • Hls.Events.STEERING_MANIFEST_LOADED

    • 当内容转向清单加载时触发
      • 数据：{ url: 转向清单URL, steeringManifest: SteeringManifest object }

  • Hls.Events.LEVEL_SWITCHING

    • 请求级别切换时触发
      • 数据：{ level 和级别对象属性 (请参见下文的level获取更多信息) }

  • Hls.Events.LEVEL_SWITCHED

    • 当级别切换生效时触发
      • 数据：{ level : 新级别的id }

  • Hls.Events.LEVEL_LOADING

    • 请求级别播放列表时触发（除非通过hls.loadSource()仅加载一个媒体播放列表）
      • 数据：{ url : 级别URL, level : 被加载的级别id, deliveryDirectives: LL-HLS交付指令或当不支持阻塞重新加载时为null }

  • Hls.Events.LEVEL_LOADED

    • 当级别播放列表加载完成时触发
      • 数据：{ details : LevelDetails, level : 加载的级别id, stats : [LoadStats] }

  • Hls.Events.LEVEL_UPDATED

    • 基于先前的细节更新级别细节后，在加载完成后触发
      • 数据：{ details : LevelDetails, level : 更新的级别id }

  • Hls.Events.LEVEL_PTS_UPDATED

    • 在解析片段后更新级别的PTS信息时触发
      • 数据：{ details : LevelDetails, level : 更新的级别id, drift: 解析最后片段时观察到的PTS漂移, type, start, end }

  • Hls.Events.LEVELS_UPDATED

    • 在调用removeLevel()移除级别后触发
      • 数据：{ levels : [可用质量级别] }

  • Hls.Events.AUDIO_TRACKS_UPDATED

    • 通知音轨列表已更新时触发
      • 数据：{ audioTracks : 音轨列表 }

  • Hls.Events.AUDIO_TRACK_SWITCHING

    • 请求音轨切换时触发
      • 数据：{ id : 音轨id, type : 播放列表类型 ('AUDIO' | 'main'), url : 音轨URL }

  • Hls.Events.AUDIO_TRACK_SWITCHED

    • 实际发生音轨切换时触发
      • 数据：{ id : 音轨id }

  • Hls.Events.AUDIO_TRACK_LOADING

    • 音轨加载开始时触发
      • 数据：{ url : 音轨URL, id : 音轨id }

  • Hls.Events.AUDIO_TRACK_LOADED

    • 音轨加载完成时触发
      • 数据：{ details : LevelDetails, id : 音轨id, stats : [LoadStats] }

  • Hls.Events.SUBTITLE_TRACKS_UPDATED

    • 通知字幕轨道列表已更新时触发
      • 数据：{ subtitleTracks : 字幕轨道列表 }

  • Hls.Events.SUBTITLE_TRACK_SWITCH

    • 字幕轨道切换发生时触发
      • 数据：{ id : 字幕轨道id, type? : 播放列表类型 ('SUBTITLES' | 'CLOSED-CAPTIONS'), url? : 字幕轨道URL }

  • Hls.Events.SUBTITLE_TRACK_LOADING

    • 字幕轨道加载开始时触发
      • 数据：{ url : 字幕轨道URL, id : 字幕轨道id }

  • Hls.Events.SUBTITLE_TRACK_LOADED

    • 字幕轨道加载完成时触发
      • 数据：{ details : LevelDetails, id : 字幕轨道id, stats : [LoadStats] }

  • Hls.Events.SUBTITLE_FRAG_PROCESSED

    • 字幕片段处理完成时触发
      • 数据：{ success : boolean, frag : [已处理的片段对象], error?: [解析字幕时的错误] }

  • Hls.Events.INIT_PTS_FOUND

    • 首个时间戳被找到时触发
      • 数据：{ d : demuxer id, initPTS: initPTS, timescale: timescale, frag : 片段对象 }

  • Hls.Events.FRAG_LOADING

    • 片段加载开始时触发
      • 数据：{ frag : 片段对象, targetBufferTime: number | null [此片段预期缓冲的未缓冲时间] }

  • Hls.Events.FRAG_LOAD_PROGRESS

    • [已弃用]

  • Hls.Events.FRAG_LOAD_EMERGENCY_ABORTED

    • 用于紧急切换向下中断片段加载时的标识符
      • 数据：{ frag : 片段对象 }

  • Hls.Events.FRAG_LOADED

    • 片段加载完成时触发
      • 数据：{ frag : 片段对象, payload : 片段载荷, stats : [LoadStats]}

  • Hls.Events.FRAG_DECRYPTED

    • 片段解密完成时触发
      • 数据：{ id : demuxer id, frag : 片段对象, payload : 片段载荷, stats : { tstart, tdecrypt}}

  • Hls.Events.FRAG_PARSING_INIT_SEGMENT

    • 从片段中提取初始段时触发
      • 数据：{ id: demuxer id, frag : 片段对象, moov : moov MP4 box, codecs : 在解析片段时找到的编解码器 }

  • Hls.Events.FRAG_PARSING_USERDATA

    • 解析sei文本完成时触发
      • 数据：{ id : demuxer id, frag: 片段对象, samples : [ sei样本 pes ], details: LevelDetails }

  • Hls.Events.FRAG_PARSING_METADATA

    • 解析ID3完成时触发
      • 数据：{ id: demuxer id, frag : 片段对象, samples : [ ID3 pes - pts和dts时间戳是相对的，值以秒为单位], details: LevelDetails }

  • Hls.Events.FRAG_PARSING_DATA

    • [已弃用]

  • Hls.Events.FRAG_PARSED

    • 片段解析完成时触发
      • 数据：{ frag : 片段对象, partIndex }

  • Hls.Events.FRAG_BUFFERED

    • 当重新复用的MP4盒子全部附加到SourceBuffer时触发
      • 数据：{ id: demuxer id, frag : 片段对象, stats : [LoadStats] }

  • Hls.Events.FRAG_CHANGED

    • 当与当前视频位置匹配的片段发生更改时触发
      • 数据：{ id : demuxer id, frag : 片段对象 }

  • Hls.Events.FPS_DROP

    • 当最后监控周期中的FPS下降高于指定阈值时触发
      • 数据：{ curentDropped : 最后监控周期中丢帧数, currentDecoded : 最后监控周期中解码帧数, totalDroppedFrames : 视频元素中总丢帧数 }

  • Hls.Events.FPS_DROP_LEVEL_CAPPING

    • 当FPS下降触发自动级别限制时触发
      • 数据：{ level: 建议的新自动级别限制由fps控制器, droppedLevel : 有太多丢帧的级别将被限制 }

  • Hls.Events.ERROR

    • 错误事件标识符
      • 数据：{ type : 错误类型, details : 错误详情, fatal : 错误是否致命, 其他错误特定数据 }

  • Hls.Events.DESTROYING

    • 当hls.js实例开始销毁时触发。不同于MEDIA_DETACHED，因为可能希望将视频从hls.js实例分离并重新连接，例如处理中间广告
      • 数据：{}

  • Hls.Events.KEY_LOADING

    • 解密密钥加载开始时触发
      • 数据：{ frag : 片段对象 }

  • Hls.Events.KEY_LOADED

    • 解密密钥加载完成时触发
      • 数据：{ frag : 片段对象 }

  • Hls.Events.STREAM_STATE_TRANSITION

    • [已弃用]

  • Hls.Events.NON_NATIVE_TEXT_TRACKS_FOUND

    • 当renderTextTracksNatively为false时，当发现新的标题或字幕轨道时触发，替代将TextTrack添加到视频元素的行为
      • 数据：{ tracks: Array<{ label, kind, default, subtitleTrack }> }

  • Hls.Events.CUES_PARSED

    • 当renderTextTracksNatively为false时，当解析新的标题或字幕提示时触发
      • 数据：{ type, cues, track }

参考链接

0
H5 VideoPlayer

  1. 支付宝打赏

    qrcode alipay

  2. 微信打赏

    qrcode weixin

  3. QQ打赏

    qrcode qq
版权归属： 邱少羽梦
本文链接： https://www.qiushaocloud.top/2024/05/30/hls-shi-yong-ji-ge-zhong-chang-yong-shi-jian
许可协议： 本文使用《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》协议授权

评论区