vue3+vant实现视频播放(含首次禁止进度条拖拽,视频看完后恢复,保存播放视频进度,刷新及下次进入继续播放,判断视频有无全部看完等)

1、效果图

2、

<div><videocontrolsclass="video_player"ref="videoPlayer":src="videoSrc"@timeupdate="handleTimeUpdate"@play="onPlay"@pause="onPause"@ended="onVideoEnded"></video><!--添加遮罩层视频第一次观看不支持快进,已观看过的内容重复观看支持快进。--><div v-if="videoPlayEnd == false" class="cover"></div>
</div><div class="right_box" v-if="videoPlayEnd == true"><img class="img_style" src="@/assets/image/已看完.png" /><div class="text_right">已看完</div>
</div>
<div class="right_box" v-if="videoPlayEnd == false"><img class="img_style" src="@/assets/image/未看完.png" /><div class="text2_right">未看完</div>
</div>const videoPlayEnd = ref(false) //视频播放结束标识
const lastTime = ref(0) //视频上次播放的时间
//视频播放
const onPlay = () => {console.log('视频播放')
}
//视频暂停
const onPause = () => {console.log('视频暂停')
}
//播放结束
const onVideoEnded = () => {console.log('播放结束')videoPlayEnd.value = true
}
const handleTimeUpdate = () => {if (videoPlayer.value) {const currentTime = videoPlayer.value.currentTime //当前播放的时间lastTime.value = currentTime //保存当前播放时间localStorage.setItem('videoTime', lastTime.value)}
}onMounted(() => {//实现保存视频进度,下次进来继续播放const savedTime = localStorage.getItem('videoTime')if (savedTime) {//检查是否存在保存的时间videoPlayer.value.currentTime = parseFloat(savedTime) //转化成浮点数}handleTimeUpdate()
})

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/463028.html

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

相关文章

LongVU :Meta AI 的解锁长视频理解模型,利用自适应时空压缩技术彻底改变视频理解方式

Meta AI在视频理解方面取得了令人瞩目的里程碑式成就&#xff0c;推出了LongVU&#xff0c;这是一种开创性的模型&#xff0c;能够理解以前对人工智能系统来说具有挑战性的长视频。 研究论文 "LongVU&#xff1a;用于长视频语言理解的时空自适应压缩 "提出了一种革命…

【Spring IOC】实现一个简单的 Spring 容器

1. 理解知识 Spring 容器的作用 Spring 容器是Spring的核心&#xff0c;用来管理Bean对象的。容器将创建对象&#xff0c;把它们连接在一起&#xff0c;配置它们&#xff0c;并管理他们的整个生命周期从创建到销毁。 Bean 对象的管理 当一个 Bean 对象交给 Spring 容器管理…

Pytorch lightning多机多卡训练通讯问题(NCCL error)排查

一、问题 单机多卡可以正常训练模型&#xff0c;多机多卡数据加载完成后卡住不动&#xff0c;排查两台机器可以ping通&#xff0c;表明网络没有问题&#xff0c;查看bug信息是NCCL通信问题。报错信息大致如下: torch.distributed.DistBackendError: NCCL error in: …/torch/c…

攻防靶场(26):hydra爆破web的小技巧 DC-4

目录 1. 侦查 1.1 收集目标网络信息&#xff1a;IP地址 1.2 主动扫描&#xff1a;扫描IP地址段 1.3 主动扫描&#xff1a;字典扫描 1.4 主动扫描&#xff1a;漏洞扫描 2. 初始访问 2.1 有效账户&#xff1a;默认账户 2.2 利用面向公众的应用 3. 凭据访问 3.1 不安全的凭据&…

UOS 安装usb wifi 网卡驱动

电脑上装安uos后发现usb网卡驱动不见了&#xff0c;网卡长下面这个样子&#xff0c;但是官方没有驱动 驱动网址选5300 https://www.ezcast.com/app/ezcast/wifi-adapter/windows 这时我们 lsusb找到相关设备&#xff0c;发现是Realtek 的设备 要在 Ubuntu 上安装 Realtek 0bda…

东方娱乐周刊

文章目录 一、征稿简介二、重要信息三、服务简述四、投稿须知五、联系咨询 一、征稿简介 二、重要信息 期刊官网&#xff1a;https://ais.cn/u/3eEJNv 三、服务简述 学科领域&#xff1a; 人文社科-教育学、文学、艺术、体育、人文社科&#xff1a;其他 四、投稿须知 1.在…

第三方支付系统架构设计

第三方支付是指具备一定实力和信誉保障&#xff0c;并获得国家颁发运营拍照的独立机构&#xff0c;采用和各大银行签约的方式&#xff0c;通过与银行相关接口对接而促成交易的网络支付的模式。我们熟悉的微信支付和支付宝都属于第三方支付工具&#xff0c;第三方支付工具随着移…

计算机网络八股文个人总结

1.TCP/IP模型和OSI模型的区别 在计算机网络中&#xff0c;TCP/IP 模型和 OSI 模型是两个重要的网络协议模型。它们帮助我们理解计算机通信的工作原理。以下是它们的主要区别&#xff0c;以通俗易懂的方式进行解释&#xff1a; 1. 模型层数 OSI 模型&#xff1a;有 7 层&#…

Java日志脱敏(二)——fastjson Filter + 注解 + 工具类实现

背景简介 日志脱敏 是常见的安全需求&#xff0c;最近公司也需要将这一块内容进行推进。看了一圈网上的案例&#xff0c;很少有既轻量又好用的轮子可以让我直接使用。我一直是反对过度设计的&#xff0c;而同样我认为轮子就应该是可以让人拿去直接用的。所以我准备分享两篇博客…

高效实现SCRM用户管理的最佳实践与策略

内容概要 在当今竞争激烈的市场环境中&#xff0c;SCRM用户管理显得尤为重要。SCRM&#xff08;Social Customer Relationship Management&#xff09;不仅仅是简单的客户管理工具&#xff0c;它更是企业与客户之间建立良好关系的一座桥梁。通过深入了解用户的需求和行为&…

Git - 两种方式撤销已提交到远端仓库的记录并删除提交记录

文章目录 命令行方式附 命令行方式 确定要撤销的提交记录 首先&#xff0c;使用以下命令查看提交历史&#xff1a; git log找到想撤销的提交记录的哈希值&#xff08;SHA&#xff09; &#xff0c;比如9c9c98d6f7f28c41d971f8efd51ed31f9720792c 撤销提交记录 根据需求选择以下…

【C/C++】字符/字符串函数(0)(补充)——由ctype.h提供

零.导言 除了字符分类函数&#xff0c;字符转换函数也是一类字符/字符串函数。 C语言提供了两种字符转换函数&#xff0c;分别是 toupper &#xff0c; tolower。 一.什么是字符转换函数&#xff1f; 顾名思义&#xff0c;即转换字符的函数&#xff0c;如大写字母转小写字母&am…

【排序】5.堆排序(详细图解)

文章目录 前言1.建堆方法的选择2.优先使用向下调整的原因3.堆排序图解&#xff08;大堆-升序为例子&#xff09;3.1 向下调整法-建大堆3.2 进行堆排序 4.堆排序代码4.1 向下调整法4.1. 1 小堆4.1. 2 大堆4.2 堆排序 5. 关于小堆——降序6.性能分析 前言 &#x1f431;个人主页&…

头歌——机器学习(线性回归)

文章目录 线性回归简述答案 线性回归算法答案 线性回归实践 - 波斯顿房价预测LinearRegression代码 利用sklearn构建线性回归模型示例代码如下&#xff1a; 代码 线性回归简述 简单线性回归 在生活中&#xff0c;我们常常能碰到这么一种情况&#xff0c;一个变量会跟着另一个变…

技术美术百人计划 | 《5.4 水体渲染》笔记

一、水体渲染的波形模拟技术-基于物理 基于物理的波形模拟方法&#xff1a; 欧拉方法&#xff08;Eulerian approaches&#xff09;[Kass 1990]拉格朗日方法&#xff08;Lagrangian approaches&#xff09; [Stam 1995]欧拉-拉格朗日混合方法&#xff08;Hybrid approaches&a…

使用 Sortable.js 库 实现 Vue3 elementPlus 的 el-table 拖拽排序

文章目录 实现效果Sortable.js介绍下载依赖添加类名导入sortablejs初始化拖拽实例拖拽完成后的处理总结 在开发过程中&#xff0c;我们经常需要处理表格数据&#xff0c;并为用户提供便捷的排序方式。特别是在需要管理长列表、分类数据或动态内容时&#xff0c;拖拽排序功能显得…

Chrome与火狐的安全功能全面评估

在当今数字化时代&#xff0c;网络安全已成为用户最为关注的问题之一。作为两款广受欢迎的浏览器&#xff0c;Chrome和火狐&#xff08;Firefox&#xff09;都提供了多种安全功能来保护用户的在线隐私和数据安全。本文将全面评估这两款浏览器的安全功能&#xff0c;帮助用户更好…

Java-02

笔试算法&#xff1a; 41. 回文串 我们称一个字符串为回文串&#xff0c;当且仅当这个串从左往右和从右往左读是一样的。例如&#xff0c;aabbaa、a、abcba 是回文串&#xff0c;而 ab、ba、abc 不是回文串。注意单个字符也算是回文串。 现在&#xff0c;给你一个长度为n的…

Windows实用工具推荐(uTools+截图工具Snipaste)

闲言少叙,直奔主题 uTools 官网下载地址 uTools官网 - 新一代效率工具平台 这是工具的输入命令的样式,主题颜色可以自己设置,点击右边的头像进入主页 左侧是已经安装的工具,可以根据自己喜好安装各种实用小工具 可以自定义设置呼出菜单的快捷键 这款工具拥有很多功能,我推荐…

ViT面试知识点

文章目录 VITCLIPSAMYOLO系列问题 VIT 介绍一下Visual Transformer&#xff1f; 介绍一下自注意力机制&#xff1f; 介绍一下VIT的输出方式 介绍一下VIT做分割任务 VIT是将NLP的transformer迁移到cv领域&#xff0c;他的整个流程大概如下&#xff1a;将一张图片切成很多个pat…