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 ...
随机推荐
- 解决Debian 9 iwlwifi固件缺失导致无法连接无线网络的问题
本文由荒原之梦原创,原文链接:http://zhaokaifeng.com/?p=692 前言: 本文介绍了解决Debian9安装完成后无法连接wifi的问题以及一些扩展知识. 问题描述: 安装Deb ...
- nginx php 配置跨域
我使用的是lnmp一键安装包 在虚拟记住添加 add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allo ...
- web前端 DOM 详解
先来点概念 文档对象模型(DOM)是一个独立于语言的,使用 XML 和 HTML 文档操作的应用程序接口(API). 在浏览器中,主要与 HTML 文档打交道,在网页应用中检索 XML 文档也很常见. ...
- Javascript 设计模式 单例
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30490955 一直很喜欢Js,,,今天写一个Js的单例模式实现以及用法. 1.单 ...
- python3[爬虫实战] 使用selenium,xpath爬取京东手机
使用selenium ,可能感觉用的并不是很深刻吧,可能是用scrapy用多了的缘故吧.不过selenium确实强大,很多反爬虫的都可以用selenium来解决掉吧. 思路: 入口: 关键字搜索入口 ...
- js算法初窥04(算法模式01-递归)
终于来到了有点意思的地方--递归,在我最开始学习js的时候,基础课程的内容就包括递归,但是当时并不知道递归的真正意义和用处.我只是知道,哦...递归是自身调用自身,递归要记得有一个停止调用的条件.那时 ...
- netty源码分析之揭开reactor线程的面纱(二)
如果你对netty的reactor线程不了解,建议先看下上一篇文章netty源码分析之揭开reactor线程的面纱(一),这里再把reactor中的三个步骤的图贴一下 reactor线程 我们已经了解 ...
- Java7里try-with-resources分析
这个所谓的try-with-resources,是个语法糖.实际上就是自动调用资源的close()函数.和Python里的with语句差不多. 例如: [java] view plain copy ...
- BZOJ_1975_[Sdoi2010]魔法猪学院_A*
BZOJ_1975_[Sdoi2010]魔法猪学院_A* Description iPig在假期来到了传说中的魔法猪学院,开始为期两个月的魔法猪训练.经过了一周理论知识和一周基本魔法的学习之后,iPi ...
- CAN总线的显性电平与隐性电平
读CAN总线的书时,都会涉及到总线电平的问题,CAN总线的电平分为显性电平与隐性电平,这是CAN总线物理层的核心部分,也是总线仲裁的基础.那何为显性,何为隐性呢? 根据孔丙火(微信公众号:孔丙火)的理 ...