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

【Vue】vue3 video 保存视频进度,每次进入加载上次的视频进度

  1. 使用 localStorage 存储每个视频的播放进度
  2. 在组件加载时恢复上次的播放进度
  3. 在视频播放过程中实时保存进度
  4. 在组件卸载前保存最终进度
  5. 使用 timeupdate 事件来监听视频播放进度的变化

在模板中为视频元素添加事件监听:

<videoloopautoplaycontrols:id="`video_${index}`":src="getVideoSrc(video.src)"class="video"@loadedmetadata="loadVideoProgress"></video>
// ... 其他导入保持不变
import { reactive, ref, onMounted, onBeforeUnmount } from 'vue'// ... paramsList 和 params 保持不变// 添加视频进度保存的常量
const VIDEO_PROGRESS_KEY = 'VIDEO_PROGRESS'const videoList = ref([{title: '大范围流场图',src: 'dfwlct',isPlaying: true,progress: 0, // 添加进度属性},{title: '工程局部流场图',src: 'gcjblct',isPlaying: true,progress: 0, // 添加进度属性},
])// 加载保存的视频进度
const loadVideoProgress = () => {const savedProgress = localStorage.getItem(VIDEO_PROGRESS_KEY)if (savedProgress) {const progressData = JSON.parse(savedProgress)videoList.value.forEach((video, index) => {if (progressData[video.src]) {video.progress = progressData[video.src]const videoElement = document.getElementById(`video_${index}`) as HTMLVideoElementif (videoElement) {videoElement.currentTime = video.progress}}})}
}// 保存视频进度
const saveVideoProgress = () => {const progressData = {}videoList.value.forEach((video, index) => {const videoElement = document.getElementById(`video_${index}`) as HTMLVideoElementif (videoElement) {progressData[video.src] = videoElement.currentTime}})localStorage.setItem(VIDEO_PROGRESS_KEY, JSON.stringify(progressData))
}// 监听视频时间更新
const handleTimeUpdate = (index: number) => {const videoElement = document.getElementById(`video_${index}`) as HTMLVideoElementif (videoElement) {videoList.value[index].progress = videoElement.currentTimesaveVideoProgress()}
}// 组件挂载时加载进度
onMounted(() => {loadVideoProgress()// 为每个视频添加时间更新事件监听videoList.value.forEach((_, index) => {const videoElement = document.getElementById(`video_${index}`)if (videoElement) {videoElement.addEventListener('timeupdate', () => handleTimeUpdate(index))}})
})// 组件卸载前移除事件监听
onBeforeUnmount(() => {videoList.value.forEach((_, index) => {const videoElement = document.getElementById(`video_${index}`)if (videoElement) {videoElement.removeEventListener('timeupdate', () => handleTimeUpdate(index))}})saveVideoProgress()
})// ... 其他代码保持不变

这样,用户每次进入页面时都会自动加载上次观看的进度。进度信息会在以下情况下保存:

  • 视频播放过程中
  • 用户暂停视频时
  • 用户离开页面时

相关文章:

【Vue】vue3 video 保存视频进度,每次进入加载上次的视频进度

使用 localStorage 存储每个视频的播放进度在组件加载时恢复上次的播放进度在视频播放过程中实时保存进度在组件卸载前保存最终进度使用 timeupdate 事件来监听视频播放进度的变化 在模板中为视频元素添加事件监听&#xff1a; <videoloopautoplaycontrols:id"video_…...

C# 25Dpoint

C# 25Dpoint &#xff0c;做一个备份 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms;namespace _25Dpoint {public partial cl…...

如何制作一个高质量的 Dockerfile 镜像:从入门到实践

Docker 是一种轻量级的容器化技术&#xff0c;能够将应用程序及其依赖打包到一个可移植的容器中。Dockerfile 是构建 Docker 镜像的核心文件&#xff0c;它定义了镜像的构建步骤和配置。通过编写 Dockerfile&#xff0c;我们可以自动化地构建镜像&#xff0c;确保应用程序在不同…...

Linux 机器学习

Linux 机器学习是指在 Linux 操作系统环境下进行机器学习相关的开发、训练和应用。 具体步骤 环境搭建&#xff1a; 选择合适的 Linux 发行版&#xff1a;如 Ubuntu、Fedora、Arch Linux 等。Ubuntu 因其易用性和丰富的软件包管理系统&#xff0c;适合初学者&#xff1b;Fed…...

青少年编程与数学 02-006 前端开发框架VUE 25课题、UI数据

青少年编程与数学 02-006 前端开发框架VUE 25课题、UI数据 一、UI数据二、Element Plus处理响应式数据三、Vuetify处理响应式数据 课题摘要:本文探讨了UI数据在用户界面中的重要性和处理方法。UI数据包括展示数据、用户输入、状态数据等&#xff0c;对用户体验和应用交互性有直…...

css实现响应式详解

一、媒体查询&#xff08;Media Queries&#xff09; 基本概念 媒体查询是 CSS3 中用于根据不同的设备特性&#xff08;如屏幕宽度、高度、设备类型等&#xff09;应用不同样式规则的技术。它允许你为特定的媒体类型&#xff08;如屏幕、打印、手持设备等&#xff09;和条件&a…...

python-应用自动化操作方法集合

python-PC应用自动化操作 pywinauto&#xff1a;适合Windows系统的软件&#xff08;GUI&#xff09;&#xff0c;通过遍历窗口&#xff08;对话框&#xff09;和窗口里的UI控件进行定位操作&#xff0c;也可以控制鼠标和键盘输入等 https://geekdaxue.co/read/pywinauto-doc-zh…...

mac地址是用来做什么的

MAC 地址&#xff08;Media Access Control Address&#xff09;是一个唯一的硬件地址&#xff0c;用于在网络中标识设备。每个网络接口卡&#xff08;NIC&#xff09;都有一个唯一的 MAC 地址。MAC 地址是数据链路层&#xff08;OSI模型的第二层&#xff09;使用的地址&#x…...

【Compose multiplatform教程】05 IOS环境编译

了解如何使现有的 Android 应用程序跨平台&#xff0c;以便它在 Android 和 iOS 上都能运行。您将能够在一个位置编写代码并针对 Android 和 iOS 进行测试一次。 本教程使用一个示例 Android 应用程序&#xff0c;其中包含用于输入用户名和密码的单个屏幕。凭证经过验证并保存…...

3D滤波器处理遥感tif图像

import cv2 import numpy as np from osgeo import gdal# 定义 Gabor 滤波器的参数 kSize 31 # 滤波器核的大小 g_sigma 3.0 # 高斯包络的标准差 g_theta np.pi / 4 # Gabor 函数的方向 g_lambda 10.0 # 正弦波的波长 g_gamma 0.5 # 空间纵横比 g_psi np.pi / 2 # …...

fisco bcosV3 Table智能合约开发

环境 &#xff1a; fisco bcos 3.11.0 webase-front : 3.1.1 console 3.8.0 table合约【3.2.0版本后的】 前言 最近在做毕设&#xff0c;数据的存储方式考虑使用fisco-bcos的table表存储&#xff0c;经过这几天的研究&#xff0c;发现对于fisco2和 fisco3版本的table表合约功能…...

leetcode刷题记录(四十八)——128. 最长连续序列

&#xff08;一&#xff09;问题描述 128. 最长连续序列 - 力扣&#xff08;LeetCode&#xff09;128. 最长连续序列 - 给定一个未排序的整数数组 nums &#xff0c;找出数字连续的最长序列&#xff08;不要求序列元素在原数组中连续&#xff09;的长度。请你设计并实现时间复…...

HTML中如何保留字符串的空白符和换行符号的效果

有个字符串 储值门店{{thing3.DATA}}\n储值卡号{{character_string1.DATA}}\n储值金额{{amount4.DATA}}\n当前余额{{amount5.DATA}}\n储值时间{{time2.DATA}} &#xff0c; HTML中想要保留 \n的换行效果的有下面3种方法&#xff1a; 1、style 中 设置 white-space: pre-lin…...

Linux入门——环境基础开发(上)

Linux 软件包管理器 yum 什么是软件包 在Linux操作系统中&#xff0c;安装软件的方式通常较为复杂&#xff0c;其基本流程涉及下载程序源代码并通过编译得到可执行程序。然而&#xff0c;这种方法需要开发者具备一定的编程知识和环境配置能力&#xff0c;对于许多用户而言&am…...

c++类和对象---下

文章目录 一、类的静态成员 1.1.静态成员变量&#xff1a;所有对象共享的成员变量。 1.2.静态成员函数&#xff1a;可以访问静态成员变量&#xff0c;但不能访问非静态成员变量。 二、类的继承 2.1.继承&#xff1a;子类继承父类的成员变量和成员函数。 2.2.多态&#xff1a;基…...

组件中的Props

在项目开发中,在开发某些界面时,我们可以将一些代码封装成组件来简化代码。但是,如果某些情况下组件中的某些属性不是一成不变的(比如一个头像+姓名的组件,每次使用时都需要改变其图像src和姓名字符串),我们就可以使用Props。 我们要使用Props,我们需要先在组件中声明…...

并行服务、远程SSH无法下载conda,报错404

原下载代码无效&#xff0c;报错404 wget -c https://repo.anaconda.com/archive/Anaconda3-2023.03-1-Linux-x86_64.sh 使用下面代码下载 wget --user-agent"User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.12) Gecko/20101026 Firefox/3.6.12…...

迅为RK3568开发板篇OpenHarmony配置HDF驱动控制LED-新增 topeet子系统-编写 bundle.json文件

bundle.json 文件内容如下所示&#xff1a; 下面是对各个字段的解释&#xff1a; 1. name: "ohos/demos" - 这是组件或项目的名称&#xff0c;这里表示它属于 OHOS&#xff08;OpenHarmony OS&#xff09;生态系统下的一个名为"demos"的组件。 2. descri…...

深度剖析RabbitMQ:从基础组件到管理页面详解

文章目录 一、简介二、Overview2.1 Overview->Totals2.2 Overview->Nodesbroker的属性2.3 Overview->Churn statistics2.4 Overview->Ports and contexts2.5 Overview->Export definitions2.6 Overview->Import definitions 三、Connections连接的属性 四、C…...

usb通过hdc连接鸿蒙next的常用指令

参考官方 注册报名https://www.hiascend.com/developer/activities/details/44de441ef599450596131c8cb52f7f8c/signup?channelCodeS1&recommended496144 hdc-调试命令-调测调优-系统 - 华为HarmonyOS开发者https://developer.huawei.com/consumer/cn/doc/harmonyos-guid…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...