uniapp Video视频计时判断
文章描述：
uniapp视频video计时以及判断是否为会员等操作
muted 是否静音播放
template
<template>
<view class="container">
<video class="vide" id="myVideo" :src="urls" controls="controls" autoplay=true @timeupdate='timeupdate'
muted="false"></video>
<view>
<view>总时间:{{duration}}</view>
<view>播放时间：{{playtime}}</view>
<view>记录时长:{{currentTime}}</view>
</view>
</view>
</template>script
实时刷新视频播放时间，到设置时间后判断当前用户是否为会员
export default{
data(){
return{
urls:'https://www.miyil.com/statics/videos/huoyingrenzhe_changmen_sl.mp4',
currentTime: '', //记录当前时间
dragTime: '', //拖拽进度
flag: true, //第一次进入缓存
isSubmit: false, //是否提交
isHasTime: 10, //默认时长,
duration:'', // 视频总时长
playtime:'', // 当前播放时间
}
},
onReady: function(res) {
// #ifndef MP-ALIPAY
this.videoContext = uni.createVideoContext('myVideo')
// #endif
},
methods:{
timeupdate(e) {
this.duration = Number(e.detail.duration.toFixed(0)) // 视频总时长
var currentTime = Number(e.detail.currentTime.toFixed(2)) // 当前播放时间
this.playtime = Number(e.detail.currentTime.toFixed(0))
if (this.flag) {
// 第一次进入缓存--记录页面刷新缓存的时长
this.currentTime = currentTime
this.flag = false
} else {
// 继续观看
// 用户未点击 - 到指定时间
if(this.currentTime>=this.isHasTime){
// 判断是否为会员
this.videoContext = uni.createVideoContext('myVideo');//创建视频实例指向video
this.videoContext.pause(); //暂停
}
// 用户点击
if (!this.isSubmit) {
// 点击快进到指定时间
if(this.currentTime>=this.isHasTime){
// 判断是否为会员
this.videoContext = uni.createVideoContext('myVideo');//创建视频实例指向video
this.videoContext.pause(); //暂停
}
let dis = currentTime - this.currentTime
if (Math.abs(dis) > 1) {
let dragTime = currentTime - this.currentTime
this.currentTime = currentTime
this.dragTime == '' ? (this.dragTime = dragTime) : (this.dragTime = Number(this.dragTime) + Number(dragTime))
console.log('快进' + dragTime);
return
}else{
}
} else {
return
}
}
}
}
}
发布时间：2022/07/13
发表评论