视频播放通过节流本地存储当前播放时间

最新推荐文章于 2024-10-16 17:15:18 发布

qq_30437579

最新推荐文章于 2024-10-16 17:15:18 发布

阅读量73

点赞数

文章标签：音视频

本文链接：https://blog.csdn.net/qq_30437579/article/details/132563453

版权

<!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="/"></video>
</body>

</html>

<script>

    const video = document.querySelector('video')
    video.addEventListener('timeupdate', throttle(function () {
        localStorage.setItem('curtime', this.currentTime)
    }, 2000))

    video.addEventListener('loadeddata', function () {
        video.currentTime = localStorage.getItem('curtime') || 0
    })


    function throttle (fn, ms) {
        let timer = null

        return function () {
            if (timer) return
            timer = setTimeout(() => {
                fn()
                timer = null
            }, ms)
        }
    }

</script>