本文作者:DurkBlue

uniapp如何实现video视频禁止拖拽快进功能

DurkBlue 2022-07-29 1647
uniapp如何实现video视频禁止拖拽快进功能摘要:     如何禁止video视频快进的功能,其本来的目的就是想用户正正常常看完一段视频,用在获取收益的活动上,比如广告视频,可是 但刚刚发现在...

    如何禁止video视频快进的功能,其本来的目的就是想用户正正常常看完一段视频,用在获取收益的活动上,比如广告视频,可是 但刚刚发现在uni-app中实现不了 , 所以绞尽脑汁想啊想啊想,想出了一个好的逻辑,给各位看客分享分享,为互联网程序员界贡献一份力量吧

一 , template中

<video id="myVideo" @timeupdate="timeUpdate" src="@/static/vlog.mp4" initial-time="initial_time" ></video>


二 , script中 

data() {
return {
video_real_time: 0,
nitial_time: ''
};
},
methods: {
// 禁止拖动进度条快进
timeUpdate: function(e) {
var isReady = 1; // 是否开启可以视频快进 1 禁止开启
//跳转到指定播放位置 initial-time 时间为秒
let that = this;
//播放的总时长
var duration = e.detail.duration;
//实时播放进度 秒数
var currentTime = parseInt(e.detail.currentTime);
//当前视频进度
// console.log("视频播放到第" + currentTime + "秒")//查看正在播放时间,以秒为单位
if (that.video_real_time == 0) {
var jump_time = parseInt(that.initial_time) + parseInt(that.video_real_time);
} else {
var jump_time = parseInt(that.video_real_time);
}
if (isReady == 1) {
if (currentTime > jump_time && currentTime - jump_time > 3) {
let videoContext = wx.createVideoContext('myVideo');
videoContext.seek(that.video_real_time);
wx.showToast({
title: '未完整看完该视频,不能快进',
icon: 'none',
duration: 2000
});
}
}
that.video_real_time = currentTime; //实时播放进度
}
}


此篇短文由DurkBlue发布,写作不易转载请注明来处
文章投稿或转载声明

来源:DurkBlue版权归原作者所有,转载请保留出处。本站文章发布于 2022-07-29
温馨提示:文章内容系作者个人观点,不代表DurkBlue博客对其观点赞同或支持。

赞(1)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享