简介:
我当前项目是一个看视频的小程序,因为用到了uniapp内置的video组件,并且观看视频中以及结尾有不少弹框,所以准备记录一下一些常用api、函数、使用方法和中间遇到的问题
代码片段
html部分
<view>
<video
src="路径"
:direction="90"
@play="play"
@pause="pause"
@ended="ended"
@timeupdate="timeupdate"
></video>
<Verify v-if="verifyShow" @showFn="showFn"></Verify>
</view>
我主要用到了如上几个参数
- src:路径
- direction:设置全屏的方向
- @play:开始播放执行的函数
- @pause:暂停执行的函数
- @ended:播放完毕执行的函数
- @timeupdate:进度条发生变化变化执行的函数
js部分
<script>
export default{
data(){
return {
firstPlay:0,//首次播放
duration:0,//总时长
firstNum:true,//第一次提醒
secondNum:true,//第二次提醒
verifyShow:false,//控制提醒框显示
}
},
methods:{
//开始播放
play(){
},
//暂停
pause(){
},
//进度条变化
timeupdate(e){
this.videoContext = uni.createVideoContext('myVideo')//视频实例
//出现两次验证 三分之一提醒一次
let firstTime = e.detail.currentTime / e.detail.duration
if(0.30 < firstTime && firstTime < 0.35){
if(this.firstNum){
console.log("提醒框第一次");
this.videoContext.pause()
this.verifyShow = true
this.firstNum = false
}
}else if(0.70 < firstTime && firstTime < 0.75){
if(this.secondNum){
console.log("提醒框第二次");
this.videoContext.pause()
this.verifyShow = true
this.secondNum = false
}
}
},
//播放完毕
ended(){
},
//提示框关闭
showFn(){
this.videoContext = uni.createVideoContext('myVideo')//视频实例
this.videoContext.play()
this.verifytShow = false
}
}
}
</script>
上面主要是利用video的实例来控制视频的播放暂停,使用event.detail中的参数来算出当前视频播放到总进度条的百分比,因为他的时间是非精度时间,小数点后很多位,所以我在取百分比的时候取了一个范围值,如果想更精确一点可以将这个范围值缩小。
上面在两次提醒中都分别给了一个参数,主要是避免用户重复观看时,多次反复的弹框,参数也可以优化为一个number类型的参数
中间遇到的一些问题
最主要的问题是,当视频全屏化后,弹窗无法显示,因为video是uniapp的自带组件,我们自己的组件无法通过定位中z-index或者其他方法来使弹框覆盖住全屏后的视屏。这时候可以用到uniapp提供的标签cover-view,用法跟view一样,可以在uniapp查看详细文档