vue:移动端使用ckplayer
h5播放倍速:playbackrate: 0// 这个属性可以关闭关闭的功能 (支持html5的)// 音量调节在移动端是否显示音量调节按钮// 倍速播放this.playbackRateArr = [[0.5, ‘0.5倍’], [1, ‘正常’], [1.25, ‘1.25倍’], [1.5, ‘1.5倍’], [2, ‘2倍速’], [4, ‘4...
·
-
h5
播放倍速: playbackrate: 0 // 这个属性可以关闭
全屏的思路:点击界面的一张图片封面,显示已经占满整个页面的视频 -
关闭的功能 (支持html5的)
// 音量调节
在移动端是否显示音量调节按钮
// 倍速播放
this.playbackRateArr = [[0.5, ‘0.5倍’], [1, ‘正常’], [1.25, ‘1.25倍’], [1.5, ‘1.5倍’], [2, ‘2倍速’], [4, ‘4倍速’]];
// 全屏按钮
cFull fullID
// 去掉log
链接:链接 -
两个问题:
视频内容没法旋转
没法全屏
控制栏样式修改
3.踩坑:
1)
// loaded: 'loadedHandler',开启了属性后必须挂载在全局
window.loadedHandler = function() {
console.log('调用了')
}
2)ckplayer没法关闭控制栏(当前x.1版本)
链接:链接
// 开个定时器就好了
setTimeout(() => {
this.player.changeControlBarShow(false)
}, 2000)
- 测试过js控制的函数(h5)
这个没试过 quitFullScreen() 退出全屏
函数 | 测试过可以js控制实现,都是在点击后调用的函数 |
---|---|
获取视频播放地址 | this.player.getCurrentSrc() |
改变当前播放地址: | this.player.newVideo({autoplay: true,video: ‘https://地址’}) |
静音 | this.player.videoMute() |
播放暂停切换。播放暂停就可以不写了 | this.player.playOrPause() |
- 监听事件:(测试过的)
//
// 全屏 --- 全屏时会调用
// player.addListener('full', fullHandler)
// function fullHandler(b) {
// console.log('全屏状态', b)
// }
// 监听播放时间
// player.addListener('controlBar', timeHandler)
// function timeHandler(t) {
// console.log('触发了')
// this.player.changeControlBarShow(false)
// }
更多推荐
已为社区贡献5条内容
所有评论(0)