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

简介

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

利用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>
相关推荐
调试到凌晨7 分钟前
免费配音工具长文本处理能力实测:做长视频和有声书,谁更稳?
音视频
逍遥德36 分钟前
ECMAScript 各个版本的语法列表
前端·javascript·ecmascript·es6
用户0595401744639 分钟前
把AI聊天机器人记忆存储测试从3小时压到5分钟,我用Pytest + Docker搭了一套自动化回归
前端·css
明月_清风40 分钟前
显存即正义:不同显存容量能训多大的模型?一文说清硬件边界与训练策略
前端·后端·ai编程
Sterting1 小时前
第 9 节:本地存储 — 数据不丢的前端缓存
前端·javascript·缓存
IT_陈寒1 小时前
Vite的HMR在我项目上突然失效,排查三天找到离谱原因
前端·人工智能·后端
人间凡尔赛1 小时前
React Compiler 1.0 正式落地:告别 useMemo / useCallback,2026 前端性能优化的新范式
前端·性能优化·react
灵析表格1 小时前
灵析表格功能函数深度分析报告
前端·数据库·microsoft
Data_Journal1 小时前
掌握网页抓取中的分页:完整指南
java·服务器·前端
breeze jiang1 小时前
React useRef + Web Worker:避免大计算阻塞页面的通信方案
前端·javascript·react.js