前端在浏览器端播放直播流协议的方式

直播流协议2种：.flv后缀是http-flv协议，.m3u8后缀是hls协议

一、播放.m3u8

1、hls.js

HLS (HTTP Live Streaming)是Apple公司研发的流媒体传输技术，包括一个m3u8的索引文件、多个ts分片文件和key加密串文件。这项技术主要应用于点播和直播领域。

hls.js是一个JavaScript库，可实现HTTP Live Streaming客户端。 它依靠HTML5视频和MediaSource扩展进行播放。

它通过将MPEG-2传输流和AAC / MP3流转换为ISO BMFF（MP4）片段来工作。 如果在浏览器中可用，可以使用Web Worker异步执行此转换。 WWDC2016期间宣布，hls.js还支持HLS + fmp4

hls.js不需要任何播放器，它可以直接在标准HTML 元素上运行。

hls.js用ECMAScript6（* .js）和TypeScript（* .ts）（ES6的强类型超集）编写，并使用TypeScript编译器在ECMAScript5中进行编译。

特征

• VOD 和现场播放列表
• 实时播放列表上的 DVR 支持
• 碎片化的 MP4 容器
• MPEG-2 TS 容器
• ITU-T 建议书 H.264 和 ISO/IEC 14496-10 基本流
• ISO/IEC 13818-7 ADTS AAC 基本流
• ISO/IEC 11172-3 / ISO/IEC 13818-3（MPEG-1/2 Audio Layer III）基本流
• 打包元数据 (ID3v2.3.0) 基本流
• AAC 容器（仅音频流）
• MPEG 音频容器（MPEG-1/2 Audio Layer III 仅音频流）
• HTTP Live Streaming 的定时元数据（ID3 格式，MPEG-2 TS 承载）
• AES-128 解密
• SAMPLE-AES 解密（仅当使用 MPEG-2 TS 容器时才支持）
• 对 DRM（数字权限管理）的加密媒体扩展 (EME) 支持
• Widevine CDM（仅在演示页面上使用shaka-packager test-stream 进行测试）
• CEA-608/708 字幕
• WebVTT 字幕
• 用于 VoD 和现场播放列表的备用音轨再现（带有备用音频的主播放列表）
• 自适应流媒体
• 手动和自动质量切换
  • 3种质量切换模式可用（可通过API方式控制）
    • 即时