Nautical Pirate Moustache

    chimee-plugin-controlbar

    0.4.11 • Public • Published

    chimee-plugin-controlbar

    install

    安装

    # 依赖于 chimee, 首先需要安装 chimee 
    npm install chimee
    # 安装控制条组件 
    npm install chimee-plugin-controlbar

    使用

    import chimee from 'chimee';
    import chimeePluginControlbar from 'chimee-plugin-controlbar';
     
    // 安装插件
    chimee.install(chimeePluginControlbar);
    const player = new chimee({
      // ...
      // 使用插件
      plugin: [
        chimeePluginControlbar.name // 或者 'chimeeControl'
      ]
    });

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

    配置

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

    plugin: [{
      name: chimeePluginControlbar.name,
      majorColor: '',
      hoverColor: '',
      children: {
        volume: {
          icon: {
            low: '',
            high: ''
          },
          layout: 'vertical'
        }
      }
    }]

    具体的参数配置

    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 中的值

      配置 🌰

      {
        // 可以传两个 icon 来切换播放暂停状态
        icon: {
          play: '',
          pause: ''
        },
        // 当前是一个 svg path 动画,可以传 path 来实现你想要的动画
        animate: {
          path: {
            play: {
              left: ''
            },
            pause: {
              left: ''
            }
          }
        },
        // 可以指定 event 来绑定一些事件,默认 this 是该插件,而不是 dom
        event: {
          click () {
            console.log('');
          }
        }
      }
    • progressTime

      • 类型: Object
      • 含义: 时间展示组件,用来展示播放时间/开播时间/视频总时长
      • 默认: {}
      • 可配置属性:
        • 生命周期:
          • create: 插入 dom 节点, 完成事件注册
          • destroy
        • event: 绑定 dom 事件, this 指向这个插件, 通过 this.$dom 可以拿到 dom 节点

      配置 🌰

      {
        // 可以指定 event 来绑定一些事件,默认 this 是该插件,而不是 dom
        event: {
          click () {
            console.log('');
          }
        }
      }
    • progressBar

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

      配置 🌰

      {
        layout: 'top',
       
        // 可以指定 event 来绑定一些事件,默认 this 是该插件,而不是 dom
        event: {
          click () {
            console.log('');
          }
        }
      }
    • 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

      配置 🌰

      volume: {
        icon: {
          low: ``,
          mute: ``,
          high: ``
        },
        layout: 'vertical',
       
        // 可以指定 event 来绑定一些事件,默认 this 是该插件,而不是 dom
        event: {
          click () {
            console.log('');
          }
        }
      },
    • 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

      配置 🌰

      {
        // 可以传两个 icon 来切换播放暂停状态
        icon: {
          full: '',
          small: ''
        },
       
        // 可以指定 event 来绑定一些事件,默认 this 是该插件,而不是 dom
        event: {
          click () {
            console.log('');
          }
        }
      }
    • clarity

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

      配置 🌰

      {
        list: [
          {name: '标清', src:''},
          {name: '高清', src: ''},
          {name: '原画', src: ''}
        ],
        // 可以指定 event 来绑定一些事件,默认 this 是该插件,而不是 dom
        event: {
          click () {
            console.log('');
          }
        }
      }

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

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

    • playbackrate

      • 类型: Object
      • 含义: 切换播放倍速组件
      • 默认: {}
      • 可配置参数
        • 生命周期:
          • create: 插入 dom 节点, 完成事件注册
          • destroy
        • list: []
          • defualt: 默认播放速率 boolean值
      • 注意空数组时不展示

      配置 🌰

      {
        // default 通过设置 default 来标明当前播放速率
        list: [
          {name: '0.5倍速', value: 0.5},
          {name: '1倍速', value: 1, default: true},
          {name: '2倍速', value: 2}
        ],
        // 可以指定 event 来绑定一些事件,默认 this 是该插件,而不是 dom
        event: {
          click () {
            console.log('');
          }
        }
      }
    • 自定义组件

      • 类型: Object
      • 含义: 自定义组件
      • 可配置属性:
        • 生命周期:
          • create: 插入 dom 节点, 完成事件注册
          • destroy
        • tag: 自定义标签名
        • html: 自定义标签中的 html 内容
        • event: 绑定 dom 事件, this 指向这个插件, 通过 this.$dom 可以拿到 dom 节点
      • 注意: css 写在自己项目中就好了

      配置 🌰

      {
        tag: '',
        html: ``,
        // 可以指定 event 来绑定一些事件,默认 this 是该插件,而不是 dom
        event: {
          click () {
            console.log('');
          }
        }
      }
    组件相关问题
    • Q: 子组件的默认顺序是什么?

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

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

    * 直播: play, progressTime, volume, screen

    * 点播: play, progressTime, progressTime, volume, screen

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

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

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

    * 注意, progressbar 可以作为一个占位符存在

    • Q: 为什么我配置了一个组件后,其他默认组件就都不存在了?

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

    方法

    • updateClarity

      • 含义: 更新清晰度列表
      • 参数:Array 清晰度列表

      配置 🌰

      function updateClarity() {
        player.load('http://yunxianchang.live.ujne7.com/vod-system-bj/103_368b70a5d4f-c5cc-42ff-b442-004168fc86a3.mp4');
        player.on('load', function () { // 在 load 事件后
          player.$plugins.chimeeControl.updateClarity([
            {name: '标清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_368b70a5d4f-c5cc-42ff-b442-004168fc86a3.mp4'},
            {name: '高清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_369ed890f51-1c38-42a7-9ce2-828492660c60.mp4'},
            {name: '超清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_370cc2f40bd-a39f-472a-884f-f44fcd9c5ae0.mp4'},
            {name: '原画', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_371ab0c0fda-143d-4755-8727-d3cd12dce02d.mp4'}
          ]);
        });
      }

    最后

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

    Install

    npm i chimee-plugin-controlbar

    DownloadsWeekly Downloads

    20

    Version

    0.4.11

    License

    MIT

    Unpacked Size

    1.94 MB

    Total Files

    45

    Last publish

    Collaborators

    • gaoyiyi
    • huzunjie
    • songguangyu
    • toxicjohann
    • welefen
    • yandeqiang