常用页面效果 --- 在每次打开视频时从上一次的观看时间开始播放

1. 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        video {
            width: 600px;
            height: 400px;
            margin: 300px 600px;
        }
    </style>

</head>
<body>
<video src="https://v.itheima.net/LapADhV6.mp4" controls></video>
<!-- 引入lodash.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script>
    const video = document.querySelector("video")

    // 当视频播放位置发生改变时,将当前视频的播放时间记录在本地存储中
    function saveVideoTime() {
        const videoTimer = localStorage.getItem("videoTimer")
        const newVideoTimer = videoTimer ? JSON.parse(videoTimer) : {}
        newVideoTimer[video.src] = video.currentTime  // 当前播放时间
        video.currentTime ? localStorage.setItem("videoTimer", JSON.stringify(newVideoTimer)) : ""
    }

    // 使用节流,将 ontimeupdate 事件控制在1s 触发一次
    video.ontimeupdate = _.throttle(saveVideoTime, 1000)

    // 每次关闭后再打开视频页时会触发onloadeddata 函数,刷新页面不会触发
    video.onloadedmetadata = function () {
        console.log("异常退出后的第一次调用")
    }
    video.onloadeddata = function () {
        const videoTimer = localStorage.getItem("videoTimer")
        video.currentTime = videoTimer ? JSON.parse(videoTimer)[video.src] : 0
    }
</script>
</body>
</html>
posted @ 2024-05-23 17:31  河图s  阅读(32)  评论(0)    收藏  举报