chimee-plugin-controlbar

install

安装

  1. # 依赖于 chimee， 首先需要安装 chimee
  2. npm install chimee
  3. # 安装控制条组件
  4. npm install chimee-plugin-controlbar

使用

  1. import chimee from 'chimee';
  2. import chimeePluginControlbar from 'chimee-plugin-controlbar';
  4. // 安装插件
  5. chimee.install(chimeePluginControlbar);
  6. const player = new chimee({
  7.   // ...
  8.   // 使用插件
  9.   plugin: [
  10.     chimeePluginControlbar.name // 或者 'chimeeControl'
  11.   ]
  12. });

也可以在页面中引用 /lib/index.browser.js 然后在页面中使用 chimeePluginControlbar

配置

一个配置 ? 更详细的配置例子， 可以参考 /demo/index.html

  1. plugin: [{
  2.   name: chimeePluginControlbar.name,
  3.   majorColor: '',
  4.   hoverColor: '',
  5.   children: {
  6.     volume: {
  7.       icon: {
  8.         low: '',
  9.         high: ''
  10.       },
  11.       layout: 'vertical'
  12.     }
  13.   }
  14. }]

具体的参数配置

name

  • 类型： string
  • 含义： 该插件名字， 在 chimee 中使用需要名字，需要唯一对应
  • 值： 'chimeeControl' | chimeePluginControlbar.name
  • 必需

majorColor

  • 类型： string
  • 作用范围：
    • 该插件中，所有的 svg 图
    • 播放进度条，进度颜色
    • 声音控制条，音量颜色
  • 可选值： 十六进制颜色('#fff')
  • 默认值： '#de698c'
  • 非必需

hoverColor

  • 类型： string
  • 作用范围：
    • 该插件中，所有的 svg 图
  • 可选值： 十六进制颜色('#fff')
  • 默认值： '#4c4c4c'
  • 非必需

barShowByMouse

  • 类型： string
  • 作用：控制条显示由
    • move 触发 播放器的 mousemove 显示
    • enter/levae 鼠标进入/出，来控制 控制条显示／隐藏
  • 可选值： 'move', 'enter'
  • 默认值： 'move'
  • 非必需

hideBarTime

  • 类型： number
  • 作用：hidebar 延迟时间
  • 默认值： 2000
  • 注意：barShowByMouse 为 move 时有效，enter 时为0， 用户设置无效
  • 非必需

children

  • 类型： Object
  • 含义： 配置子组件是否展示／展示方式，还可以自己扩展子组件
  • 非必需
  • 目前支持的组件： play, progressTime, progressBar, volume, screen, clarity, playbackrate
