uni-app的video组件中实现倍速播放功能
uni-app的video组件中实现倍速播放功能
·
uniapp中提供的video组件本身不具有倍速播放功能,但是需求有,所以自己加倍速调整样式实现
上边代码中使用的cover-view标签是为了覆盖uni中video组件原本的样式
下边这里就是实现倍速播放的代码
onReady(){
this.videoContext = uni.createVideoContext('myVideo')
}
methods:{
bindButtonRate(e){
let rate = e.currentTarget.dataset.rate
this.videoContext.playbackRate(Number(rate))
}
}
下边再说一下监视video标签中控制栏的状态判断自己手写的倍速字样显隐状态
controlSpeed(){
let _this = this
let dom = document.getElementsByClassName('uni-video-bar')[0]
let observer = new MutationObserver((mutations,observe)=>{
_this.speedState = !_this.speedState
})
observer.observe(dom,{
attributes:true,
attributeFilter:['class','style'],//标签所带的属性都可添加,包括自定义属性
})
)
更多推荐
已为社区贡献3条内容
所有评论(0)