video元素相关方法
* 前缀为 chimee 自定义方法
我们可以把插件实例理解为 video 元素的子集映射。因此我们可以通过插件实例直接操作video。而插件上也有相应的方法和属性。
load
参数
- src
- 类型:
string
- 含义:视频地址
- 可选项
- 类型:
- option
- 类型:
Object
- 当你需要播放不同格式的视频流的时候,你需要使用不同的编码器。因此你需要告知我们你需要使用不同的编码器。此时我们会为你生成新的编码器并切换视频。
- isLive
- 类型:
boolean
- 是否是直播
- 类型:
- box
- 类型:
string
- 编码器类型:
native
、flv
、hls
- 类型:
- kernels
- 类型:
Object
- 新的编码器
load 方法会将地址设置到 video 元素上。之后才能进行相应的播放。
- 类型:
- isLive
- 类型:
play
播放视频的函数。
pause
暂停视频播放的函数
seek
参数
- second
- 类型:
number
- 含义:设置播放时间位置
seek
函数本质等同于设置 video 上的currentTime
。一般用于快进后退。在 chimee 上也可以直接设置currentTime
,并不一定需要运用此函数。
- 类型:
focus
自动聚焦到 video
元素上。
* $fullscreen
- 类型:
Function
- 参数:
- flag
- 类型:
boolean
- 含义是否需要全屏,
true
为全屏,false
为退出全屏。 - 默认:
true
- 类型:
- target
- 类型:
string
- 全屏的对象,可选
video
、container
和wrapper
- 默认:
container
全屏和退出全屏的相关操作。
- 类型:
- flag
关于全屏对象的设置可到插件介绍部分了解更多
requestFullscreen
- 类型:
Function
- 参数:
- target
- 类型:
string
- 全屏的对象,可选
video
、container
和wrapper
- 默认:`container
进入全屏
- 类型:
- target
exitFullscreen
- 类型:
Function
- 参数:
- target
- 类型:
string
- 全屏的对象,可选
video
、container
和wrapper
- 默认:`container
退出全屏
- 类型:
- target
canPlayType
- 类型:
Function
- 参数:
- mediaType
- 类型:
string
- 媒体 MIME 种类的字符串
- 类型:
- mediaType
- 返回
- 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.
- 类型:
- result
* $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
完成以下需求。
- 类型:
- 类型:
无缝切换同种视频
this.$silentLoad('http://cdn.toxicjohann.com/%E4%BA%8E%E6%98%AF.mp4');
- 多次尝试切换
this.$silentLoad('http://cdn.toxicjohann.com/%E4%BA%8E%E6%98%AF.mp4', {repeatTimes: 5, increment: 2});
在上例中,若加载失败将会重试多达四次。每次尝试时间分别是3、5、7、9、11秒。
- 切换不同种类的视频
this.$silentLoad('http://yunxianchang.live.ujne7.com/vod-system-bj/TL1ce1196bce348070bfeef2116efbdea6.flv', {
box: 'flv',
kernels: {
flv: chimeeKernelFlv
}
});
- 加载途中放弃
const option = {};
this.$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
事件。