Video/Audio禁止快进(退)

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

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

  代码:

 1 <video
 2     id="kingdom-video"
 3     :src="xxx"
 4     preload
 5     controls
 6     v-if="type===‘video‘">
 7     </video>
 8
 9 onTimeUpdate() {
10       // 学习中
11       if (this.playObj.effectiveDuration < this.playObj.totalDuration) {
12         // 禁止快进
13         if (this.videoAss.currentTime - this.lastTimeString > 2) {
14           this.videoAss.currentTime = this.lastTimeString
15         } else {
16           this.lastTimeString = this.videoAss.currentTime
17         }
18       }
19 }
20 this.videoAss = document.getElementById(‘kingdom-video‘)
21     this.videoAss.addEventListener(‘timeupdate‘, () => { this.onTimeUpdate() })

原文地址:https://www.cnblogs.com/ljwsyt/p/10792079.html

时间: 2024-10-07 17:21:18

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

ffmpeg+sdl教程----编写一个简单的播放器7(处理快进快退命令)

来源:http://blog.csdn.net/mu399/article/details/5818970 这篇教程例子中的程序,让右方向按键为快进10秒,上方向按键为快进60秒,左方向按键为快退10秒,上方向按键为快退60秒,程序中的 av_seek_frame函数可能是用错了,或者函数本身的问题导致按上和右都没反应;按左和下让画面暂停,声音在很短区间内不停播放,这时再按右和下 才正常. [cpp] view plaincopy #include "libavformat/avformat.h

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

写UI布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" andr

ffmpeg 频中分离 video audio 截取片断

1.获取视频的信息 ffmpeg -i video.avi 2,将图片序列分解合成视频 ffmpeg -i src.mpg image%d.jpg ffmpeg -f image2 -i image%d.jpg dst.mpg 合成注意事项: 假设图片序列是3位数,用image%03d 假设jpg文件名称字是乱的用.以下命令规整一下 x=1; for i in *jpg; do counter=$(printf %03d $x); mv  "$i" image"$counte

HTML5学习笔记简明版(4):新元素之video,audio,meter,datalist,keygen,output

video 通过<video>标签,我们可以抛弃最近不怎么讨好的Flash,直接在页面中播放视频文件.视频文件自然是最符合语义化的文件格式,但该元素标签同样支持音频与图片. 过去(及目前),我们通常要使用类似下面这样繁冗丑陋的代码来将视频放置在页面中,但这种方式要求浏览器安装有Flash插件,并支持JavaScript: <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="4

video &amp; audio

1. video和audio是来自HTML5的新方法用作对浏览器添加视频和音频. 2. 其作用于能让浏览器和用户之间交互更多样化,和对视频音频传输的更简易化. 3. video使用时候主要可以传输(ogg,MPEG4,webM)三种格式:     1. ogg:带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件.     2. MPEG4: 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件.     3. WebM: 带有 VP8 视频编码和 Vorbis

HTML5中Video,禁止右键下载

HTML5中Video,禁止右键下载 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>LOVE</title> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script><script&g

快进和快退

av_seek_frame FFmpeg是一套可以用来记录.转换数字音频.视频,并能将其转化为流的开源计算机程序.它包括了领先的音/视频编码库libavcodec等. libavformat:用于各种音视频封装格式的生成和解析,包括获取解码所需信息以生成解码上下文结构 和读取音视频帧等功能: libavcodec:用于各种类型声音/图像编解码: libavutil:包含一些公共的工具函数: libswscale:用于视频场景比例缩放.色彩映射转换: libpostproc:用于后期效果处理: f

HTML5音视频播放(Video,Audio)和常见的坑处理

1. 前言背景 在HTML5出现之前,Web页面访问音视频主要是通过Flash,Activex插件,还有微软后来推出的silverlight来展现的,尽管FLASH曾经风靡全球,但是随着互联网的不断发展,进入移动时代以后,Flash的风头渐渐被HTML5替代,主要原因是Flash经常爆出漏洞,安全性令人担忧,性能方面较差,对网络浏览和设备的电池也消耗比较大等等,Flash天生就是为PC而生,无法适应移动时代的特点,所以被各大厂商逐渐抛弃,连Adobe自己都已经放弃了Flash.所以HTML5是未

html5标签video audio

视频或音频数据是否预加载,如果使用预加载,浏览器会预先将视频或音频数据进行缓冲. preload 值 none.metadata .auto(默认) none :不进行预加载 metadata:只有预加载媒体的元数据(媒体字节数,第一帧,播放列表,持续时间等) auto:预加载全部视频或者音频 原文地址:http://www.cnblogs.com/Jacklovely/p/5642000.html 本文目录: 1.获取影片总时长 2.获取影片已播放时间和设置播放点 3.音量的获取和设置 4.属