使用媒体源扩展的JavaScript HLS客户端

・8 分钟阅读

  • 源代码名称: hls.js
  • 源代码网址: https://www.github.com/video-dev/hls.js
  • hls.js的文档
  • hls.js的源代码下载
  • Git URL:
    git://www.github.com/video-dev/hls.js.git
  • Git Clone代码到本地:
    git clone https://www.github.com/video-dev/hls.js
  • Subversion代码到本地:
    $ svn co --depth empty https://www.github.com/video-dev/hls.js
                              Checked out revision 1.
                              $ cd repo
                              $ svn up trunk
              
  • Build StatusnpmGreenkeeper badge

    加入关于 Slack#hlsjs的讨论Slack Status

    hls.js

    hls.js 是一个JavaScript库,它实现了一个 HTTP实时流客户端。 它依赖于视频MediaSource扩展插件。

    它由 transmuxing MPEG-2 传输流和 aac/mp3流转换为 ISO BMFF ( MP4 ) Fragments。 如果在浏览器中可用,可以使用 Web Worker 异步执行这里 transmuxing。 hls.js 还支持 HLS + fmp4,在 WWDC2016 期间宣布。

    hls.js 不需要任何播放器,它直接在标准的HTML <video> 元素之上工作。

    hls.js 是用 ECMAScript6语言编写的,使用Babel Babel在ECMAScript5中进行转换。

    API文档和用法指南

    演示

    http://video-dev.github.io/hls.js/demo

    正在启动

    <scriptsrc="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <videoid="video"></video>
    <script>if(Hls.isSupported()) {var video =document.getElementById('video');var hls =newHls();hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');hls.attachMedia(video);hls.on(Hls.Events.MANIFEST_PARSED,function() {video.play(); }); }// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e.. m3u8 URL) directly to the video element throught the `src` property.// This is using the built-in support of the plain video element, without using hls.js.elseif (video.canPlayType('application/vnd.apple.mpegurl')) {video.src='https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';video.addEventListener('canplay',function() {video.play(); }); }</script>

    视频控制

    通过 HTML <video> 元素控制视频。

    HTMLVideoElement控件和事件可以无缝使用。

    他们在生产中使用 hls.js !

    播放器集成

    hls.js的( 正在) 集成在以下播放器中:

    Chrome/Firefox 集成

    gramk 制作,从地址栏和m3u8链接播放 hls

    依赖项

    不需要外部JS库。 预打包的生成包含在 dist文件夹中:

    如果你想自己捆绑应用程序,请使用 node

    
    npm install hls.js
    
    
    
    

    注意:hls.light.*.js dist文件不包括字幕和可选的音频功能。

    安装

    直接包括 dist/hls。js或者 dist/hls。js

    或者类型

    npm install --save hls.js

    (可选)有一个声明文件可用于帮助您在IDE中为hls.js api完成代码和提示

    npm install --save-dev @types/hls.js

    兼容性

    hls.js 兼容支持MediaSource扩展( MSE )的浏览器和'视频/mp4'mime类型输入。

    在这里找到 MediaSource API的支持矩阵: https://developer.mozilla.org/en-US/docs/Web/API/MediaSource

    到目前为止,它支持:

    • 面向 Android 34 +的Chrome
    • 用于桌面 34 +的Chrome
    • 面向 Android 41 +的Firefox
    • 用于桌面 42 +的Firefox
    • 用于 Windows 8.1 +的IE11+
    • Windows 10 + 边缘
    • 桌面 Opera
    • 桌面 Vivaldi
    • 用于 Mac 8 +的Safari ( 测试版)

    请注意:iOS Safari"手机"不支持 MediaSource API。 Safari浏览器通过普通的视频"标签"源URL构建了HLS支持。 参见 上面 ( 正在启动) 以运行适当的特征检测,并在使用 hls.js 或者原生内置HLS支持之间进行选择。

    当一个平台既没有MediaSource也没有原生的支持时,你就不能播放。

    所有HLS资源必须提供 CORS头允许 GET 请求。

    特性

    • VoD &实时播放列表
      • 实时播放列表上的DVR支持
    • 分段MP4容器( 测试版)
    • MPEG-2 TS容器
      • ITU-T Rec. H.264和ISO/IEC 14496 -10基本流
      • iso/iec 13818 -7 ADTS基本流
      • ISO/IEC 11172 -3/ISO/IEC 13818 -3 ( mpeg-1/2 音频层 III ) 基本流
      • 元数据( ID3 ) 基本流分组
    • AAC容器( 仅音频流)
    • MPEG音频容器( mpeg-1/2 音频层III音频流)
    • 用于HTTP直播的时间元数据( 以ID3格式,以 MPEG-2 TS格式传送)
    • AES-128解密
    • SAMPLE-AES解密( 仅在使用 MPEG-2 TS容器时才支持)
    • 加密媒体扩展( 辐射辐射) 支持 DRM ( 数字版权管理)
      • Widevine CDM ( 测试版/实验) ( 请参见演示中的shaka包测试流)
    • cea-608/708字幕
    • WebVTT 字幕
    • 视频播放和实时播放列表的交替音频播放( 带备选音频的主播放列表)
    • 自适应流式处理
      • 手动&自动质量切换
        • 3 种质量切换模式可用( 可以通过API方式控制)
          • 即时切换( 当前视频位置的即时质量 switch )
          • 平滑切换( 用于下一个加载的fragment的质量 switch )
          • 带宽保守切换( 下一次加载的fragment的质量 switch 更改,不刷新缓冲区)
        • 在自动质量模式下,紧急 switch 降低,以防带宽突然下降以最小化缓冲。
    • 准确搜索VoD和Live(不限于片段或关键帧边界)
    • 能够在缓冲区和后台缓冲区中查找而无需重新加载段
    • 内置分析
      • 可以监视每个内部事件( 网络事件。视频事件)
      • 同时公开播放会话度量
    • 对错误的复原
      • 嵌入库中的重试机制
      • 恢复操作可以被触发修复致命媒体或者网络错误
    • 冗余/故障转移播放列表

    不支持( 还)

    • Windows 10 Edge的MP3基本流

    支持的M3U8标签

    许可证

    hls.js 在 Apache 2.0许可协议下发布。

    欢迎请求。下面是关于如何启动的快速指南。

    • 首先,检查存储库并安装所需的依赖项
    git clone https://github.com/video-dev/hls.js.git# setup dev environementcd hls.js
    npm install# build dist/hls.js, watch file change for rebuild and launch demo pagenpm run dev# lintnpm run lint
    • 使用 EditorConfig 或者至少保持与 .editorconfig 文件中定义的文件格式保持一致。
    • 在主题分支中开发,而不是master
    • 不要在你的程序中提交更新的dist/hls.js 文件。 我们将在发布新的标记版本之前,负责生成一个更新的构建。

    设计

    单击 这里

    测试

    Browser Stack Logo

    讨论
    Fansisi profile image