video监听上次播放时间点下次进入后继续播放

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

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

//视频播放容器
<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()
            }

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值