之前写了一篇文章 , 禁止快进的 , 但刚刚发现在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; //实时播放进度}}

三, 搞定, O(∩_∩)O

uniapp实现video视频禁止拖拽快进功能,禁止拖动进度条快进相关推荐

关于前端video标签视频无法拖动进度条快进问题(Django)
因为后端返回的是视频的文件流,并不是视频文件地址.后端返回流的时候要为header设置一些参数,否则部分浏览器会出现问题(如Google Chrome...). django中常用返回文件流写法: c ...
video视频标签怎么禁止用户拖动进度条快进
昨天经理给我一个需求 , 让我查一下h5播放视频怎么禁止用户快进, 然后刚刚搜了下, 实现了出来,代码如下 , 效果就是我点进度条想快进的话 , 会强制退回去, 这样用户就不能快进了 <body ...
如何实现拖拽上传、上传进度条，以及取消上传？
文件上传是最常见的一种业务需求,上传功能可简单,可复杂,简单就是把文件传上去就行,复杂就是涉及大文件断点续传.控制并发等,不知道大家对上传都了解多少.今天要给大家分享的是上传需求中最为常见的一些场景, ...
微信 html5禁止拖拽,js实现微信禁止h5网页下拉，禁止微信内置浏览器下拉网页...
大家可能会遇到开发公众号的时候,下来会出来源地址,下面的代码可以解决禁止下拉的问题~ 禁止下拉 .scroll{ position:absolute; overflow:scroll; -webkit ...
html5播放器禁止拖拽功能实例（教学内容禁止拖动观看）
html5播放器禁止拖拽功能实例(常用于场景:企业培训.在线教学内容禁止学员拖动视频进行观看) 实例1:参数开启后,视频教学内容或视频课件将不允许拖动进度条. <div id="pla ...
JS video 禁止拖动进度条
需要实现一个效果,视频加载的过程中禁止拖动进度条快进. 开始呢我想着把控件禁掉,自动播放解决. <video id="video" src="http://kuan ...
uniapp实现video禁止拖拽快进功能
开发中可能会遇到一个视频,不能让你拖拽,必须看完的功能- 不说废话,具体怎么实现呢? 首先一个video标签 <video id="myVideo" @timeupdate= ...
java video src请求视频流，视频不能拖拽快进问题解决方案
今天遇到个问题,主要是视频不能拖拽快先看一下前端页面后端代码思路,先获取id ,根据id到MongoDB中取文件流. @WebServlet("/webView/*") @Lo ...
vue+flask实现视频合成(拖拽上传)
vue+flask实现视频合成效果如下欢迎访问博客代码哈士奇技术聊天交流群 974178910 前端交流群 535620886 vue+flask实现视频合成拖拽上传我们之前一个文章有写过 ...

uniapp实现video视频禁止拖拽快进功能,禁止拖动进度条快进

一 , template中

二 , script中

三, 搞定, O(∩_∩)O

uniapp实现video视频禁止拖拽快进功能,禁止拖动进度条快进相关推荐

最新文章

热门文章