视频记录历史播放位置效果

简介

每次打开页面视频从上一次的播放位置开始播放

利用lodash库做节流
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        video {
            width: 800px;
            height: 400px;
        }
    </style>

</head>

<body>

    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

    <video src="https://v.itheima.net/LapADhV6.mp4" controls></video>
    <script>
        //视频节流
        const video = document.querySelector('video');
        //从本地存储拿取上次播放时长位置
        (function () {
            video.currentTime = localStorage.getItem('playTime')
        })()
        
        video.addEventListener('timeupdate', _.throttle(() =>{
            localStorage.setItem('playTime', video.currentTime)
        }, 1000))
        
    </script>
</body>

</html>

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

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

相关文章

自动驾驶---Motion Planning之轨迹Path优化

1 背景 在之前的几篇文章中,不管是通过构建SL图《自动驾驶---Motion Planning之Path Boundary》,ST图《自动驾驶---Motion Planning之Speed Boundary》,又或者是构建SLT图《自动驾驶---Motion Planning之构建SLT Driving Corridor》,最终我们都是为了得到boundary的信息。 …

牛客题霸-SQL进阶篇(刷题记录二)

本文基于前段时间学习总结的 MySQL 相关的查询语法&#xff0c;在牛客网找了相应的 MySQL 题目进行练习&#xff0c;以便加强对于 MySQL 查询语法的理解和应用。 由于涉及到的数据库表较多&#xff0c;因此本文不再展示&#xff0c;只提供 MySQL 代码与示例输出。 部分题目因…

【隐私计算实训营003详解隐私计算框架及技术要点】

1. 隐语架构一览 1.1 隐语架构 隐语架构通常指的是一种面向隐私保护计算的软件框架或解决方案&#xff0c;它采用了密码学、可信执行环境&#xff08;TEE&#xff09;、多方安全计算&#xff08;MPC&#xff09;等多种隐私保护技术来实现在数据加密状态下进行计算&#xff0c;…

【计算机网络篇】数据链路层(2)封装成帧和透明传输

文章目录 &#x1f95a;封装成帧和透明传输&#x1f388;封装成帧&#x1f388;透明传输&#x1f5d2;️面向字节的物理链路使用字节填充的方法实现透明传输。&#x1f5d2;️面向比特的物理链路使用比特填充的方法实现透明传输。 &#x1f6f8;练习 &#x1f95a;封装成帧和透…

河北盟盾:高性能钢结构防火涂料,安全守护新力量

在现代化建设的浪潮中&#xff0c;防火安全日益成为各行业关注的焦点。河北盟盾防火材料有限公司以其卓越的产品质量和稳定性能&#xff0c;赢得了市场的广泛认可。公司始终坚持以科技为先导&#xff0c;以创新为动力&#xff0c;不断推出高品质、高性能的防火涂料产品。 公司的…

通讯录的动态实现

文章目录 通讯录的动态实现模块化编程通讯录的框架构建功能的具体实现初始化通讯录添加联系人删除联系人查找联系人修改联系人打印通讯录排序通讯录检查容量并扩容加载通讯录保留通讯录销毁通讯录 完整代码总结 通讯录的动态实现 模块化编程 分文件 不同模块放在不同的文件下 …

一招鲜吃遍天!CleanMyMac X苹果电脑Mac管家让你的Mac倍儿爽

一招鲜吃遍天&#xff01;CleanMyMac X 苹果电脑Mac管家让你的 Mac 倍儿爽 &#xff0c; 轻松清理、优化、保护你的 Apple 设备&#xff0c;体验前所未有的流畅&#xff0c;在当今数字化时代&#xff0c;我们的生活离不开各类电子设备&#xff0c;尤其是苹果电脑 Mac。 然而&am…

CISP 4.2备考之《安全支撑技术》知识点总结

文章目录 第一节 密码技术第二节 标识和身份鉴别技术第三节 访问控制技术 第一节 密码技术 密码学发展阶段&#xff1a;古典、近代、现代和公钥密码学及特点。 密码系统组成&#xff1a;明文、加密、密钥、解密、密文。 柯克霍夫原则&#xff1a;密钥保密&#xff0c;算法公开…

【Node.js】npx

概述 npx 可以使用户在不安装全局包的情况下&#xff0c;运行已安装在本地项目中的包或者远程仓库中的包。 高版本npm会自带npx命令。 它可以直接运行 node_modules/.bin 下的 exe 可执行文件。而不像之前&#xff0c;我们需要在 scripts 里面配置&#xff0c;然后 npm run …

