js、html实现断点播放视频，视频资源在localStorage中

是光の谢宣骞

已于 2022-04-03 13:56:02 修改

阅读量490

点赞数

分类专栏：前端demo 文章标签： javascript html 音视频

于 2022-03-14 23:20:37 首次发布

本文链接：https://blog.csdn.net/qq_45870740/article/details/123491373

版权

前端demo 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

思路

重点把握currentTime的使用

使用的本地视频，哥们可以自定义视频网址

源代码

<!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>
</head>
<body>
    <button type="button" onclick="play()">播放</button>
    <button type="button" onclick="pause()">暂停</button>
    <button type="button" onclick="load()">切换视频</button>
    <button type="button" onclick="open_voice()">打开声音</button>
    <button type="button" onclick="close_voice()">关闭声音</button>

    <div>
        <video controls src="./source/ido.mp4" id="player"></video>
    </div>

    <script>
        const video = document.getElementById('player')
        let index = 0
        let videoList = [
            {
                name:'I Do',
                src:'./source/ido.mp4',
                beforeTime:10
            },
            {
                name:'love you',
                src:'./source/v2.mp4',
                beforeTime:10
            }
        ]
        // localStorage.setItem('videoList',JSON.stringify(videoList))
        
        let flag = false
        function play(){
            if(flag) return
            flag = true
            videoList = JSON.parse(localStorage.getItem('videoList'));
            // console.log(videoList)
            let item = videoList[index]
            let time = item.beforeTime
            video.src = item.src
            video.play()
            video.currentTime = time
        }
        function pause(){
            if(!flag) return 
            flag = false
            video.pause()
            let time = video.currentTime
            console.log(time)
            videoList[index].beforeTime = time
            localStorage.setItem('videoList',JSON.stringify(videoList))
        }
        function load(){
           index++;
           if(index>1) index=0 
           video.src = JSON.parse(localStorage.getItem('videoList'))[index].src

        }
        function close_voice(){
            video.muted = true
        }
        function open_voice(){
            video.muted = false
        }
    </script>
</body>
</html>