video元素相关属性

* 前缀为 chimee 自定义属性

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

src

  • 类型:string
  • 含义:播放地址
  • 默认:''
  • 如果 autoload 属性为 true, 则设置地址后会进行加载。否则,则需要调用 load 方法进行加载。

* isLive

  • 类型:boolean
  • 含义:播放类型
  • 可选:false(点播)和 true(直播)
  • 只读属性

* box

  • 类型:string
  • 含义:视频编码
  • 可选:flvnativehls
  • 只读属性

* preset ?(v0.4.0废弃,请使用 kernels )

  • 类型: Object
  • 含义: 播放器核心解码器。因为体积问题,chimee 默认仅支持原生播放器,如果需要支持其余解码方式请引入相应的解码器。
  • 默认: {}
  1. import Flv from 'chimee-kernel-flv';
  2. const player = new Chimee({
  3. src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/TL1ce1196bce348070bfeef2116efbdea6.flv',
  4. preset: {
  5. flv: Flv
  6. },
  7. // 编解码容器
  8. box: 'flv', // flv hls mp4
  9. // dom容器
  10. wrapper: '#wrapper',
  11. // video
  12. autoplay: true,
  13. controls: true
  14. })

* kernels

  • 类型: Object
  • 含义: 播放器核心解码器。因为体积问题,chimee 默认仅支持原生播放器,如果需要支持其余解码方式请引入相应的解码器。
  • 默认: undefined
  1. import Flv from 'chimee-kernel-flv';
  2. const player = new Chimee({
  3. src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/TL1ce1196bce348070bfeef2116efbdea6.flv',
  4. kernels: {
  5. flv: Flv
  6. },
  7. // 编解码容器
  8. box: 'flv', // flv hls mp4
  9. // dom容器
  10. wrapper: '#wrapper',
  11. // video
  12. autoplay: true,
  13. controls: true
  14. })

有的时候我们需要为 kernel 配置单独的参数。这个时候我们可以用如下方式传入参数。

  1. import Flv from 'chimee-kernel-flv';
  2. const player = new Chimee({
  3. src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/TL1ce1196bce348070bfeef2116efbdea6.flv',
  4. kernels: {
  5. flv: {
  6. handler: Flv,
  7. stashSize: 1000 * 1000 * 1024,
  8. },
  9. },
  10. // 编解码容器
  11. box: 'flv', // flv hls mp4
  12. // dom容器
  13. wrapper: '#wrapper',
  14. // video
  15. autoplay: true,
  16. controls: true
  17. })

buffered

  • 类型:TimeRanges
  • 含义:video 上的 buffered,代表已缓冲内容。
  • 只读属性

duration

  • 类型:number
  • 含义:video 上的 duration, 代表视频时长
  • 只读属性

volume

  • 类型:number
  • 含义:video 上的 volume,代表音量

currentTime

  • 类型:number
  • 含义:video 上的 currentTime,代表播放位置,可用于快进后退

autoplay

  • 类型:boolean
  • 含义:是否自动播放
  • 默认:false
  • 注意:在部分浏览器中这个动态设定没有效果,详见video属性部分

controls

  • 类型:boolean
  • 含义:是否展示控制条
  • 默认:false
  • 注意:如果安装了控制条插件,该方法可能会被插件所劫持。变为是否展示插件所制作的控制条。

width

  • 类型:number | string | void
  • 含义:video 的宽度
  • 默认:100%

height

  • 类型:number | string | void
  • 含义:video 的高度
  • 默认:100%

crossOrigin

  • 类型:string | void
  • 含义:宽度
  • 默认:undefined

loop

  • 类型:boolean
  • 含义:是否循环
  • 默认:false

defaultMuted

  • 类型:boolean
  • 含义:video 上的 muted 属性
  • 默认: false

muted

  • 类型:boolean
  • 含义: 代表是否静音
  • 默认:false

preload

  • 类型:string
  • 含义:视频的预加载策略
  • 默认:auto
  • 可选项: 'auto', 'metadata', 'none', ''

poster

  • 类型:string
  • 含义:视频封面
  • 默认:''

playsInline

  • 类型:boolean
  • 含义:是否内连播放,会添加相应的兼容属性,详细见上方 video 属性
  • 默认:false

x5VideoPlayerFullscreen

  • 类型:boolean
  • 含义:x5-video-player-fullscreen
  • 默认:false

x5VideoOrientation

  • 类型:string | void
  • 含义:x5-video-orientation,可选landscapeprotraint
  • 默认:undefined

xWebkitAirplay

  • 类型:boolean
  • 含义:x-webkit-airplay
  • 默认:false

playbackRate

  • 类型:number
  • 含义:回放速率,1代表正常,大于1代表加速,小于1代表减速
  • 默认:1

defaultPlaybackRate

  • 类型:number
  • 含义:默认回放速率,1代表正常,大于1代表加速,小于1代表减速
  • 默认:1

disableRemotePlayback

  • 类型:boolean
  • 默认:false

inPictureInPictureMode(v0.11.0后支持)

  • 类型:boolean
  • 含义:该对象是否在画中画模式中
  • 默认:false
还有更多属性可以直接获取,如下buffered, currentSrc, duration, error, ended, networkState, paused, readyState, seekable, sinkId, controlsList, tabIndex, dataset, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth如果你需要的属性没有暴露,可以通过 issue 向我们反映。