Video/Audio禁止快进(退)
首先接着上个随笔。上个随笔主要介绍了视频音频的相关操作、属性和方法。这里主要记录一个应用:禁止快进(快退同理)。
思路:监听快进事件(此处是监听播放时间更新),利用一个缓存的时间和播放到的时间进行对比,如果时间大于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禁止快进(退)的更多相关文章
- 关于jwplayer 处理进度条禁止快进的处理方法。
今天在处理一个关于jwplayer 第一次播放禁止快进,但是可以后退的一个需求.开始在网上去查一些方法,有几个方法是换皮肤,禁止点击,但是和我的初衷不是很一致,还有一种方式是官网查看了API接口的方 ...
- JS控制Video播放器(快进、后退、播放、暂停、音量大小)
思路: 一.首先监听触发事件. 比如:向上键对应的keyCode为38,向下键对应的keyCode为40,向左键对应的keyCode为37,向右键对应的keyCode为39,空格键对应的keyCode ...
- html5 vedio 播放器,禁掉进度条快进快退事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- video字幕无法显示,video视频在google中无法控制快进
video字幕(track)无法显示: 直接用关闭同源策略的浏览器打开你的HTML文件可以请求到字幕文件并显示字幕: 从hbuilder中打开html文件,在从里面打开google浏览器去浏览HTML ...
- Eclipse之向前快进,向后快退
在已经写好的代码上进行修改,存在代码快需要向前快进,向后快退的情况. 选中代码块,然后右击,有Shift Right, Shift Left
- jwplayer 禁止视频的快进,但是可以后退(已实现)
一直在研究.net 的视频播放,最近做起了jwplayer,然后项目要求是视频不能快进,但是可以重复观看已经看过的视频资源. 很简单 在标签<script> 中定义两个变量 var max ...
- 修改CKplayer.js 源码解决移动端浏览器全屏不能限制快进的问题
原文地址:https://www.cnblogs.com/jying/p/9642445.html,转载请说明出处. 最近项目需要播放视频且限制未观看部分的快进功能,找了两款js插件ckplayer和 ...
- android开发之GestureDetector手势识别(调节音量、亮度、快进和后退)
写UI布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:andro ...
- MediaElement视频控制:播放、暂停、停止、后退、快进、跳转、音量
/* ================================================= * Author: Micro * Date: 2016=03-25 ...
随机推荐
- springboot+activemq中引入重发机制
一.简介 在使用activemq消息中间件进行消息队列传输时,总会由于各种原因导致消息失败. 一个经典的场景是一个生成者向Queue中发消息,里面包含了一组邮件地址和邮件内容.而消费者从Queue中将 ...
- 自动化运维工具sshd,expect,pssh,rsync详解
ssh secure shell,安全的远程登录:openssh和dropbear都是它的开源实现,ssh协议有v1和v2俩个版本,现在使用的都是v2版,v1已经不安全了:ssh基于DH算法做密钥交换 ...
- 第二章——机器学习项目完整案例(End-to-End Machine Learning Project)
本章通过一个例子,介绍机器学习的整个流程. 2.1 使用真实数据集练手(Working with Real Data) 国外一些获取数据的网站: Popular open data repositor ...
- MyBatis-Spring中间件逻辑分析(怎么把Mapper接口注册到Spring中)
1. 文档介绍 1.1. 为什么要写这个文档 接触Spring和MyBatis也挺久的了,但是一直还停留在使用的层面上,导致很多时候光知道怎么用,而不知道其具体原理,这样就很难做一 ...
- Python Assert 为何不尽如人意
Python中的断言用起来非常简单,你可以在assert后面跟上任意判断条件,如果断言失败则会抛出异常. >>> assert 1 + 1 == 2 >>> ass ...
- 【最小生成树+贪心】BZOJ1821: [JSOI2010]Group 部落划分 Group
Description 聪聪研究发现,荒岛野人总是过着群居的生活,但是,并不是整个荒岛上的所有野人都属于同一个部落,野人们总是拉帮结派形成属于自己的部落,不同的部落之间则经常发生争斗.只是,这一切都成 ...
- B20J_2836_魔法树_树链剖分+线段树
B20J_2836_魔法树_树链剖分+线段树 题意: 果树共有N个节点,其中节点0是根节点,每个节点u的父亲记为fa[u].初始时,这个果树的每个节点上都没有果子(即0个果子). Add u v d ...
- RocketMQ源码 — 十一、 RocketMQ事务消息
分布式事务是一个复杂的问题,rmq实现了事务的最终一致性,rmq保证本地事务成功消息一定会发送成功并被成功消费,如果本地事务失败了,消息不会被发送. rmq事务消息的实现过程为: producer发送 ...
- Sublime Text3插件安装(经典)
今天我去听数学建模的培训,感觉很有意思,可是我没有报名(QAQ),没有参加培训的报名,不过幸好没有开始选拔比赛 所以我决定学习数学建模方面的知识,要好好学习了! 希望我未来的学弟学妹们!(不要像我这样 ...
- Chapter1:基础
整本书的核心:语言的设计与实现 我们所看到的设计是显示的,语法定义的, 而实现是隐式的,决定了编译或运行时的行为. 了解设计的目的,可以推测实现的细节,也可以自己实现设计. 学习具体的实现,更充分的达 ...