uniapp实现禁止video拖拽快进

在项目开发过程中，难免会用到video视频标签。根据客户要求，视频只能正常观看完，不能手动快进，以下是实现的方法：

<!--1.video标签-->
<video id="myVideo" @timeupdate="videoFun" :src="videourl" initial-time="initial_time" ><script>export default {data() {//2.data数据部分return {videourl: "https://vd3.bdstatic.com/mda-me38qw5ayq6m5x6k/sc/cae_h264/1620080580731464743/mda-me38qw5ayq6m5x6k.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1654941744-0-0-e46a5e5c83b069fcaf54124cd256af20&bcevod_channel=searchbox_feed&pd=1&cd=0&pt=3&logid=1944747745&vid=1074518001243819841&abtest=102599_2-102777_6-102784_1-17451_1-3000225_3-3000232_1&klogid=1944747745",video_real_time: 0, //实时播放进度nitial_time: '', //视频跳转进度 秒}},onLoad(option) {//3.onload部分this.initial_time = '0' //视频进度},methods: {//4.方法部分videoFun(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 //实时播放进度}}}
</script>

uniapp实现禁止video拖拽快进相关推荐

uniapp实现video视频禁止拖拽快进功能,禁止拖动进度条快进
之前写了一篇文章 , 禁止快进的 , 但刚刚发现在uni-app中实现不了 , 所以又上网找别的方法,话不多说, 上代码一 , template中 <video id="myVide ...
java video src请求视频流，视频不能拖拽快进问题解决方案
今天遇到个问题,主要是视频不能拖拽快先看一下前端页面后端代码思路,先获取id ,根据id到MongoDB中取文件流. @WebServlet("/webView/*") @Lo ...
uniapp实现video禁止拖拽快进功能
开发中可能会遇到一个视频,不能让你拖拽,必须看完的功能- 不说废话,具体怎么实现呢? 首先一个video标签 <video id="myVideo" @timeupdate= ...
html 禁止选择与复制出现蓝色选中状态，禁止图片拖拽，隐藏鼠标,全屏状态下有效
一.禁止选择与复制 js实现 ['contextmenu', 'selectstart', 'copy'].forEach(function(ev){document.addEventListener ...
html 禁止选择与复制，禁止图片拖拽
一.禁止选择与复制. js实现: ['contextmenu', 'selectstart', 'copy'].forEach(function(ev){document.addEventListen ...
html5 video首次观看禁止快进,Video Speed Controller - 快进/后退/回看在线视频
Video Speed Controller插件背景简介如今几乎每个人都会看网络视频,无论是电影.电视剧.新闻.搞笑娱乐,还是看视频教程.学习网课等等,每天可能都要花上不少的时间.如果你用过一些电脑 ...
Electron中实现拖拽文件进div中通过File对象获取文件的路径和内容
场景用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/a ...
网课视频禁止倍速和快进
前提视频通过video原生组件播放,可以通过查看元素标签确定. 倍速播放据说倍速设置在16倍一下不容易被监测到 document.querySelector('video').playbackRa ...
vue拖动缩放组件(vue-drag-zoom) 增加禁止缩放拖拽功能
前段时间写了一个类似于百度ICOR,可拖拽缩放图片并在图片上框选文字的功能,这里的拖拽缩放功能就用到了vue-drag-zoom组件,组件是从npm下载的VUE2代码,放在VUE3+vite项目里面也 ...

uniapp实现禁止video拖拽快进

uniapp实现禁止video拖拽快进相关推荐

最新文章

热门文章