26、js - 节流案例1：用节流记录视频播放时间

EchoLiner

已于 2023-06-07 10:31:19 修改

阅读量405

点赞数

文章标签： javascript 开发语言 ecmascript 前端前端框架 Powered by 金山文档

于 2023-06-07 10:31:00 首次发布

本文链接：https://blog.csdn.net/EchoLiner/article/details/131082684

版权

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        video {
            width: 600px;
            height: 400px;
        }
    </style>
</head>

<body>
    <video autoplay loop controls
        src="https://vd4.bdstatic.com/mda-jempdushtuheakn9/sc/mda-jempdushtuheakn9.mp4?v_from_s=hkapp-haokan-hnb&auth_key=1685971926-0-0-e9b4a3d64acc11ed8620708cda30a952&bcevod_channel=searchbox_feed&pd=1&cd=0&pt=3&logid=0126855784&vid=9147510635690665522&abtest=110193_1&klogid=0126855784"></video>
</body>

</html>
<script src="./lodash.min.js"></script>
<script>

    const video = document.querySelector('video');
    // 用节流记录视频播放时间
    // 视频时间更新事件：当视频的currentTime更新时会触发timeupdate事件
    video.addEventListener('timeupdate', _.throttle(function () {
        localStorage.setItem('curtime', this.currentTime);
    }, 2000));

    // 视频加载完成后触发
    video.addEventListener('loadeddata', function () {
        this.currentTime = localStorage.getItem('curtime');
    });

</script>