chimee 的播放器特性

chimee 作为一款播放器框架，其本质仍然是一个播放器。所以我们首先学习如何将其当作一个播放器使用。

点播播放器

生成一个 chimee 播放器实例十分简单。我们只需要传入一个 dom 节点即可。当然你也可以传入一个可以获取到 dom 节点的选择器。

假设我们的页面上有一个 id 为 wrapper 的节点。我们可以这么编写。

  1. import Chimee from 'chimee';
  2. const chimee = new Chimee('#wrapper');

紧接着我们传入一个地址并播放之。

  1. chimee.load('http://cdn.toxicjohann.com/lostStar.mp4');
  2. chimee.play();

这样我们就实现了一个简单的点播播放器。

直播播放器

在直播需求如此强烈的今天，直播播放器也是必不可少的。 chimee 也具有直播能力，不过需要我们安装一些编解码器。我们以常见的 m3u8 直播为例讲解下使用方式。

移动端

因为大部分的移动端都具有播放 m3u8 的能力，所以如果你是使用 m3u8 进行直播，只要增加多一个选项就好了。

chimee 在生成的时候支持使用 Object 的格式传入多个参数，可以点击链接了解更多。 
  1. import Chimee from 'chimee';
  2. const chimee = new Chimee({
  3.   wrapper: '#wrapper',
  4.   src: 'http://xxxx.m3u8',
  5.   isLive: true,
  6. });

isLive 参数会告知底层编码器这个流是直播流。部分 ui 插件也会根据这个值作出不同的行为。

PC 端

PC 端因为本身没有 m3u8 能力，所以我们需要使用 chimee-kernel-hls 进行编解码。 Chimes-kernel-hls 是对 hls.js 的二次封装。

我们通过 kernels 选项引入解码器，可以点解链接了解更多。 
  1. import Chimee from 'chimee';
  2. import ChimeeKernelHls from 'chimee-kernel-hls';
  3. const chimee = new Chimee({
  4.   wrapper: '#wrapper',
  5.   src: 'http://xxxxx.m3u8',
  6.   isLive: true,
  7.   kernels: {
  8.     hls: ChmeeKernelHls,
  9.   },
  10. });

播放操作

单个视频的播放操作主要包括播放、暂停、快进。在 chimee 上的调用也是非常简单的。

我们直接调用对应的函数就好了。

  1. ...
  2. chimee.play(); // 播放
  3. chimee.pause(); // 暂停
  4. chimee.seek(20); // 跳转到第 20 秒
  5. ...

动态加载视频

在常见的业务中，我们播放的视频源一般都不止一个。所以我们也支持在生命周期切换视频源。

如果我们是相同类型的视频源，我们只要直接更改 src 属性或者利用 load 函数即可。

  1. // 通过 src 更改调整视频源
  2. chimee.src = 'http://cdn.toxicjohann.com/lostStar.mp4';
  4. // 通过 load 方法更改视频源
  5. chimee.load('http://cdn.toxicjohann.com/lostStar.mp4');

在某些业务场景下，我们甚至会在一个页面内播放不同的视频源。在不同的视频源间，我们也支持动态切换，但我们需要传入更多的必要参数。

假设我们的页面正在播放 mp4 的视频源，现在要切换到 flv 视频源，我们利用下述代码进行模拟。

  1. import Chimee from 'chimee';
  2. import ChimeeKernelFlv from 'chimee-kernel-flv';
  4. const chimee = new Chimee({
  5.   wrapper: '#wrapper',
  6.   src:'http://cdn.toxicjohann.com/lostStar.mp4',
  7.   autoplay: true,
  8. });
  10. // 三秒后进行视频切换
  11. setTimeout(() => {
  12.   chimee.load({
  13.     src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/TL1ce1196bce348070bfeef2116efbdea6.flv',
  14.       box: 'flv',
  15.       kernels: {
  16.       flv: {
  17.           handler: ChimeeKernelFlv,
  18.           stashSize: 1000 * 1000 * 1024,
  19.       },
  20.     },
  21.   });
  22. }, 3000);

