【Vue】vue3 video 保存视频进度,每次进入加载上次的视频进度
- 使用 localStorage 存储每个视频的播放进度
- 在组件加载时恢复上次的播放进度
- 在视频播放过程中实时保存进度
- 在组件卸载前保存最终进度
- 使用
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 事件来监听视频播放进度的变化 在模板中为视频元素添加事件监听: <videoloopautoplaycontrols:id"video_…...
C# 25Dpoint
C# 25Dpoint ,做一个备份 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 是一种轻量级的容器化技术,能够将应用程序及其依赖打包到一个可移植的容器中。Dockerfile 是构建 Docker 镜像的核心文件,它定义了镜像的构建步骤和配置。通过编写 Dockerfile,我们可以自动化地构建镜像,确保应用程序在不同…...
Linux 机器学习
Linux 机器学习是指在 Linux 操作系统环境下进行机器学习相关的开发、训练和应用。 具体步骤 环境搭建: 选择合适的 Linux 发行版:如 Ubuntu、Fedora、Arch Linux 等。Ubuntu 因其易用性和丰富的软件包管理系统,适合初学者;Fed…...
青少年编程与数学 02-006 前端开发框架VUE 25课题、UI数据
青少年编程与数学 02-006 前端开发框架VUE 25课题、UI数据 一、UI数据二、Element Plus处理响应式数据三、Vuetify处理响应式数据 课题摘要:本文探讨了UI数据在用户界面中的重要性和处理方法。UI数据包括展示数据、用户输入、状态数据等,对用户体验和应用交互性有直…...
css实现响应式详解
一、媒体查询(Media Queries) 基本概念 媒体查询是 CSS3 中用于根据不同的设备特性(如屏幕宽度、高度、设备类型等)应用不同样式规则的技术。它允许你为特定的媒体类型(如屏幕、打印、手持设备等)和条件&a…...
python-应用自动化操作方法集合
python-PC应用自动化操作 pywinauto:适合Windows系统的软件(GUI),通过遍历窗口(对话框)和窗口里的UI控件进行定位操作,也可以控制鼠标和键盘输入等 https://geekdaxue.co/read/pywinauto-doc-zh…...
mac地址是用来做什么的
MAC 地址(Media Access Control Address)是一个唯一的硬件地址,用于在网络中标识设备。每个网络接口卡(NIC)都有一个唯一的 MAC 地址。MAC 地址是数据链路层(OSI模型的第二层)使用的地址&#x…...
【Compose multiplatform教程】05 IOS环境编译
了解如何使现有的 Android 应用程序跨平台,以便它在 Android 和 iOS 上都能运行。您将能够在一个位置编写代码并针对 Android 和 iOS 进行测试一次。 本教程使用一个示例 Android 应用程序,其中包含用于输入用户名和密码的单个屏幕。凭证经过验证并保存…...
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智能合约开发
环境 : fisco bcos 3.11.0 webase-front : 3.1.1 console 3.8.0 table合约【3.2.0版本后的】 前言 最近在做毕设,数据的存储方式考虑使用fisco-bcos的table表存储,经过这几天的研究,发现对于fisco2和 fisco3版本的table表合约功能…...
leetcode刷题记录(四十八)——128. 最长连续序列
(一)问题描述 128. 最长连续序列 - 力扣(LeetCode)128. 最长连续序列 - 给定一个未排序的整数数组 nums ,找出数字连续的最长序列(不要求序列元素在原数组中连续)的长度。请你设计并实现时间复…...
HTML中如何保留字符串的空白符和换行符号的效果
有个字符串 储值门店{{thing3.DATA}}\n储值卡号{{character_string1.DATA}}\n储值金额{{amount4.DATA}}\n当前余额{{amount5.DATA}}\n储值时间{{time2.DATA}} , HTML中想要保留 \n的换行效果的有下面3种方法: 1、style 中 设置 white-space: pre-lin…...
Linux入门——环境基础开发(上)
Linux 软件包管理器 yum 什么是软件包 在Linux操作系统中,安装软件的方式通常较为复杂,其基本流程涉及下载程序源代码并通过编译得到可执行程序。然而,这种方法需要开发者具备一定的编程知识和环境配置能力,对于许多用户而言&am…...
c++类和对象---下
文章目录 一、类的静态成员 1.1.静态成员变量:所有对象共享的成员变量。 1.2.静态成员函数:可以访问静态成员变量,但不能访问非静态成员变量。 二、类的继承 2.1.继承:子类继承父类的成员变量和成员函数。 2.2.多态:基…...
组件中的Props
在项目开发中,在开发某些界面时,我们可以将一些代码封装成组件来简化代码。但是,如果某些情况下组件中的某些属性不是一成不变的(比如一个头像+姓名的组件,每次使用时都需要改变其图像src和姓名字符串),我们就可以使用Props。 我们要使用Props,我们需要先在组件中声明…...
并行服务、远程SSH无法下载conda,报错404
原下载代码无效,报错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 文件内容如下所示: 下面是对各个字段的解释: 1. name: "ohos/demos" - 这是组件或项目的名称,这里表示它属于 OHOS(OpenHarmony OS)生态系统下的一个名为"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…...
uniapp 对接腾讯云IM群组成员管理(增删改查)
UniApp 实战:腾讯云IM群组成员管理(增删改查) 一、前言 在社交类App开发中,群组成员管理是核心功能之一。本文将基于UniApp框架,结合腾讯云IM SDK,详细讲解如何实现群组成员的增删改查全流程。 权限校验…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
cf2117E
原题链接:https://codeforces.com/contest/2117/problem/E 题目背景: 给定两个数组a,b,可以执行多次以下操作:选择 i (1 < i < n - 1),并设置 或,也可以在执行上述操作前执行一次删除任意 和 。求…...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作:ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等(ArcGIS出图图例8大技巧),那这次我们看看ArcGIS Pro如何更加快捷的操作。…...
优选算法第十二讲:队列 + 宽搜 优先级队列
优选算法第十二讲:队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列,以便知晓哪些列包含有价值的数据,…...
浪潮交换机配置track检测实现高速公路收费网络主备切换NQA
浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求,本次涉及的主要是收费汇聚交换机的配置,浪潮网络设备在高速项目很少,通…...
Selenium常用函数介绍
目录 一,元素定位 1.1 cssSeector 1.2 xpath 二,操作测试对象 三,窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四,弹窗 五,等待 六,导航 七,文件上传 …...
JS手写代码篇----使用Promise封装AJAX请求
15、使用Promise封装AJAX请求 promise就有reject和resolve了,就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...
Python竞赛环境搭建全攻略
Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型(算法、数据分析、机器学习等)不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...
