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

简介

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

利用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>
相关推荐
P***25391 分钟前
前端构建工具缓存清理,npm cache与yarn cache
前端·缓存·npm
好奇的菜鸟3 分钟前
解决 npm 依赖版本冲突:从 “unable to resolve dependency tree“ 到依赖管理高手
前端·npm·node.js
lcc1879 分钟前
Vue 内置指令
前端·vue.js
lijun_xiao200943 分钟前
前端React18入门到实战
前端
o***Z4481 小时前
前端响应式设计资源,框架+模板
前端
blackorbird1 小时前
视频生成类大模型 Sora 2 系统提示提取技术研究
音视频
Android系统攻城狮1 小时前
Android16音频之启动蓝牙SCO链路startBluetoothSco:用法实例(九十六)
音视频·android16·音频进阶·蓝牙sco协议
IT_陈寒1 小时前
Vue 3.4 正式发布:5个不可错过的性能优化与Composition API新特性
前端·人工智能·后端
N***73851 小时前
前端无障碍开发资源,WCAG指南与工具
前端
顾安r1 小时前
11.15 脚本算法 加密网页
服务器·算法·flask·html·同态加密