在上述模拟中我们在切换的时候才传入编解码器，其实我们也可以预先安装编解码器。

  1. import Chimee from 'chimee';
  2. import ChimeeKernelFlv from 'chimee-kernel-flv';
  4. const chimee = new Chimee({
  5.   wrapper: '#wrapper',
  6.   src:'http://cdn.toxicjohann.com/lostStar.mp4',
  7.   autoplay: true,
  8.   kernels: {
  9.     flv: {
  10.       handler: ChimeeKernelFlv,
  11.       stashSize: 1000 * 1000 * 1024,
  12.     },
  13.   },
  14. });
  16. // 三秒后进行视频切换
  17. setTimeout(() => {
  18.   chimee.load({
  19.     src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/TL1ce1196bce348070bfeef2116efbdea6.flv',
  20.       box: 'flv',
  21.   });
  22. }, 3000);
动态加载主要依赖于 load 进行实现，点击此处了解更多。

另外要注意到，load 方法返回一个 Promise。

因为 load 方法是允许插件异步处理的，所以如果希望在 load 成功后立即播放，应该按照如下方法编写：

  1. import Chimee from 'chimee';
  3. const chimee = new Chimee('#wrapper');
  5. async function loadAndPlay(src) {
  6.   await chimee.load(src);
  7.   chimee.play();
  8. }
  10. loadAndPlay('http://cdn.toxicjohann.com/lostStar.mp4');

静默动态加载视频

load 函数有一个缺点，他在加载的时候会移除掉原视频源。在某些场景下，我们希望原视频源能够正常播放，知道新视频源加载成功后才进行对应的切换。像切换清晰度就是常见的场景。

所以 chimee 提供了 silentLoad 方法以满足需求，我们以以下代码为例。

  1. import Chimee from 'chimee';
  2. const player = new Chimee({
  3.   src: 'http://cdn.toxicjohann.com/lostStar.mp4',
  4.   wrapper: '#wrapper',
  5.   autoplay: true
  6. });
  7. player.$silentLoad('http://cdn.toxicjohann.com/%E4%BA%8E%E6%98%AF.mp4');

某些场景下我们的网络状况不是很好，此时我们可以增加多几次尝试。

  1. import Chimee from 'chimee';
  2. const player = new Chimee({
  3.   src: 'http://cdn.toxicjohann.com/lostStar.mp4',
  4.   wrapper: '#wrapper',
  5.   autoplay: true
  6. });
  7. player.$silentLoad('http://cdn.toxicjohann.com/%E4%BA%8E%E6%98%AF.mp4', {repeatTimes: 5, increment: 2});
同样的 silentLoad 也支持多类型切换。并且可以设置重试机制。点击此处了解更多。

精确控制加载流程

对于如 hls.js 等内核，他们支持对加载流程更加精细的控制。例如 hls.js 支持 startLoad 和 stopLoad 方法。

通过这些方法，我们可以实现诸如在用户暂停的时候停止拉流等精细化操作，节省用户的流量。

  1. import Chimee from 'chimee';
  2. import ChimeeKernelHls from 'chimee-kernel-hls';
  4. const chimee Chimee({
  5.   src: 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8',
  6.   // 编解码容器
  7.   box: 'hls', // flv hls mp4
  8.   // dom容器
  9.   wrapper: '#wrapper',
  10.   kernels: {
  11.     hls: ChimeeKernelHls,
  12.   },
  13.   autoplay: true,
  14.   controls: true,
  15. });
  16. player.on('after_pause', function() {
  17.   this.stopLoad();
  18. });
  19. player.on('after_play', function() {
  20.   this.startLoad();
  21. });

播放器属性

我们在 chimee 上也可以直接操作播放器的属性。因为属性较多，就不一一列举了，大家可以前往 api 文档进行观看。

以上就是 chimee 和播放器相关的一些介绍，感谢你的阅读。