{"id":19640102,"url":"https://github.com/chimeejs/chimee-plugin-controlbar","last_synced_at":"2025-02-26T22:44:22.759Z","repository":{"id":23106995,"uuid":"98139116","full_name":"Chimeejs/chimee-plugin-controlbar","owner":"Chimeejs","description":null,"archived":false,"fork":false,"pushed_at":"2022-12-04T16:06:51.000Z","size":14645,"stargazers_count":25,"open_issues_count":20,"forks_count":30,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-02-09T19:02:29.152Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Chimeejs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-24T02:00:36.000Z","updated_at":"2022-07-23T00:14:40.000Z","dependencies_parsed_at":"2023-01-14T07:45:19.692Z","dependency_job_id":null,"html_url":"https://github.com/Chimeejs/chimee-plugin-controlbar","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chimeejs%2Fchimee-plugin-controlbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chimeejs%2Fchimee-plugin-controlbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chimeejs%2Fchimee-plugin-controlbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chimeejs%2Fchimee-plugin-controlbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Chimeejs","download_url":"https://codeload.github.com/Chimeejs/chimee-plugin-controlbar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240947652,"owners_count":19883030,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T14:04:37.912Z","updated_at":"2025-02-26T22:44:22.736Z","avatar_url":"https://github.com/Chimeejs.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# chimee-plugin-controlbar\n\n## install\n\n安装\n\n```shell\n# 依赖于 chimee， 首先需要安装 chimee\nnpm install chimee\n# 安装控制条组件\nnpm install chimee-plugin-controlbar\n```\n\n使用\n\n```javascript\nimport chimee from 'chimee';\nimport chimeePluginControlbar from 'chimee-plugin-controlbar';\n\n// 安装插件\nchimee.install(chimeePluginControlbar);\nconst player = new chimee({\n  // ...\n  // 使用插件\n  plugin: [\n    chimeePluginControlbar.name // 或者 'chimeeControl'\n  ]\n});\n```\n\n**也可以在页面中引用 `/lib/index.browser.js` 然后在页面中使用 chimeePluginControlbar**\n\n## 配置\n\n一个配置 🌰 更详细的配置例子， 可以[参考 /demo/index.html](https://github.com/Chimeejs/chimee-plugin-controlbar/blob/master/demo/index.html)\n\n```javascript\nplugin: [{\n  name: chimeePluginControlbar.name,\n  majorColor: '',\n  hoverColor: '',\n  children: {\n    volume: {\n      icon: {\n        low: '',\n        high: ''\n      },\n      layout: 'vertical'\n    }\n  }\n}]\n```\n\n### 具体的参数配置\n\n#### name\n  * 类型： string\n  * 含义： 该插件名字， 在 chimee 中使用需要名字，需要唯一对应\n  * 值： 'chimeeControl' | chimeePluginControlbar.name\n  * 必需\n\n#### majorColor\n  * 类型： string\n  * 作用范围：\n    * 该插件中，所有的 svg 图\n    * 播放进度条，进度颜色\n    * 声音控制条，音量颜色\n  * 可选值： 十六进制颜色('#fff')\n  * 默认值： '#de698c'\n  * 非必需\n\n#### hoverColor\n  * 类型： string\n  * 作用范围：\n    * 该插件中，所有的 svg 图\n  * 可选值： 十六进制颜色('#fff')\n  * 默认值： '#4c4c4c'\n  * 非必需\n#### barShowByMouse\n  * 类型： string\n  * 作用：控制条显示由\n    * move 触发 播放器的 mousemove 显示 \n    * enter/levae 鼠标进入/出，来控制 控制条显示／隐藏\n  * 可选值： 'move', 'enter'\n  * 默认值： 'move'\n  * 非必需\n#### hideBarTime\n  * 类型： number\n  * 作用：hidebar 延迟时间\n  * 默认值： 2000\n  * 注意：barShowByMouse 为 move 时有效，enter 时为0， 用户设置无效\n  * 非必需\n#### children\n  * 类型： Object\n  * 含义： 配置子组件是否展示／展示方式，还可以自己扩展子组件\n  * 非必需\n  * 目前支持的组件： play, progressTime, progressBar, volume, screen, clarity, playbackrate\n  \n##### 目前支持的组件及配置\n\n  * play\n    * 类型： Object\n    * 含义： 配置播放暂停键 icon 及事件\n    * 默认： {}\n    * 可配置属性：\n      * 生命周期：\n        * create: 插入 dom 节点, 完成事件注册\n        * destroy\n      * bitmap: true/ false 是否是位图，默认 false， 如果用户采用位图的话，则把当前的默认 svg 都清空掉， 用户通过 css background 来自己设置图片\n      * icon: play / pause 图标， 支持 svg 图\n      * animate: 当前是一个 svg path 动画，可以传 path 来实现你想要的动画\n      * event: 绑定 dom 事件， this 指向这个插件， 通过 this.$dom 可以拿到 dom 节点\n      * 注意： icon animate bitmap 都是配置图的。 bitmap 优先。其次 icon ，最后取 animate 中的值\n\n    配置 🌰\n\n    ```javascirpt\n    {\n      // 可以传两个 icon 来切换播放暂停状态\n      icon: {\n        play: '',\n        pause: ''\n      },\n      // 当前是一个 svg path 动画，可以传 path 来实现你想要的动画\n      animate: {\n        path: {\n          play: {\n            left: ''\n          },\n          pause: {\n            left: ''\n          }\n        }\n      },\n      // 可以指定 event 来绑定一些事件，默认 this 是该插件，而不是 dom\n      event: {\n        click () {\n          console.log('');\n        }\n      }\n    }\n    ```\n\n  * progressTime\n    * 类型： Object\n    * 含义： 时间展示组件，用来展示播放时间／开播时间／视频总时长\n    * 默认： {}\n    * 可配置属性：\n      * 生命周期：\n        * create: 插入 dom 节点, 完成事件注册\n        * destroy\n      * event: 绑定 dom 事件， this 指向这个插件， 通过 this.$dom 可以拿到 dom 节点\n\n    配置 🌰\n\n    ```javascirpt\n    {\n      // 可以指定 event 来绑定一些事件，默认 this 是该插件，而不是 dom\n      event: {\n        click () {\n          console.log('');\n        }\n      }\n    }\n    ```\n\n  * progressBar\n    * 类型： Object | false\n    * 含义： 进度条控制组件\n    * 默认： {}, 属性值为 false 的时候，表示，他是一个占位符，不现实，可以区分左右，目前只有 progressbar 有这个功能\n    * 可配置属性：\n      * 生命周期：\n        * create: 插入 dom 节点, 完成事件注册\n        * destroy\n      * layout: 有两种位置， 一是，居中布局。二是，位于整个控制条顶部。\n        * 可选值： 'top' ／ 'baseline'(默认)\n      * event: 绑定 dom 事件， this 指向这个插件， 通过 this.$dom 可以拿到 dom 节点\n\n    配置 🌰\n\n    ```javascirpt\n    {\n      layout: 'top',\n\n      // 可以指定 event 来绑定一些事件，默认 this 是该插件，而不是 dom\n      event: {\n        click () {\n          console.log('');\n        }\n      }\n    }\n    ```\n\n  * volume\n    * 类型： Object\n    * 含义： 声音控制组件\n    * 默认： {}\n    * 可配置属性：\n      * 生命周期：\n        * create: 插入 dom 节点, 完成事件注册\n        * destroy\n      * layout: 有两种位置， 一是，垂直。二是，水平。\n        * 可选值： 'vertical' ／ 'horizonal'(默认)\n      * bitmap: true/ false 是否是位图，默认 false，如果用户采用位图的话，则把当前的默认 svg 都清空掉， 用户通过 css background 来自己设置图片\n      * icon: 音量按钮的三个状态按钮，mute / low ／ high 最少写前两个\n      * [暂时不支持]animate: 也可以配置，然后自己通过 css 来控制\n      * event: 绑定 dom 事件， this 指向这个插件， 通过 this.$dom 可以拿到 dom 节点\n      * 注意： icon bitmap 都是配置图的。 bitmap 优先。其次 icon\n\n    配置 🌰\n\n    ```javascirpt\n    volume: {\n      icon: {\n        low: ``,\n        mute: ``,\n        high: ``\n      },\n      layout: 'vertical',\n\n      // 可以指定 event 来绑定一些事件，默认 this 是该插件，而不是 dom\n      event: {\n        click () {\n          console.log('');\n        }\n      }\n    },\n    ```\n\n  * screen\n    * 类型： Object\n    * 含义： 配置全屏／非全屏 icon 及事件\n    * 默认： {}\n    * 可配置属性：\n      * 生命周期：\n        * create: 插入 dom 节点, 完成事件注册\n        * destroy\n      * bitmap: true/ false 是否是位图，默认 false，如果用户采用位图的话，则把当前的默认 svg 都清空掉， 用户通过 css background 来自己设置图片\n      * icon: full / small 图标， 支持 svg 图\n      * event: 绑定 dom 事件， this 指向这个插件， 通过 this.$dom 可以拿到 dom 节点\n      * 注意： icon bitmap 都是配置图的。 bitmap 优先。其次 icon\n\n    配置 🌰\n\n    ```javascirpt\n    {\n      // 可以传两个 icon 来切换播放暂停状态\n      icon: {\n        full: '',\n        small: ''\n      },\n\n      // 可以指定 event 来绑定一些事件，默认 this 是该插件，而不是 dom\n      event: {\n        click () {\n          console.log('');\n        }\n      }\n    }\n    ```\n\n  * clarity\n    * 类型： Object\n    * 含义： 切换清晰度组件\n    * 默认： {}\n    * 可配置参数\n      * 生命周期：\n        * create: 插入 dom 节点, 完成事件注册\n        * destroy\n      * list: []\n      * duration\n        * 类型：`number`\n        * 默认：3\n        * 单次视频加载的时长\n        * 若在规定的时间段内加载不成功，则放弃此次任务。\n        * 单位为秒，对应于主视频的播放时间，也就是说若主视频暂停播放，则时间停滞，但加载仍继续。\n      * bias\n        * 类型：`number`\n        * 默认：0\n        * 偏差区间，单位为秒\n        * 若该值小于等于0，则在主视频播放到或超过约定时间点直接切换，若新视频加载失败，则放弃此次切换。\n        * 若该值大于0，则当主视频播放到约定时间偏差区间里，一旦视频加载成功就切换。若超出偏差空间，则放弃此次切换。\n      * repeatTimes\n        * 类型：`number`\n        * 默认：0\n        * 重复次数\n        * 若加载视频失败，则自动重新加载，直至重复次数耗尽。默认不重复加载。\n      * increment\n        * 类型：`number`\n        * 默认：0\n        * 每次重复时递增的时间，单位为秒\n        * 一般而言加载失败都是因为超时加载失败，故每次重复的时候应相应延长加载时间。每次重复加载都会相应叠加该值对应的时间。\n      * immediate\n        * 类型：`boolean`\n        * 默认：`false`\n        * 新视频加载成功后是否立即切换无需等待到约定时间。\n        * 注意空数组时不展示\n\n    配置 🌰\n\n    ```javascirpt\n    {\n      list: [\n        {name: '标清', src:''},\n        {name: '高清', src: ''},\n        {name: '原画', src: ''}\n      ],\n      // 可以指定 event 来绑定一些事件，默认 this 是该插件，而不是 dom\n      event: {\n        click () {\n          console.log('');\n        }\n      }\n    }\n    ```\n\n    直播切流测试： http://chimee.org/demo/live-clarity.html\n\n    点播切流测试： http://chimee.org/demo/clarity.html\n  \n  * playbackrate\n    * 类型： Object\n    * 含义： 切换播放倍速组件\n    * 默认： {}\n    * 可配置参数\n      * 生命周期：\n        * create: 插入 dom 节点, 完成事件注册\n        * destroy\n      * list: []\n        * defualt: 默认播放速率 boolean值\n    * 注意空数组时不展示\n\n    配置 🌰\n\n    ```javascirpt\n    {\n      // default 通过设置 default 来标明当前播放速率\n      list: [\n        {name: '0.5倍速', value: 0.5},\n        {name: '1倍速', value: 1, default: true},\n        {name: '2倍速', value: 2}\n      ],\n      // 可以指定 event 来绑定一些事件，默认 this 是该插件，而不是 dom\n      event: {\n        click () {\n          console.log('');\n        }\n      }\n    }\n    ```\n\n  * 自定义组件\n    * 类型： Object\n    * 含义： 自定义组件\n    * 可配置属性：\n      * 生命周期：\n        * create: 插入 dom 节点, 完成事件注册\n        * destroy\n      * tag: 自定义标签名\n      * html: 自定义标签中的 html 内容\n      * event: 绑定 dom 事件， this 指向这个插件， 通过 this.$dom 可以拿到 dom 节点\n    * 注意： css 写在自己项目中就好了\n\n    配置 🌰\n\n    ```javascirpt\n    {\n      tag: '',\n      html: ``,\n      // 可以指定 event 来绑定一些事件，默认 this 是该插件，而不是 dom\n      event: {\n        click () {\n          console.log('');\n        }\n      }\n    }\n    ```\n\n##### 组件相关问题\n\n* Q: 子组件的默认顺序是什么？\n\n  A: 在 children 没有配置的情况下会采用下面的顺序\n  \n    * 注意：根据 chimee 的参数 isLive 来判断是否是直播还是点播\n    \n    * 直播： play, progressTime, volume, screen\n    \n    * 点播： play, progressTime, progressTime, volume, screen\n    \n    * 如果用户配置了， 则按照用户的配置走，不论是否是直播还是点播\n\n* Q: 我可以控制顺序吗？\n\n  A: 在 children 对象中，属性的书写顺序就是渲染顺序\n    \n    * 注意， progressbar 可以作为一个占位符存在\n\n* Q: 为什么我配置了一个组件后，其他默认组件就都不存在了？\n\n  A: 假如 children 配置后， 会读 children 的属性，并渲染， 不会补充其他组件，所以，需要你把所有的组件都写.\n\n## 方法\n\n  * updateClarity\n    * 含义： 更新清晰度列表\n    * 参数：Array 清晰度列表\n\n    配置 🌰\n\n    ```javascirpt\n    function updateClarity() {\n      player.load('http://yunxianchang.live.ujne7.com/vod-system-bj/103_368b70a5d4f-c5cc-42ff-b442-004168fc86a3.mp4');\n      player.on('load', function () { // 在 load 事件后\n        player.$plugins.chimeeControl.updateClarity([\n          {name: '标清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_368b70a5d4f-c5cc-42ff-b442-004168fc86a3.mp4'},\n          {name: '高清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_369ed890f51-1c38-42a7-9ce2-828492660c60.mp4'},\n          {name: '超清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_370cc2f40bd-a39f-472a-884f-f44fcd9c5ae0.mp4'},\n          {name: '原画', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_371ab0c0fda-143d-4755-8727-d3cd12dce02d.mp4'}\n        ]);\n      });\n    }\n    ```\n\n\n## 最后\n\n欢迎各位大佬使用。有什么问题／建议，随时提。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchimeejs%2Fchimee-plugin-controlbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchimeejs%2Fchimee-plugin-controlbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchimeejs%2Fchimee-plugin-controlbar/lists"}