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.mzph.cn/news/693920.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

w28DVWA-csrf实例

DVWA-csrf实例 low级别 修改密码&#xff1a;修改的密码通过get请求&#xff0c;暴露在url上。 写一个简单的html文件&#xff0c;里面伪装修改密码的文字&#xff0c;代码如下&#xff1a; <html><body><a href"http://dvwa:7001/vulnerabilities/csr…

苍穹外卖学习-----2024/02/21

1.新增员工 /*** 处理SQL异常* param sqlIntegrityConstraintViolationException* return*/ExceptionHandlerpublic Result exceptionHandler(SQLIntegrityConstraintViolationException sqlIntegrityConstraintViolationException){//String message sqlIntegrityConstraintV…

SHERlocked93 的 2017 年终总结

回家的路上有点无聊&#xff0c;简短回顾一下2017年的得失收获 开始两个月3月到5月用C#完结了一个烂尾的wpf小项目&#xff0c;对自己前半年的.net生涯也算是一个句号&#xff08;虽然不知道最后有没有采用&#xff09;&#xff0c;后面由于项目组转变技术栈&#xff0c;选择了…

1 Nacos数据持久化方式

Nacos 支持两种数据持久化方式&#xff0c;一种是利用内置的数据库&#xff0c;另一种是利用外置的数据源。 1、内置数据库支持 Nacos 默认内置了一些数据存储解决方案&#xff0c;如内嵌的 Derby 数据库。 这种内置方式主要用于轻量级或测试环境。 2、外置数据库支持 对于生…

深入剖析Nginx:技术解析、最佳实践和高级使用指南(三)

本系列文章简介&#xff1a; 本系列文章通过分析Nginx的内部机制和原理&#xff0c;讲解了Nginx的架构、性能优化和高可用性配置等方面的知识。此外&#xff0c;还介绍了Nginx的最佳实践和高级使用技巧&#xff0c;帮助读者更好地理解和应用Nginx。本系列文章内容详实且深入&am…

【K8s】-- 查看节点池下面的所有宿主机

命令&#xff1a;kubectl -n 空间名称 --context 上下文名称 get nodes -l nodepool节点池名称 举例&#xff1a;kubectl -n my-flink --context prod-6 get nodes -l nodepoolbigdata-flink-xxl

基于springboot实现的音乐网站

一、系统架构 前端&#xff1a;html | js | css | bootstrap 后端&#xff1a;springboot | mybatis 环境&#xff1a;jdk1.8 | mysql | maven 二、 代码及数据库 三、功能介绍 01. 登录页 02. 用户注册 03. 首页 04. 喜欢 05. 查询

SQL笔记-多表查询(合并记录新增字段)

比如要统计2张表的所有数据&#xff0c;这两张表无关联关系&#xff0c;统计的数据需要在同一行&#xff1a; SELECT (SELECT COUNT(*) FROM reptile_csdn_article) AS table1_count, (SELECT COUNT(*) FROM reptile_tag_type) AS table2_count 运行截图如下&#xff1a; 大于…

UE开发01--part 1:创建游戏模式、角色、控制器

1&#xff0c;右键选择新建C类 2&#xff0c;选择GameModeBase 3&#xff0c;随便命名&#xff0c;类的类型-->选择&#xff1a;公共&#xff1b; 这个选项会把.h和.cpp文件分开&#xff0c;方便我们查看与修改代码。 4.打开 VS 编辑器&#xff0c;查看我们刚刚创建得两文件…

Echarts图例如何将选中与未选中状态配置成不同图形

背景 使用Echarts实现功能过程中&#xff0c;由于用户感觉Echarts图例的原生图案(例如圆形)不能直观地表现出该处可以点击筛选展示&#xff0c;故设计将选中的图例与未选中的图例设置成两种不同的图形(多为勾选与未勾选)。Echarts原生功能可以配置图例图案&#xff0c;但无法直…

设计模式----开题

简介&#xff1a; 本文主要介绍设计模式中的六大设计原则。开闭原则&#xff0c;里氏代换原则&#xff0c;依赖倒转原则&#xff0c;接口隔离原则&#xff0c;迪米特原则和合成复用原则。这几大原则是设计模式使用的基础&#xff0c;在使用设计模式时&#xff0c;应该牢记这六大…

Java实战:使用XML与注解方式实现CRUD操作

本文将详细介绍如何使用MyBatis框架&#xff0c;通过XML映射文件和注解两种方式来实现数据库的增删改查&#xff08;CRUD&#xff09;操作。我们将探讨MyBatis的配置和使用方法&#xff0c;并通过一个具体示例来演示如何使用XML和注解来完成基本的数据库操作。本文适合希望学习…

代码随想录刷题笔记-Day20

1. 二叉树的最近公共祖先 236. 二叉树的最近公共祖先https://leetcode.cn/problems/lowest-common-ancestor-of-a-binary-tree/ 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个节点 p、q&#x…

力扣 面试题 05.06. 整数转换

思路&#xff1a; 牵扯到二进制数&#xff0c;基本上要考虑位运算符&#xff0c;相关知识可以见http://t.csdnimg.cn/fzts7 之前做过类似的题目&#xff0c;大致思路就是先用按位异或^找出不同位&#xff0c;再用n&&#xff08;n-1&#xff09;计算出不同位的个数&#x…

Nginx的流式响应配置

Nginx的流式响应配置 使用ChatGPT的能力在聊天时来实现打字机效果&#xff0c;因此需要服务端接口进行流式响应&#xff0c;碰到了几个问题&#xff1a; 1、服务端明明配置了响应头的Content-Type为&#xff1a;text/event-stream&#xff0c;但前端仍然不是流式接收内容。 2、…

在VsCode中通过Cookie登录LeetCode

在vscode中配置好leetcode之后&#xff0c;一般最常用的就是通过cookie登录leetcode ; 首先点击sign in &#xff0c; 然后选择最下面的 &#xff0c; LeetCode Cookie ! 然后输入username(也就是你的lc用户名) 或者 你leetcode绑定的邮箱 ; 输入完成之后 ; 就是要你输入你的l…

vue+element (el-progress)标签 隐藏百分比(%) ,反向显示 ,自定义颜色, demo 复制粘贴拿去用

1 效果: 2 页面代码: <el-row :gutter"10" ><el-col :span"12"><el-card ><div class"fourqu"><div><span slot"title">{{推送任务TOP5}}</span></div></div><div class&…

C++程序设计学习笔记(一)

目录 1.C语言简介 1.C语言发展简史 1.机器语言 2.汇编语言 3.高级语言 4.C语言发展简史 5.C和C语言的关系 2.C语言的特点 1.基本的输入输出 1.C中的输入流和输出流 2.标准的hellworld代码 3.简单的输输出函数 2.头文件和命名空间 1.头文件 2.命名空间 …

[Mac软件]Mac上的最佳3D建模工具-犀牛Rhinoceros 8 for Mac v8.4.24044.1500完美兼容激活

【黑果魏叔】Rhino 8是一款由美国Robert McNeel & Assoc开发的强大的专业3D造型软件&#xff0c;广泛应用于三维动画制作、工业制造、科学研究以及机械设计等领域。它可以轻松整合3DS MAX与Softimage的模型功能部分&#xff0c;对精细、弹性与复杂的3D NURBS模型具有高效的…

【RT-DETR有效改进】大核注意力 | LSKAttention助力极限涨点

一、本文介绍 在这篇文章中,我们将讲解如何将LSKAttention大核注意力机制应用于RT-DETR,以实现显著的性能提升。首先,我们介绍LSKAttention机制的基本原理,它主要通过将深度卷积层的2D卷积核分解为水平和垂直1D卷积核,减少了计算复杂性和内存占用。接着,我们介绍将这一…