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

简介

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

利用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>
相关推荐
. . . . .4 小时前
CSS 编写与管理范式 - Tailwind和CSS-in-JS
css
_果果然4 小时前
这 7 个免费 Lottie 动画网站,帮你省下一个设计师的工资
前端
QT.qtqtqtqtqt4 小时前
uni-app小程序前端开发笔记(更新中)
前端·笔记·小程序·uni-app
永远都不秃头的程序员(互关)5 小时前
基于CANN的ops-signal仓库实现AIGC音频生成中的动态窗函数融合优化——从STFT预处理到端到端低延迟合成
aigc·音视频
薛定谔的猫喵喵5 小时前
基于PyQt5的视频答题竞赛系统设计与实现
开发语言·qt·音视频
Aliex_git5 小时前
跨域请求笔记
前端·网络·笔记·学习
37方寸5 小时前
前端基础知识(Node.js)
前端·node.js
byte轻骑兵5 小时前
从HCI报文透视LE Audio重连流程(3):音频流建立、同步与终止
音视频·蓝牙·le audio·cig/cis·广播音频
powerfulhell5 小时前
寒假python作业5
java·前端·python
木子啊6 小时前
前端组件化:模板继承拯救发际线
前端