简介
chimee-kernel-hls 是一款基于 HLS 协议的流媒体播放内核，支持大部分 H5 播放器和视频应用。
安装
可以通过 npm 安装：
npm install chimee-kernel-hls
也可以使用 CDN，直接在页面中引入 https://unpkg.com/chimee-kernel-hls@latest/dist/index.js
示例
初始化播放器
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------ ----------
----- ---------------- ----------------------------------------------------------------------
-------
------
---- -------------------
------- -----------------------------------------------------------------------------
------- -----------------------------------------------------------------------------------
--------
-------------
-------- -----------
---- -------------------------------
------- -------------------
---
---------
-------
-------配置播放器
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------ ----------
----- ---------------- ----------------------------------------------------------------------
-------
------
---- -------------------
------- -----------------------------------------------------------------------------
------- -----------------------------------------------------------------------------------
--------
-------------
-------- -----------
---- -------------------------------
------- --------------------
---- --------- -- ------
--------- ----- -- ------
---
---------
-------
-------API
构造函数
new ChimeeKernelHLS(config)
配置项
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| src | String | 视频源地址 | |
| box | String | 'mp4' | 指定渲染方式，可选值为 'native' 或 'mse' |
| defaultMseBufferCache | Boolean | false | 是否开启 MSE 回放缓存，默认关闭 |
指南
在使用 chimee-kernel-hls 之前，我们需要了解以下几个专业术语：
- M3U8：是一种流媒体播放列表文件格式，是基于 HTTP Live Streaming（HLS）协议的。
- 渲染引擎：一般是指浏览器自带的渲染引擎，比如 Chrome 使用的 Blink 引擎，Firefox 使用的 Gecko 引擎。在 H5 播放器中，我们还可以自己选择使用原生渲染引擎或 MSE 引擎进行视频渲染。
- 缓存：为了提高 H5 视频播放体验，我们引入了回放缓存和预加载缓存机制，提前加载一段视频并缓存起来，以便下次播放时能够更快地开始播放。
下面介绍一些常用的配置项，帮助读者更好地使用 chimee-kernel-hls。
autoplay
autoplay 默认为 false，如果需要自动播放，可以配置为 true。
chimee.init({
wrapper: '#wrapper',
src: 'http://example.com/demo.m3u8',
kernel: 'chimee-kernel-hls',
autoplay: true
});box
box 属性可以指定渲染引擎，可选值为 'native' 和 'mse'。如果值为 'native'，则使用浏览器自带的渲染引擎；如果值为 'mse'，则使用 MSE 引擎，可以提高视频播放体验，但是可能存在兼容性问题，建议谨慎使用。
chimee.init({
wrapper: '#wrapper',
src: 'http://example.com/demo.m3u8',
kernel: 'chimee-kernel-hls',
box: 'mse'
});defaultMseBufferCache
defaultMseBufferCache 属性用于开启 MSE 回放缓存机制，可以提高视频播放体验。如果开启了回放缓存，当播放进度回退时，不会丢失之前已经播放过的内容。
chimee.init({
wrapper: '#wrapper',
src: 'http://example.com/demo.m3u8',
kernel: 'chimee-kernel-hls',
defaultMseBufferCache: true
});结论
chimee-kernel-hls 是一款基于 HLS 协议的流媒体播放内核，支持大多数 H5 播放器和视频应用。使用该内核前，请了解相关专业术语、渲染引擎和缓存机制，希望能够帮助读者更好地使用和掌握该工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcbeeb5cbfe1ea06126bb