Chimee API 介绍 - video元素相关方法 - 《Chimee 一套可扩展的H5视频播放器组件化框架》

video元素相关方法

video元素相关方法

* 前缀为 chimee 自定义方法

我们可以把 chimee 实例理解为 video 元素的子集映射。因此我们可以通过 chimee 实例直接操作video。而 chimee 上也有相应的 video 方法。

load

参数

src
- 类型：string
- 含义：视频地址
- 可选项
option
- 类型：Object
- 当你需要播放不同格式的视频流的时候，你需要使用不同的编码器。因此你需要告知我们你需要使用不同的编码器。此时我们会为你生成新的编码器并切换视频。
  - isLive
    - 类型：boolean
    - 是否是直播
  - box
    - 类型：string
    - 编码器类型：native、flv、hls
  - kernels
    - 类型：Object
    - 新的编码器
      load 方法会将地址设置到 video 元素上。之后才能进行相应的播放。我们可以利用load完成如下需求。

如一开始未设地址，利用 load 添加地址。

import Chimee from 'chimee';
const chimee = new Chimee('#wrapper');
chimee.load('http://cdn.toxicjohann.com/lostStar.mp4');

或已设地址，利用 load 附着到 video 上。

import Chimee from 'chimee';
const chimee = new Chimee({
  wrapper: '#wrapper',
  src:'http://cdn.toxicjohann.com/lostStar.mp4'
});
chimee.load();

又或者运行时更换地址。

import Chimee from 'chimee';
const chimee = new Chimee('#wrapper');
chimee.load('http://cdn.toxicjohann.com/lostStar.mp4');
.....
chimee.load('http://cdn.toxicjohann.com/%E4%BA%8E%E6%98%AF.mp4');

甚至是播放不同类型的视频。

import Chimee from 'chimee';
import ChimeeKernelFlv from 'chimee-kernel-flv';
const chimee = new Chimee({
  wrapper: '#wrapper',
  src:'http://cdn.toxicjohann.com/lostStar.mp4',
  autoplay: true
});
...
chimee.load('http://yunxianchang.live.ujne7.com/vod-system-bj/TL1ce1196bce348070bfeef2116efbdea6.flv', {
  box: 'flv',
  kernels: {
    flv: ChimeeKernelFlv
  }
})

load 在 v0.7.1 后支持更简便的写法。

import Chimee from 'chimee';
import ChimeeKernelFlv from 'chimee-kernel-flv';
const chimee = new Chimee({
  wrapper: '#wrapper',
  src:'http://cdn.toxicjohann.com/lostStar.mp4',
  autoplay: true
});
...
chimee.load({
  src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/TL1ce1196bce348070bfeef2116efbdea6.flv',
  box: 'flv',
  kernels: {
    flv: ChimeeKernelFlv
  }
})

同样的，因为我们传入的是 kernels ，所以我们也可以定义一些 kernels 的参数。

import Chimee from 'chimee';
import ChimeeKernelFlv from 'chimee-kernel-flv';
const chimee = new Chimee({
  wrapper: '#wrapper',
  src:'http://cdn.toxicjohann.com/lostStar.mp4',
  autoplay: true
});
...
chimee.load({
  src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/TL1ce1196bce348070bfeef2116efbdea6.flv',
  box: 'flv',
  kernels: {
    flv: {
      handler: ChimeeKernelFlv,
      stashSize: 1000 * 1000 * 1024,
    },
  }
})

load 方法会触发 load 系列事件，你可以通过插件 beforeLoad 阻截或挂起事件，也可以通过load事件阻止冒泡等。要了解更多相关知识，可以阅读插件的事件机制。

load 会在以下情况切换内部 kernel。- 播放的 box 不是 native- 播放的 box 和原 box 不一致- 传入新的 option 参数的时候

play

播放视频的函数。

play 方法会触发 play 系列事件，你可以通过插件 beforePlay 阻截或挂起事件，也可以通过play事件阻止冒泡等。要了解更多相关知识，可以阅读插件的事件机制。

pause

暂停视频播放的函数

pause 方法会触发 pause 系列事件，你可以通过插件 beforePasue 阻截或挂起事件，也可以通过pause事件阻止冒泡等。要了解更多相关知识，可以阅读插件的事件机制。

seek

参数

