• 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() })
  • 相关阅读:
    SQL语法分类
    SQL语法入门
    数据库的基本对象
    数据库基础
    数据库概述
    设计模式之备忘录模式
    设计模式之State模式
    设计模式之装饰模式
    简单工厂模式
    初识C#设计模式
  • 原文地址:https://www.cnblogs.com/ljwsyt/p/10792079.html
Copyright © 2020-2023  润新知