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

1、效果图

2、

<div>
  <video
    controls
    class="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()
})

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【设计模式系列】迭代器模式(七)

一、什么是迭代器模式 迭代器模式&#xff08;Iterator Pattern&#xff09;是一种行为型设计模式&#xff0c;它提供一种方法来顺序访问一个聚合对象中的各个元素&#xff0c;而不暴露其内部的表示。迭代器模式将集合的遍历过程封装在一个独立的迭代器对象中&#xff0c;这样…

硅谷甄选(10)用户管理

用户管理模块 9.1 静态搭建 主要是el-form、el-pagination <template><el-card style"height: 80px"><el-form :inline"true" class"form"><el-form-item label"用户名:"><el-input placeholder"请…

BGP路径属性与路由反射器

前言 IBGP水平分割规则用于防止AS内部产生环路&#xff0c;在很大程度上杜绝了IBGP路由产生环路的可能性&#xff0c;但是同时也带来了新的问题&#xff1a;BGP路由在AS内部只能传递一跳&#xff0c;如果建立IBGP对等体全互联模型又会加重设备的负担。 BGP 路径属性 AS_Path …

EtherCAT转ModbusTCP相关技术

EtherCAT/Ethernet/IP/Profinet/ModbusTCP协议互转工业串口网关https://item.taobao.com/item.htm?ftt&id822721028899 MS-GW15 概述 MS-GW15 是 EtherCAT 和 Modbus TCP 协议转换网关&#xff0c;为用户提供一种 PLC 扩展的集成解决方案&#xff0c;可以轻松容易将 Modbu…

如何防止U盘盗取电脑数据?

数据安全无论是对企业还是个人都至关重要。这些用户群体随时面临着数据被窃取的风险&#xff0c;而 U 盘则成为了潜在的安全隐患。如果你想要禁止电脑上使用 这类USB 存储设备&#xff0c;看完这篇文章&#xff0c;防止 U 盘盗取数据并非难事。 禁止使用usb存储设备 打开电脑上…

二叉树选择题

一 . 相关性质 1 &#xff09; 对于任何一棵二叉树 &#xff0c; 如果度数为 0 ---> 其叶子结点个数为 , 度数为2的分支结点个数为 &#xff0c;则有 2 ) 树的结点总数 n 3 ) 有 n 个结点 &#xff0c; 则边数为 n - 1 4 ) 满二叉树 &#xff1a;&#xff08;k 层) 结…

【急救】——心肺复苏和AED使用以及海姆立克法

【急救】——心肺复苏和AED使用以及海姆立克法 法律保障成人CPR实施步骤1.确保现场环境安全和自身安全2.呼唤确认救助对象状况&#xff0c;通过轻拍肩膀&#xff0c;触摸腹部数10个数识别呼吸***3.呼喊求助***4.找到按压位置5.按照标准要求按压什么时候停止CPR(心肺复苏&#x…

【小白学机器学习28】 统计学脉络+ 总体+ 随机抽样方法

目录 参考书&#xff0c;学习书 0 统计学知识大致脉络 1 个体---抽样---整体 1.1 关于个体---抽样---整体&#xff0c;这个三段式关系 1.2 要明白&#xff0c;自然界的整体/母体是不可能被全部认识的 1.2.1 不要较真&#xff0c;如果是人为定义的一个整体&#xff0c;是可…

Qgis 开发初级 《ToolBox》

Qgis 有个ToolBox 的&#xff0c;在Processing->ToolBox 菜单里面&#xff0c;界面如下。 理论上Qgis这里面的工具都是可以用脚本或者C 代码调用的。界面以Vector overlay 为例子简单介绍下使用方式。Vector overlay 的意思是矢量叠置分析&#xff0c;和arcgis软件类似的。点…

用图说明 CPU、MCU、MPU、SoC 的区别

