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

简介

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

利用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>
相关推荐
轻口味3 小时前
HarmonyOS 6 NDK开发系列1:音视频播放能力介绍
华为·音视频·harmonyos
美狐美颜sdk4 小时前
从人脸关键点到动态贴图:面具特效在美颜SDK中的实现原理
前端·图像处理·人工智能·直播美颜sdk·美颜api
我命由我123454 小时前
React Router 6 - 编程式路由导航、useInRouterContext、useNavigationType
前端·javascript·react.js·前端框架·html·ecmascript·js
威联通网络存储4 小时前
告别掉帧与素材损毁:威联通 QuTS hero 如何重塑影视后期协同工作流
前端·网络·人工智能·python
anOnion4 小时前
构建无障碍组件之Tabs Pattern
前端·html·交互设计
大模型实验室Lab4AI5 小时前
Demystifing Video Reasoning 论文简析
音视频
一招定胜负5 小时前
课堂教学质量综合评分系统
java·linux·前端
2301_780669866 小时前
前端logo替换开发
前端·vue.js
启山智软6 小时前
【启山智软智能商城系统技术架构剖析】
java·前端·架构
天上路人6 小时前
A-59F 多功能语音处理模组在本地会议系统扩音啸叫处理中的技术应用与性能分析
人工智能·神经网络·算法·硬件架构·音视频·语音识别·实时音视频