首先接着上个随笔。上个随笔主要介绍了视频音频的相关操作、属性和方法。这里主要记录一个应用:禁止快进(快退同理)。

  思路:监听快进事件(此处是监听播放时间更新),利用一个缓存的时间和播放到的时间进行对比,如果时间大于1秒(保险起见使用2秒,以避免在播放的时刻正好在计时的那一刻的尴尬),则表明是快播,给其重置回播放时间即可。

  代码:

 <video
id="kingdom-video"
:src="xxx"
preload
controls
v-if="type==='video'">
</video> onTimeUpdate() {
// 学习中
if (this.playObj.effectiveDuration < this.playObj.totalDuration) {
// 禁止快进
if (this.videoAss.currentTime - this.lastTimeString > 2) {
this.videoAss.currentTime = this.lastTimeString
} else {
this.lastTimeString = this.videoAss.currentTime
}
}
}
this.videoAss = document.getElementById('kingdom-video')
this.videoAss.addEventListener('timeupdate', () => { this.onTimeUpdate() })

Video/Audio禁止快进(退)的更多相关文章

  1. 关于jwplayer 处理进度条禁止快进的处理方法。

    今天在处理一个关于jwplayer  第一次播放禁止快进,但是可以后退的一个需求.开始在网上去查一些方法,有几个方法是换皮肤,禁止点击,但是和我的初衷不是很一致,还有一种方式是官网查看了API接口的方 ...

  2. JS控制Video播放器(快进、后退、播放、暂停、音量大小)

    思路: 一.首先监听触发事件. 比如:向上键对应的keyCode为38,向下键对应的keyCode为40,向左键对应的keyCode为37,向右键对应的keyCode为39,空格键对应的keyCode ...

  3. html5 vedio 播放器,禁掉进度条快进快退事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. video字幕无法显示,video视频在google中无法控制快进

    video字幕(track)无法显示: 直接用关闭同源策略的浏览器打开你的HTML文件可以请求到字幕文件并显示字幕: 从hbuilder中打开html文件,在从里面打开google浏览器去浏览HTML ...

  5. Eclipse之向前快进,向后快退

    在已经写好的代码上进行修改,存在代码快需要向前快进,向后快退的情况. 选中代码块,然后右击,有Shift Right, Shift Left

  6. jwplayer 禁止视频的快进,但是可以后退(已实现)

    一直在研究.net 的视频播放,最近做起了jwplayer,然后项目要求是视频不能快进,但是可以重复观看已经看过的视频资源. 很简单 在标签<script> 中定义两个变量 var max ...

  7. 修改CKplayer.js 源码解决移动端浏览器全屏不能限制快进的问题

    原文地址:https://www.cnblogs.com/jying/p/9642445.html,转载请说明出处. 最近项目需要播放视频且限制未观看部分的快进功能,找了两款js插件ckplayer和 ...

  8. android开发之GestureDetector手势识别(调节音量、亮度、快进和后退)

    写UI布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:andro ...

  9. MediaElement视频控制:播放、暂停、停止、后退、快进、跳转、音量

    /* =================================================  * Author:     Micro  * Date:       2016=03-25 ...

随机推荐

  1. Codeforces Round #483 (Div. 2)

    题目链接: https://cn.vjudge.net/contest/229761 A题: n个数字,两个人轮流去数字,直到剩下最后一个数字为止,第一个人希望剩下的数字最小,第二个人希望数字最大,最 ...

  2. 《Linux/Unix系统编程手册》 时间子系统

    Linux下操作系统编程有两本经典APUE即<Advanced Programming in the UNIX Environment>和TLPI<The Linux Program ...

  3. Bitmap对图像的处理

    p { margin-bottom: 0.1in; line-height: 120% } a:link { } Bitmap对图像的处理 一.引言: 在开发中涉及到图片包括.png,.gif,.9. ...

  4. Spring Security 源码分析(四):Spring Social实现微信社交登录

    社交登录又称作社会化登录(Social Login),是指网站的用户可以使用腾讯QQ.人人网.开心网.新浪微博.搜狐微博.腾讯微博.淘宝.豆瓣.MSN.Google等社会化媒体账号登录该网站. 前言 ...

  5. Scrapy爬虫框架第八讲【项目实战篇:知乎用户信息抓取】--本文参考静觅博主所写

    思路分析: (1)选定起始人(即选择关注数和粉丝数较多的人--大V) (2)获取该大V的个人信息 (3)获取关注列表用户信息 (4)获取粉丝列表用户信息 (5)重复(2)(3)(4)步实现全知乎用户爬 ...

  6. IE下获取XPATH小工具,支持32/64位

    背景是曾经友情支持了测试组一小段时间,发现他们使用selenium做页面的自动化测试,需要用到XPath,但IE下没有获取XPath的工具,只能在Firefox和chrome下获取,步骤还比较麻烦.而 ...

  7. Selenium 指定浏览器位置

    在脚本开头要指定浏览器位置. public static void main(String[] args) throws InterruptedException, IOException { Sys ...

  8. Centos打开、关闭、结束tomcat,及查看tomcat运行日志

    cd到tomcat目录下之后 启动:一般是执行sh bin/startup.sh 停止:一般是执行sh bin/shutdown.sh查看:执行ps -ef |grep tomcat 输出如下 *** ...

  9. css3波纹特效、H5实现动态波浪

    css3实现动态波纹特效,由于css3里面有过渡和动画效果,现在利用css3实现动态波浪效果就很简单了,直接使用transform来实现就ok, 使得translateX 产生偏移就可以不断实现循环动 ...

  10. 【SAP S/4 1511之变】:主数据之变

    本博文主要讲述SAP S/4 1511版本的变化,主要是跟ECC版本的对比.变化还是挺多的,相当一部分是后勤,但绝大部分还是财务成本这一块.作为从事S/4版本的从业者,了解1511版本的变化还是挺有必 ...