最近被人问到如何打开视频播放接着上一次播放的时间点继续播放。由于之前只是采用最基本的视频播放或者利用第三方插件进行播放视频,根本没有考虑这么多;脑子里只有一个大概的想法但是不知道是否能实现所以就没有回答;

后续抽空百度了下才发现自己当时的思路是正确的;下面直接上代码吧!

//视频播放容器
<video id="videoPlayer" width="100%" height="100%" loop controls :src="shareVideoLink"></video>

//监听视频播放时间的方法
getVideoTime () {
            if (document.getElementById ('videoPlayer')) {
                let videoPlayer = document.getElementById ('videoPlayer');
                // 监听当前播放时间点
                videoPlayer.addEventListener('timeupdate', function () {
                        console.log(`当前的时间点是${videoPlayer.currentTime},视频长度是${videoPlayer.duration}`);
                }, false)
                // 监听当前是否暂停
                videoPlayer.addEventListener('pause', function () {//暂停开始执行的函数
                  console.log(`当前的暂停点是${videoPlayer.currentTime}`)
                  localStorage.setItem("temp",`${videoPlayer.currentTime}`); 
                });
            }
        },
 //二次播放方法
 playBySeconds (num) {
            if (num && document.getElementById ('videoPlayer')) {
                let myVideo = document.getElementById ('videoPlayer');
                myVideo.play ();
                myVideo.currentTime = num;
            }
  },

//mounted里调用方法
			var num = localStorage.getItem("temp");
            if(num!=null){
                this.playBySeconds(num)
            }else{
            	this.getVideoTime()
            }

上边的方法就可以实现视频播放的二次继续播放;大致思路就是点击暂停的时候去记录当前播放到的时间点,然后存储到缓存中去,等用户下次进入后先去拿缓存。如果有缓存就直接将缓存拿到的时间赋给当前视频播放时间;

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