当前位置: 首页 > news >正文

vue实时监控视频播放的进度,并在播放80%位置触发相应操作

video标签:播放时触发canplay事件

<video:src="filePath"controlsv-if="filePrefix == 'mp4' || filePrefix == 'avi'"@canplay="getVideoDur()"id="myVideo"class="preview"></video>

canplay触发的方法:bind(this)用于当前监听的函数里面获取当前vue的this对象,不使用bind则this为当前的video对象

getVideoDur(){var video = document.getElementById("myVideo")video.addEventListener("timeupdate",function () {var timeDisplay;var duration;//用秒数来显示当前播放进度timeDisplay = video.currentTime;duration = video.duration;console.log("总时长的80%", duration*0.8);console.log("当前播放的时长", timeDisplay);if (timeDisplay > duration*0.8) {console.log("已超过总时长的80%");this.changeReadedStatus(this.curFileInfo)return;}}.bind(this),false);},

video的其他监听type:

//监听播放后时间变动
video.addEventListener("timeupdate", function () {})
//监听播放
video.addEventListener("play", function () {})//监听暂停 
video.addEventListener("pause", function () {})
http://www.lryc.cn/news/304132.html

相关文章:

  • HTML+CSS滚动条样式如何单独给firefox设置 scrollbar-width: none;,而不影响其他浏览器
  • 《Go 简易速速上手小册》第2章:控制结构与函数(2024 最新版)
  • 基于EasyCVR视频汇聚系统的公安网视频联网共享视频云平台建设思路分析(一)
  • HQYJ 2024-2-21 作业
  • LeetCode每日一题【283. 移动零】
  • CF1200E Compress Words
  • ip https证书推荐
  • 大气颗粒物与VOCs PMF源解析技术应用
  • VSCODE中使用Vue3教程
  • Mac M2芯片配置PHP环境
  • [嵌入式系统-25]:RT-Thread -12- 内核组件编程接口 - 网络组件 - HTTP编程
  • 一个服务器实现本机服务互联网化
  • django配置视图并与模版进行数据交互
  • Java进阶
  • ⭐北邮复试刷题106. 从中序与后序遍历序列构造二叉树__递归分治 (力扣每日一题)
  • K8S更新部署docker的两种方法举例
  • Java高并发编程基础之Thread构造函数大有内涵
  • 2023年12月 Python(六级)真题解析#中国电子学会#全国青少年软件编程等级考试
  • 代码随想录算法训练营第一天
  • 基于 java springboot+layui仓库管理系统
  • 电商平台商家结算
  • AIGC 实战:如何使用 Docker 在 Ollama 上离线运行大模型(LLM)
  • MII、RMII、GMII和RGMII,以太网接口中常见的几种标准接口
  • SpringCloudConfig+SpringCloudBus+Actuator+Git实现Eureka关键配置属性热更新(全程不重启服务)
  • 郑州大学2024年寒假训练 Day7:数论
  • “目标检测”任务基础认识
  • springboot+vue的宠物咖啡馆平台(前后端分离)
  • LaWGPT—基于中文法律知识的大模型
  • 一文弄明白KeyedProcessFunction函数
  • alibabacloud学习笔记06(小滴课堂)