目前支持的组件及配置

  • play

    • 类型： Object
    • 含义： 配置播放暂停键 icon 及事件
    • 默认： {}
    • 可配置属性：
      • 生命周期：
        • create: 插入 dom 节点, 完成事件注册
        • destroy
      • bitmap: true/ false 是否是位图，默认 false， 如果用户采用位图的话，则把当前的默认 svg 都清空掉， 用户通过 css background 来自己设置图片
      • icon: play / pause 图标， 支持 svg 图
      • animate: 当前是一个 svg path 动画，可以传 path 来实现你想要的动画
      • event: 绑定 dom 事件， this 指向这个插件， 通过 this.$dom 可以拿到 dom 节点
      • 注意： icon animate bitmap 都是配置图的。 bitmap 优先。其次 icon ，最后取 animate 中的值 配置 ?
  1. {
  2.   // 可以传两个 icon 来切换播放暂停状态
  3.   icon: {
  4.     play: '',
  5.     pause: ''
  6.   },
  7.   // 当前是一个 svg path 动画，可以传 path 来实现你想要的动画
  8.   animate: {
  9.     path: {
  10.       play: {
  11.         left: ''
  12.       },
  13.       pause: {
  14.         left: ''
  15.       }
  16.     }
  17.   },
  18.   // 可以指定 event 来绑定一些事件，默认 this 是该插件，而不是 dom
  19.   event: {
  20.     click () {
  21.       console.log('');
  22.     }
  23.   }
  24. }

  • progressTime

    • 类型： Object
    • 含义： 时间展示组件，用来展示播放时间／开播时间／视频总时长
    • 默认： {}
    • 可配置属性：
      • 生命周期：
        • create: 插入 dom 节点, 完成事件注册
        • destroy
      • event: 绑定 dom 事件， this 指向这个插件， 通过 this.$dom 可以拿到 dom 节点 配置 ?
  1. {
  2.   // 可以指定 event 来绑定一些事件，默认 this 是该插件，而不是 dom
  3.   event: {
  4.     click () {
  5.       console.log('');
  6.     }
  7.   }
  8. }

  • progressBar

    • 类型： Object | false
    • 含义： 进度条控制组件
    • 默认： {}, 属性值为 false 的时候，表示，他是一个占位符，不现实，可以区分左右，目前只有 progressbar 有这个功能
    • 可配置属性：
      • 生命周期：
        • create: 插入 dom 节点, 完成事件注册
        • destroy
      • layout: 有两种位置， 一是，居中布局。二是，位于整个控制条顶部。
        • 可选值： 'top' ／ 'baseline'(默认)
      • event: 绑定 dom 事件， this 指向这个插件， 通过 this.$dom 可以拿到 dom 节点 配置 ?
  1. {
  2.   layout: 'top',
  4.   // 可以指定 event 来绑定一些事件，默认 this 是该插件，而不是 dom
  5.   event: {
  6.     click () {
  7.       console.log('');
  8.     }
  9.   }
  10. }

  • volume

    • 类型： Object
    • 含义： 声音控制组件
    • 默认： {}
    • 可配置属性：
      • 生命周期：
        • create: 插入 dom 节点, 完成事件注册
        • destroy
      • layout: 有两种位置， 一是，垂直。二是，水平。
        • 可选值： 'vertical' ／ 'horizonal'(默认)
      • bitmap: true/ false 是否是位图，默认 false，如果用户采用位图的话，则把当前的默认 svg 都清空掉， 用户通过 css background 来自己设置图片
      • icon: 音量按钮的三个状态按钮，mute / low ／ high 最少写前两个
      • [暂时不支持]animate: 也可以配置，然后自己通过 css 来控制
      • event: 绑定 dom 事件， this 指向这个插件， 通过 this.$dom 可以拿到 dom 节点
      • 注意： icon bitmap 都是配置图的。 bitmap 优先。其次 icon 配置 ?
  1. volume: {
  2.   icon: {
  3.     low: ``,
  4.     mute: ``,
  5.     high: ``
  6.   },
  7.   layout: 'vertical',
  9.   // 可以指定 event 来绑定一些事件，默认 this 是该插件，而不是 dom
  10.   event: {
  11.     click () {
  12.       console.log('');
  13.     }
  14.   }
  15. },

  • screen

    • 类型： Object
    • 含义： 配置全屏／非全屏 icon 及事件
    • 默认： {}
    • 可配置属性：
      • 生命周期：
        • create: 插入 dom 节点, 完成事件注册
        • destroy
      • bitmap: true/ false 是否是位图，默认 false，如果用户采用位图的话，则把当前的默认 svg 都清空掉， 用户通过 css background 来自己设置图片
      • icon: full / small 图标， 支持 svg 图
      • event: 绑定 dom 事件， this 指向这个插件， 通过 this.$dom 可以拿到 dom 节点
      • 注意： icon bitmap 都是配置图的。 bitmap 优先。其次 icon 配置 ?
  1. {
  2.   // 可以传两个 icon 来切换播放暂停状态
  3.   icon: {
  4.     full: '',
  5.     small: ''
  6.   },
  8.   // 可以指定 event 来绑定一些事件，默认 this 是该插件，而不是 dom
  9.   event: {
  10.     click () {
  11.       console.log('');
  12.     }
  13.   }
  14. }

  • clarity

    • 类型： Object
    • 含义： 切换清晰度组件
    • 默认： {}
    • 可配置参数
      • 生命周期：
        • create: 插入 dom 节点, 完成事件注册
        • destroy
      • list: []
      • duration
        • 类型：number
        • 默认：3
        • 单次视频加载的时长
        • 若在规定的时间段内加载不成功，则放弃此次任务。
        • 单位为秒，对应于主视频的播放时间，也就是说若主视频暂停播放，则时间停滞，但加载仍继续。
      • bias
        • 类型：number
        • 默认：0
        • 偏差区间，单位为秒
        • 若该值小于等于0，则在主视频播放到或超过约定时间点直接切换，若新视频加载失败，则放弃此次切换。
        • 若该值大于0，则当主视频播放到约定时间偏差区间里，一旦视频加载成功就切换。若超出偏差空间，则放弃此次切换。
      • repeatTimes
        • 类型：number
        • 默认：0
        • 重复次数
        • 若加载视频失败，则自动重新加载，直至重复次数耗尽。默认不重复加载。
      • increment
        • 类型：number
        • 默认：0
        • 每次重复时递增的时间，单位为秒
        • 一般而言加载失败都是因为超时加载失败，故每次重复的时候应相应延长加载时间。每次重复加载都会相应叠加该值对应的时间。
      • immediate
        • 类型：boolean
        • 默认：false
        • 新视频加载成功后是否立即切换无需等待到约定时间。
        • 注意空数组时不展示 配置 ?
  1. {
  2.   list: [
  3.     {name: '标清', src:''},
  4.     {name: '高清', src: ''},
  5.     {name: '原画', src: ''}
  6.   ],
  7.   // 可以指定 event 来绑定一些事件，默认 this 是该插件，而不是 dom
  8.   event: {
  9.     click () {
  10.       console.log('');
  11.     }
  12.   }
  13. }

