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()}

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

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

onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)
onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案) 参考文章: (1)onchange监听inpu ...
unity中监听文件夹并且创建文件夹后做资源更新
unity中监听文件夹并且创建文件夹后做资源更新有时候我们在设计的时候,可能对项目的文件内容进行监听,也可能需要在监听某个文件夹的操作,并且做出相对应的处理,例如项目资源的大小监听等,以下就提供两种 ...
potplay显示服务器关闭,PotPlayer怎么关掉左上角显示的播放时间？PotPlayer关掉左上角显示播放时间的操作步骤...
PotPlayer是一款PC端播放软件,如果我们在使用PotPlayer时想要关闭左上角的播放时间应该怎么办呢?下面小编就为大家介绍PotPlayer是如何关闭左上角的播放时间. 方法/步骤 1.首先 ...
onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法
1. onchange事件监听input值变化的使用方法: <input id="test"></input>$("input").ch ...
onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)...
转自:https://www.cnblogs.com/white0710/p/7338456.html 1. onchange事件监听input值变化的使用方法: <input id=" ...
计算机休眠状态播放音乐,win7系统休眠后不能播放音乐怎么解决
近日有win7系统用户到本站咨询这样一个问题,就是电脑进入休眠后,发现不能播放音乐了,遇到这样的问题该怎么办呢,为此,小编就给大家讲解一下win7系统休眠后不能播放音乐的详细操作步骤. 1.直接在桌面 ...
嵌入式linux播放视频 mplayer,mplayer 移植后无法播放视频
请登录后使用快捷导航没有帐号?注册阅 2800|回 5 最后登录2016-9-8 在线时间1 小时威望0分芯积分E金币好友发表于2010-1-15 11:31 mplayer 移植后无法 ...
u盘自动运行bat_如何让u盘插入电脑后自动播放 u盘插入电脑后自动播放方法
相信大家都知道U盘有一个自动播放的功能,一插入电脑它就自动运行某个程序,本来这个功能是为了大家能更方便的使用U盘,但是由于这个功能经常被病毒利用,所以现在很多杀毒软件检查到AUTORUN.INF文件就 ...
Linux监听请求到达时间,4： zabbix5.0自动发现网站域名并监控访问状态和请求时间...
监控域名脚本 [[email protected] shell]# cat erp_url.sh #!/bin/bash # function:monitor tcp connect status f ...

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

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

最新文章

热门文章