简介
chimee-plugin-mobile-controlbar 是一个适用于移动端视频播放的 chimee 插件，提供了控制栏等常用交互界面，可以帮助开发者快速构建移动端视频播放器。
安装
npm install chimee-plugin-mobile-controlbar --save
引入
import Chimee from 'chimee' import chimeePluginMobileControlbar from 'chimee-plugin-mobile-controlbar' Chimee.install(chimeePluginMobileControlbar)
使用
const player = new Chimee({ wrapper: '#player-wrapper', src: 'example.mp4', plugin: [ 'mobileControlbar' ] })
控制栏位置
可以通过修改 Chimee 实例的 style 属性来调整控制栏的位置。
-- -------------------- ---- ------- ----- ------ - --- -------- -------- ------------------ ---- -------------- ------- - ------------------ -- ------ - --------- ----------- ----- -- ------- -- ------ ------- ------- ------- ---------------- ------ - --展开代码
控制栏按钮
控制栏默认包含 play，pause，fullscreen 等按钮。可以通过插件的 props 来配置需要显示的按钮。
-- -------------------- ---- ------- ----- ------ - --- -------- -------- ------------------ ---- -------------- ------- - - ----- ------------------- ------ - -------- -------- -------- --------- ------------- - - - --展开代码
自定义按钮
可以通过插件的 events 属性来监听控制栏按钮的点击事件，实现自定义功能。
-- -------------------- ---- ------- ----- ------ - --- -------- -------- ------------------ ---- -------------- ------- - - ----- ------------------- ------- - ------------- ---------- - -- ---- ---- ---- - - - - --展开代码
实例代码
-- -------------------- ---- ------- ---- -------------------------- ------- ---------------------------------------------------------------------- ------- ---------------------------------------------------------------------------------------------- -------- ----- ------ - --- -------- -------- ------------------ ---- -------------- ------- - - ----- ------------------- ------ - -------- -------- -------- --------- ------------- -- ------- - ------------- ---------- - -- ---- ---- ---- - - - -- ------ - --------- ----------- ----- -- ------- -- ------ ------- ------- ------- ---------------- ------ - -- ---------展开代码
总结
本文介绍了如何使用 chimee-plugin-mobile-controlbar 插件创建移动端视频播放器，并详细说明了插件的使用方法和 API。希望通过本文的学习，能帮助你更好地开发移动端视频播放器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5ef742d5403f2923b035b912