直播切流测试： http://chimee.org/demo/live-clarity.html

点播切流测试： http://chimee.org/demo/clarity.html

  • playbackrate

    • 类型： Object
    • 含义： 切换播放倍速组件
    • 默认： {}
    • 可配置参数
      • 生命周期：
        • create: 插入 dom 节点, 完成事件注册
        • destroy
      • list: []
        • defualt: 默认播放速率 boolean值
    • 注意空数组时不展示 配置 ?
  1. {
  2.   // default 通过设置 default 来标明当前播放速率
  3.   list: [
  4.     {name: '0.5倍速', value: 0.5},
  5.     {name: '1倍速', value: 1, default: true},
  6.     {name: '2倍速', value: 2}
  7.   ],
  8.   // 可以指定 event 来绑定一些事件，默认 this 是该插件，而不是 dom
  9.   event: {
  10.     click () {
  11.       console.log('');
  12.     }
  13.   }
  14. }

  • 自定义组件

    • 类型： Object
    • 含义： 自定义组件
    • 可配置属性：
      • 生命周期：
        • create: 插入 dom 节点, 完成事件注册
        • destroy
      • tag: 自定义标签名
      • html: 自定义标签中的 html 内容
      • event: 绑定 dom 事件， this 指向这个插件， 通过 this.$dom 可以拿到 dom 节点
    • 注意： css 写在自己项目中就好了 配置 ?
  1. {
  2.   tag: '',
  3.   html: ``,
  4.   // 可以指定 event 来绑定一些事件，默认 this 是该插件，而不是 dom
  5.   event: {
  6.     click () {
  7.       console.log('');
  8.     }
  9.   }
  10. }
组件相关问题
  • Q: 子组件的默认顺序是什么？

A: 在 children 没有配置的情况下会采用下面的顺序

  • 注意：根据 chimee 的参数 isLive 来判断是否是直播还是点播

  • 直播： play, progressTime, volume, screen

  • 点播： play, progressTime, progressTime, volume, screen

  • 如果用户配置了， 则按照用户的配置走，不论是否是直播还是点播

  • Q: 我可以控制顺序吗？

A: 在 children 对象中，属性的书写顺序就是渲染顺序

  • 注意， progressbar 可以作为一个占位符存在
    • Q: 为什么我配置了一个组件后，其他默认组件就都不存在了？

A: 假如 children 配置后， 会读 children 的属性，并渲染， 不会补充其他组件，所以，需要你把所有的组件都写.

方法

  • updateClarity

    • 含义： 更新清晰度列表
    • 参数：Array 清晰度列表 配置 ?
  1. function updateClarity() {
  2.   player.load('http://yunxianchang.live.ujne7.com/vod-system-bj/103_368b70a5d4f-c5cc-42ff-b442-004168fc86a3.mp4');
  3.   player.on('load', function () { // 在 load 事件后
  4.     player.$plugins.chimeeControl.updateClarity([
  5.       {name: '标清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_368b70a5d4f-c5cc-42ff-b442-004168fc86a3.mp4'},
  6.       {name: '高清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_369ed890f51-1c38-42a7-9ce2-828492660c60.mp4'},
  7.       {name: '超清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_370cc2f40bd-a39f-472a-884f-f44fcd9c5ae0.mp4'},
  8.       {name: '原画', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_371ab0c0fda-143d-4755-8727-d3cd12dce02d.mp4'}
  9.     ]);
  10.   });
  11. }

最后

欢迎各位大佬使用。有什么问题／建议，随时提。