利用Scala与Apache HttpClient实现网络音频流的抓取

概述 在当今数字化时代&#xff0c;网络数据的抓取和处理已成为许多应用程序和服务的重要组成部分。本文将介绍如何利用Scala编程语言结合Apache HttpClient工具库实现网络音频流的抓取。通过本文&#xff0c;读者将学习如何利用强大的Scala语言和Apache HttpClient库来抓取网…

npm i安装依赖报错,但是cnpm i 却安装成功

问题描述&#xff1a;在a项目中npm i 安装依赖时发生以上报错&#xff0c;但是cnpm i 却成功&#xff0c;而且在其他项目中npm i 安装其他项目依赖也能成功.... 解决办法&#xff1a;删除项目中package-lock.json文件后再npm i 即可

如何查询期刊的影响因子

查询期刊影响因子可以用下面两个方法&#xff1a; 一、中文期刊影响因子可以用知网查询 在知网首页&#xff0c;点击“出版物检索” 进入出版物检索页&#xff0c;输入期刊名称点击检索 &#xff0c;可查到该期刊的详细信息&#xff0c;例如输入“当代法学” 从上图可看到《…

el-tab 如何点击不同标签触发不同函数

介绍 el-tab本身的功能是点击之后切换不同页&#xff0c;但是我希望点击不同标签就触发不同页 代码实现 <template><el-tabsv-model"activeName"type"card"class"demo-tabs"tab-click"handleClick"><el-tab-pane lab…

如何开通企业付款到零钱功能

商家转账到零钱是什么&#xff1f; 使用商家转账到零钱这个功能&#xff0c;可以让商户同时向多个用户的零钱转账。商户可以使用这个功能用于费用报销、员工福利发放、合作伙伴货款或分销返佣等场景&#xff0c;提高效率。 商家转账到零钱的使用场景有哪些&#xff1f; 商家…

宜搭低代码高级认证实操题2 faas连接器加密解密

密钥维护页-保证有一条数据 敏感信息提交页 存档页&#xff0c;只是用来存数据的审批的时候不用这个表提交数据不然会出两条 授权查看页 FaaS连接器先下载好他的示例代码然后按照要求配置好参数直接拷贝进去就行 然后需要在云开发环境里面先new一个terminal然后跑一下./builde…

简介:KMeans聚类算法

在机器学习中&#xff0c;无监督学习一直是我们追求的方向&#xff0c;而其中的聚类算法更是发现隐藏数据结构与知识的有效手段。聚类是一种包括数据点分组的机器学习技术。给定一组数据点&#xff0c;我们可以用聚类算法将每个数据点分到特定的组中。 理论上&#xff0c;属于同…

Nacos的简介及安装和使用

Nacos的简介及安装和使用 1. Nacos简介1.1 核心特性1.2 常见的注册中心1.3 Nacos结构图 2. 如何安装和配置Nacos&#xff1f;2.1 Nacos的安装2.2 如何使用Nacos&#xff1f; 1. Nacos简介 ​ Nacos是一个开源的动态服务发现、配置和服务管理平台&#xff0c;由阿里巴巴开发和维…

OCP NVME SSD规范解读-14.Firmware固件升级要求

4.11节 Firmware Update Requirements 描述了数据中心NVMe SSD固件更新的具体要求&#xff0c;确保固件升级过程既安全又可靠&#xff0c;同时充分考虑了设备在升级过程中的可用性和功能性。 FWUP-1: 设备必须记录每一次固件激活过程。这意味着固件升级过程中&#xff0c;设备会…

SpringSecurity6.x

文章目录 一.什么是SpringSecurity二.SpringSecurity的特征三.SpringSecurity的第一个例子3.1 创建SpringBoot项目3.2 创建IndexController3.3 创建index.html3.4 启动项目3.5 Spring Security默认做了什么 四.SpringSecurity的整体架构4.1 Filter4.2 DelegatingFilterProxy4.3…

走进 Mybatis 内核世界:理解原理,释放更多生产力

目录 一、MyBatis 特点 二、 接口绑定实现原理 三、SpringBoot 加载 MyBatis 源码分析 四、MyBatis 执行性 五、MyBatis 分页原理 5.1 逻辑分页(内存分页) 5.2 物理分页 六、MyBatis 缓存 6.1 一级缓存 6.2 二级缓存 MyBatis 是一款优秀的持久层框架&#xff0c;它支持自…