uniapp使用video组件，并实现一些弹框

最新推荐文章于 2024-03-25 16:36:24 发布

SakuraPowerc

最新推荐文章于 2024-03-25 16:36:24 发布

阅读量1.1k

点赞数 2

文章标签： uni-app

本文链接：https://blog.csdn.net/2301_77513512/article/details/134262485

版权

简介：

我当前项目是一个看视频的小程序，因为用到了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类型的参数