second
- 类型：number
- 含义：设置播放时间位置
  seek函数本质等同于设置 video 上的 currentTime。一般用于快进后退。在 chimee 上也可以直接设置 currentTime，并不一定需要运用此函数。

seek 方法会触发 seek 系列事件，你可以通过插件 beforeSeek 阻截事件，也可以通过seek事件阻止冒泡等。要了解更多相关知识，可以阅读插件的事件机制。

startLoad

开始视频源的加载（现在只有 hls 和 native 模式支持）

stopLoad

暂停视频源的加载

其中 chimee-kernel-flv.js 和 native 模式均是将 src 移除。

而 chimee-kernel-flv 和 chimes-kernel-hls 则是暂停加载。

focus

自动聚焦到 video 元素上。

canPlayType

参数

mediaType
- 类型：string
- 媒体 MIME 种类的字符串
  返回
result
- 类型：string
- 'probably': The specified media type appears to be playable.
- 'maybe': Cannot tell if the media type is playable without playing it.
- '' (empty string): The specified media type definitely cannot be played.

* $silentLoad

静默加载视频。视频在规定时间内加载成功，则无缝切换视频源，多用于清晰度切换。

若视频加载失败可进行重试。

无缝切换的本质是，在后台打开一个新视频源并加载到约定时间，当主视频播放到约定时间后进行切换。

参数

src
- 类型：string
- 播放地址
option
- 类型：Object
- duration
  - 类型：number
  - 默认：3
  - 单次视频加载的时长
  - 若在规定的时间段内加载不成功，则放弃此次任务。
  - 单位为秒，对应于主视频的播放时间，也就是说若主视频暂停播放，则时间停滞，但加载仍继续。
- bias
  - 类型：number
  - 默认：0
  - 偏差区间，单位为秒
  - 若该值小于等于0，则在主视频播放到或超过约定时间点直接切换，若新视频加载失败，则放弃此次切换。
  - 若该值大于0，则当主视频播放到约定时间偏差区间里，一旦视频加载成功就切换。若超出偏差空间，则放弃此次切换。
- repeatTimes
  - 类型：number
  - 默认：0
  - 重复次数
  - 若加载视频失败，则自动重新加载，直至重复次数耗尽。默认不重复加载。
- increment
  - 类型：number
  - 默认：0
  - 每次重复时递增的时间，单位为秒
  - 一般而言加载失败都是因为超时加载失败，故每次重复的时候应相应延长加载时间。每次重复加载都会相应叠加该值对应的时间。
- isLive
  - 类型：boolean
  - 默认：原主视频设定
  - 是否是直播
  - 若是直播，则默认使用 immediate 模式
- box
  - 类型：boolean
  - 默认：原主视频设定
  - 编解码容器
- kernels
  - 类型：Object
  - 默认：原主视频设定
  - 预设的解码器
- abort
  - 类型：Object
  - 默认：false
  - 是否放弃本次加载，当该值为 true 时，将放弃本次视频加载。
- immediate
  - 类型：Object
  - 默认：false
  - 新视频加载成功后是否立即切换无需等待到约定时间。
    我们可以利用 $silentLoad 完成以下需求。
无缝切换同种视频

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

多次尝试切换

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

在上例中，若加载失败将会重试多达四次。每次尝试时间分别是3、5、7、9、11秒。

切换不同种类的视频

import Chimee from 'chimee';
import chimeeKernelFlv from 'chimee-kernel-flv';
const player = new Chimee({
  src: 'http://cdn.toxicjohann.com/lostStar.mp4',
  wrapper: '#wrapper',
  autoplay: true
});
player.$silentLoad('http://yunxianchang.live.ujne7.com/vod-system-bj/TL1ce1196bce348070bfeef2116efbdea6.flv', {
  box: 'flv',
  kernels: {
    flv: chimeeKernelFlv
  }
});

加载途中放弃

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

requestPictureInPicture（v0.11.0后支持）

画中画指 Picture-in-Picture Api。点击此处可观看 google chrome 最新的 demo。

为此， chimee 也给用户提供了相关的 api。

在不支持画中画功能的浏览器上，我们使用 canvas 模拟画中画图标。

该函数为异步函数，无需传入参数。

调用此方法会触发enterpictureinpicture事件。

exitPictureInPicture（v0.11.0后支持）

退出画中画模式。

同步函数，无需传入参数。

调用此方法会触发leavepictureinpicture事件。