当前位置: 首页 > 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 () {})

相关文章:

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

video标签&#xff1a;播放时触发canplay事件 <video:src"filePath"controlsv-if"filePrefix mp4 || filePrefix avi"canplay"getVideoDur()"id"myVideo"class"preview"></video>canplay触发的方法&#xff…...

HTML+CSS滚动条样式如何单独给firefox设置 scrollbar-width: none;,而不影响其他浏览器

要在Firefox中单独设置滚动条样式,你可以使用​​@-moz-document​​规则。这个规则允许你为特定的浏览器或浏览器引擎应用样式。 下面是一个例子,演示如何在Firefox中隐藏滚动条: @-moz-document url-prefix() {/* 在这里添加只对Firefox生效的样式 */body {scrollbar-wi…...

《Go 简易速速上手小册》第2章:控制结构与函数(2024 最新版)

文章目录 2.1 条件语句:决策的艺术2.1.1 基础知识讲解2.1.2 重点案例:用户角色权限判断实现用户角色权限判断扩展功能实现代码功能扩展:添加或删除用户2.1.3 拓展案例 1:成绩等级判断实现成绩等级判断功能实现代码扩展功能:详细反馈...

基于EasyCVR视频汇聚系统的公安网视频联网共享视频云平台建设思路分析(一)

随着社会的发展和科技的进步&#xff0c;视频监控系统在各个领域的应用越来越广泛&#xff0c;视频云平台建设已经成为了行业数字化转型的重要一环。公安网视频汇聚联网共享云的建设需要充分考虑技术、架构、安全、存储、计算等多方面因素&#xff0c;以确保平台的稳定性和可用…...

HQYJ 2024-2-21 作业

复习课上内容&#xff08;已完成&#xff09;结构体字节对齐&#xff0c;64位没做完的做完&#xff0c;32位重新都做一遍&#xff0c;课上指定2字节对齐的做一遍&#xff0c;自己验证&#xff08;已完成&#xff09;两种验证大小端对齐的代码写一遍复习指针内容&#xff08;已完…...

LeetCode每日一题【283. 移动零】

题目&#xff1a; 思路&#xff1a; 双指针&#xff0c;i和j。当i和j所指元素都不为0时&#xff0c;他们同时向后走&#xff0c;当j所指元素为0时&#xff0c;只走j&#xff0c;i固定。这样下来&#xff0c;i就指向最后一个非0元素的下一个位置&#xff0c;j就指向那些0元素之…...

CF1200E Compress Words

题目描述 Amugae has a sentence consisting of n words. He want to compress this sentence into one word. Amugae doesnt like repetitions, so when he merges two words into one word, he removes the longest prefix of the second word that coincides with a suffix…...

ip https证书推荐

公网IP地址是每个连接到互联网的设备所必需的标识。公网IP地址是用于在互联网上唯一标识一个设备的IP地址&#xff0c;它由一组由四个数字组成的字符串组成&#xff0c;每个数字在0到255之间。随着互联网的发展&#xff0c;只有公网IP地址的站点也开始重视传输信息安全&#xf…...

大气颗粒物与VOCs PMF源解析技术应用

目前&#xff0c;大气颗粒物和臭氧污染成为我国亟待解决的环境问题。颗粒物和臭氧污染不仅对气候和环境有重要影响&#xff0c;而且对人体健康有严重损害。而臭氧的前体物之一为挥发性有机物&#xff08;VOCs&#xff09;。为了高效、精准地治理区域大气颗粒物和臭氧污染&#…...

VSCODE中使用Vue3教程

VUE介绍 Vue.js is a popular JavaScript library for building web application user interfaces and Visual Studio Code has built-in support for the Vue.js building blocks of HTML, CSS, and JavaScript. For a richer Vue.js development environment, you can insta…...

Mac M2芯片配置PHP环境

Mac M2芯片配置PHP环境 1. XAMPP2. PHPBrew(PHP版本管理)安装php7.4.33版本 3. 直接使用homebrew 安装php环境参考 1. XAMPP 官网地址 https://www.apachefriends.org/ 安装 安装完成 web server打开后&#xff0c;在打开localhost 成功&#xff01; 2. PHPBrew(PHP版本管…...

[嵌入式系统-25]:RT-Thread -12- 内核组件编程接口 - 网络组件 - HTTP编程

目录 一、HTTP编程概述 1.1 概述 1.2 HTTP 服务器和 HTTP 客户端 二、HTTP Client 2.1 如何配置HTTP Client 2.2 HTTP Client代码实例1&#xff1a;socket发送http报文 2.3 HTTP Client代码实例2&#xff1a;httpc_xx接口收发HTTP报文 2.3.1 接口函数描述 2.3.2 代码实…...

一个服务器实现本机服务互联网化

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 一个服务器实现本机服务互联网化 前言痛点关于中微子代理实战演练搭建服务端搭建客户端服务端配置代理实现 前言 在数字世界的网络战场上&#xff0c;中微子代理就像是一支潜伏在黑暗中的数字特工队&…...

django配置视图并与模版进行数据交互

目录 安装django 创建一个django项目 项目结构 创建视图层views.py 写入视图函数 创建对应视图的路由 创建模版层 配置项目中的模版路径 创建模版html文件 启动项目 浏览器访问结果 安装django pip install django 创建一个django项目 这里最好用命令行完成&#xf…...

Java进阶

乐观锁和悲观锁分布式锁hashmap原理Redis及其分布式DDD领域驱动设计IO、多线程 ??Kafka ??设计模式之&#xff1f;&#xff1f;Elasticsearch ??JVM ?? 面试题汇总1...

⭐北邮复试刷题106. 从中序与后序遍历序列构造二叉树__递归分治 (力扣每日一题)

106. 从中序与后序遍历序列构造二叉树 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1a;inorder [9,3,15,20,7], postor…...

K8S更新部署docker的两种方法举例

前提条件 imagePullPolicy: Always 方法1&#xff1a;删除更新法 test-project为命名空间 --删除所有asp-svc下面的pod,这会导致从新拉取镜像 kubectl delete pods -l appasp-svc -n test-project --删除指定的pod&#xff0c;这会导致从新拉取镜像 kubectl delete pod …...

Java高并发编程基础之Thread构造函数大有内涵

引言 在Java中&#xff0c;Thread类提供了许多丰富的构造函数&#xff0c;以便于创建和管理线程。使得可以根据具体需求来创建和配置线程对象&#xff0c;从而实现更灵活、可扩展的多线程编程。 Thread类的无参构造函数可以创建一个新的线程对象&#xff0c;然后通过调用star…...

2023年12月 Python(六级)真题解析#中国电子学会#全国青少年软件编程等级考试

Python等级考试(1~6级)全部真题・点这里 一、单选题(共25题,共50分) 第1题 运行以下程序,输出的结果是?( ) class A():def __init__(self,x):self.x=x...

代码随想录算法训练营第一天

● 今日学习的文章链接和视频链接 ● 自己看到题目的第一想法 1. 704二分法&#xff1a; 方法一&#xff1a; 整个数组是 左闭右闭区间 [ ] left指针指向数组开始下标&#xff0c; right 指针指向数组最后下表nums.size()-1, mid为 (leftright) /2循环条件 left<rightnu…...

PADS集成软件——HyperLynx

HyperLynx Thermal 是 PADS 软件集成的电路板热分析工具&#xff0c;专门用来在设计阶段模拟和预测 PCB 的温度分布&#xff0c;提前发现过热风险。简单来说&#xff0c;当完成 PCB 布局布线后&#xff0c;可以用它来回答一个重要问题&#xff1a;“这块板子通电后&#xff0c;…...

宝塔面板计划任务设置教程

宝塔面板的计划任务&#xff0c;就是服务器的定时执行工具&#xff0c;不用手动敲命令&#xff0c;可视化界面就能设置&#xff0c;能实现自动备份、定时重启、清理缓存、执行脚本等多种自动化操作。下面详细讲解完整设置步骤、常用任务配置和避坑技巧。一、进入计划任务页面1.…...

Windows 11 + VSCode + Conda:保姆级配置Depth-Anything-3环境,一次跑通不报错

Windows 11深度视觉开发环境搭建实战&#xff1a;从零配置Depth-Anything-3全流程指南 当我在深夜第三次面对满屏红色报错信息时&#xff0c;终于意识到AI视觉项目的环境配置从来不是简单的"复制粘贴命令"就能搞定。本文将带你完整走通Windows 11系统下使用VSCode和C…...

Pixel Mind Decoder 跨平台调用演示:从微信小程序发送分析请求

Pixel Mind Decoder 跨平台调用演示&#xff1a;从微信小程序发送分析请求 1. 场景引入&#xff1a;为什么需要情绪分析功能 最近在开发一个社交类微信小程序时&#xff0c;遇到了一个有趣的需求&#xff1a;用户希望能在聊天过程中实时了解对方的情绪状态。想象一下&#xf…...

Livekit Server分布式部署实测:手把手教你用Redis搞定多节点,并说清楚它和云服务的根本区别

Livekit Server分布式架构深度实战&#xff1a;Redis多节点部署与云服务本质差异解析 从单机到分布式&#xff1a;突破性能瓶颈的关键抉择 当你的Livekit单机服务开始出现CPU占用率持续超过80%、TURN服务延迟明显增加、房间创建响应时间超过500ms等现象时&#xff0c;就到了必须…...

Unity3D集成百度语音识别与唤醒功能实战指南(Android平台)

1. 为什么选择百度语音SDK&#xff1f; 在Unity3D项目中实现语音交互功能时&#xff0c;百度语音识别与唤醒SDK是我测试过最稳定的解决方案之一。特别是在Android平台上&#xff0c;它的离线唤醒功能响应速度能控制在800毫秒内&#xff0c;识别准确率在安静环境下能达到95%以上…...

实测MinerU 2.5-1.2B:复杂排版PDF提取效果惊艳,小白也能上手

实测MinerU 2.5-1.2B&#xff1a;复杂排版PDF提取效果惊艳&#xff0c;小白也能上手 1. 引言&#xff1a;为什么需要专业的PDF提取工具 1.1 日常工作中的PDF处理痛点 作为一名经常需要处理学术文献的研究员&#xff0c;我深知PDF文档带来的困扰。上周我尝试用常规工具提取一…...

Steam Achievement Manager完全指南:开源工具解决Steam游戏成就高效管理难题

Steam Achievement Manager完全指南&#xff1a;开源工具解决Steam游戏成就高效管理难题 【免费下载链接】SteamAchievementManager A manager for game achievements in Steam. 项目地址: https://gitcode.com/gh_mirrors/st/SteamAchievementManager Steam Achievemen…...

NeMo Voice Agent:企业级语音助手框架的技术架构与性能分析

NeMo Voice Agent&#xff1a;企业级语音助手框架的技术架构与性能分析 【免费下载链接】NeMo NVIDIA/NeMo: 是一个用于实现语音和自然语言处理的开源框架。适合在需要进行语音和自然语言处理的任务中使用。特点是提供了一种简单、易用的 API&#xff0c;支持多种语音和自然语言…...

RMBG-2.0场景应用:广告素材制作,快速分离主体与背景

RMBG-2.0场景应用&#xff1a;广告素材制作&#xff0c;快速分离主体与背景 1. 广告设计中的背景移除痛点 在广告设计领域&#xff0c;背景移除是最常见也最耗时的任务之一。设计师们经常面临这样的困境&#xff1a; 时间成本高&#xff1a;一张普通商品图手动抠图需要5-10分…...