CPU CPU 负责执行构成计算机程序的指令&#xff0c;执行这些指令所指定的算术、逻辑、控制和输入/输出&#xff08;I/O&#xff09;操作。 MCU (microcontroller unit) 不同的 MCU 架构如下&#xff0c;注意这里的 MPU 表示 memory protection unit MPU (microprocessor un…

HCIA(ACL)

第七节 ACL&#xff1a;访问控制列表 访问控制----在路由器的入或者出的接口上&#xff0c;匹配流量&#xff0c;之后产生动作---允许或拒绝 定义感兴趣流量-----帮助其他软件抓流量 匹配规则&#xff1a; 至上而下&#xff0c;逐一匹配&#xff0c;上调匹配按照上条执行…

冒泡排序和二分查找--go

冒泡排序的逻辑 二分查找的逻辑 func bubbleSort(arr *[5]int){//冒泡排序fmt.Println(*arr)temp : 0for j : len(*arr); j > 0; j-- {for i : 0; i < j-1; i {temp (*arr)[i]if((*arr)[i] > (*arr)[i1]){(*arr)[i] (*arr)[i1](*arr)[i1] temp}}} }func binaryF…

【工具分享】Pylocky勒索病毒解密工具

前言 PyLocky勒索软件首次出现在2018年&#xff0c;以模仿著名的Locky勒索软件而得名。与Locky无实际关联&#xff0c;PyLocky是用Python编写的&#xff0c;并通过PyInstaller打包成可执行文件&#xff0c;使其更难被检测。PyLocky通常通过网络钓鱼邮件传播&#xff0c;邮件伪…

SAP-FICO 月结流程

一、财务月结 1、资产会计-固定资产折旧计提AFAB 正式运行之前&#xff0c;先测试运行&#xff0c;没有问题就正式运行 可以看到&#xff0c;没有错误 因为正式系统的资产会过于庞大&#xff0c;一般都是后台运行资产的折旧 点击程序--后台执行 AFBP查看运行日志&#xff0c…

vscode | 开发神器vscode快捷键删除和恢复

目录 快捷键不好使了删除快捷键恢复删除的快捷键 在vscode使用的过程中&#xff0c;随着我们自身需求的不断变化&#xff0c;安装的插件将会持续增长&#xff0c;那么随之而来的就会带来一个问题&#xff1a;插件的快捷键重复。快捷键重复导致的问题就是快捷键不好使了&#xf…

ETLCloud怎么样?深度解析其在数据管理中的表现

在BI或数据大屏等数据分析工具中&#xff0c;经常需要从多个业务系统中提取原始数据&#xff0c;然后对数据进行清洗、处理&#xff0c;以获取高质量、有效且干净的数据以供后续的BI进行数据统计和分析使用&#xff0c;从高质量的实现企业数据的价值变现。 然而&#xff0c;在…

0xGame 2024 [Week 4] Jenkins

1.前言 由于好久没做web题了&#xff0c;所以今天来尝试来做一波web题&#xff0c;仅供刷题记录。 2.题目 这个给的提示对于小白来说实在是友好的过劲。 3.分析 上网搜到一个关于Jenkins的历史漏洞&#xff0c;下面链接可供参考 https://blog.csdn.net/2301_80127209/arti…

国标GB28181公网直播EasyGBS国标GB28181软件的应用场景

随着科技的飞速发展&#xff0c;安防视频监控技术已经成为现代社会不可或缺的一部分&#xff0c;它在保障公共安全、企业运营安全以及个人财产安全方面发挥着举足轻重的作用。国标GB28181网页直播平台EasyGBS安防视频监控平台&#xff0c;作为集高效性、稳定性与智能化于一体的…

【Vue项目1】第一篇

Vue项目1学习第一篇 01. 环境配置介绍和项目搭建02. Router路由配置引入03. ElementPlus引入和按需加载04. layout布局和菜单aside组件创建05. aside样式问题和treeMenu组件拆分06. treeMenu组件递归实现 01. 环境配置介绍和项目搭建 &#xff08;1&#xff09;安装node.js …