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

思路

重点把握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 = 0let 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 = falsefunction play(){if(flag) returnflag = truevideoList = JSON.parse(localStorage.getItem('videoList'));// console.log(videoList)let item = videoList[index]let time = item.beforeTimevideo.src = item.srcvideo.play()video.currentTime = time}function pause(){if(!flag) return flag = falsevideo.pause()let time = video.currentTimeconsole.log(time)videoList[index].beforeTime = timelocalStorage.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>

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

支持8K播放，低延时高并发流媒体音视频播放器EasyPlayer.js是如何实现播放8K视频的
需求分析一般对于一个播放器,应该支持如下几种显示模式: 等比例,最大化区域显示,不裁剪等比例,最大区域显示,裁剪拉伸显示,铺满全屏要实现这几种显示模式.其实只要对播放控件的布局进行些许调整即可 ...
flv.js直播点播，播放flv视频时快进、重连、卡死、延迟等问题
flv视频流延迟在普通的网络环境下,flv.js播放http-flv的视频流延迟大概在3~5秒左右,对于实时性要求比较高的场景,显然是不适用的,那么怎么才能降低延迟呢? 通过对buffered(缓冲 ...
Hls.js播放m3u8视频 DPlayer视频播放器（easypan） MSE简介
文章目录学习链接 hls.js播放m3u8视频效果代码前端代码安装hls.js App.vue 后台代码准备文件 mp4文件切片java实现 TsController TsService ...
Web端直接播放 .ts 视频及mux.js播放ts视频没有声音
最近项目中需要前端播放 .ts 格式视频,捣鼓了几天学习到很多知识,也发掘了一种优秀的解决方案,分享给有同样需求的同学. 常见方案在网上查找的大部分解决方案都是用诸如videojs等网页播放器,接收 ...
video.js播放m3u8视频
m3u8 是一种基于HTTP Live Streaming(HLS)文件视频格式,它主要是存放整个视频的基本信息和分片(Segment)组成.目前由 Apple.inc 率先提出的 HLS 协议在 ...
video.js兼容微信浏览器，（播放.m3u8视频源）解决微信浏览器黑屏问题
video.js兼容微信浏览器,(播放.m3u8视频源)解决微信浏览器黑屏问题一.问题描述: 在h5做根据视频源直播功能时,在浏览器能打开视频,但是在部分安卓机和苹果机在微信浏览器打开会出现黑屏的状 ...
m3u8.php怎么调用,怎样使用Vue结合Video.js播放m3u8视频
这次给大家带来怎样使用Vue结合Video.js播放m3u8视频,使用Vue结合Video.js播放m3u8视频的注意事项有哪些,下面就是实战案例,一起来看一下. 首先,我们需要在vue工程中安装vi ...
videojs动态封面_video.js如何动态的播放视频？
在一个页面中很多的视频链接需要点击播放按钮播放当前视频, 点击图片的播放按钮: 会出弹出播放当前视频.但是点击关闭当前视频.通过动态的设置视频地址,点击播放还是第一次的视频. $("#ho ...
js倒计时结束后播放音乐html5,倒计时到HTML5视频结束(Countdown to the end of the HTML5 video)...
倒计时到HTML5视频结束(Countdown to the end of the HTML5 video) 我可以倒数到HTML5视频的结尾吗? Video ends after XX second ...
vue中使用h5 video标签实现弹窗播放本地视频
参考h5 < video >标签的用法在开发过程中主要涉及到以下几个需要关注的点 1.弹窗的打开关闭父组件中使用.sync绑定visible属性,可直接在子组件中关闭弹窗更新父组件传入 ...

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

思路

源代码

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

最新文章

热门文章