Skip to content

H5视频播放器 模仿PotPlayer 带缓冲、过渡动画

Notifications You must be signed in to change notification settings

yiguanxian/PotPlayerVideo

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 

Repository files navigation

video.oncontextmenu = function(e){ e.preventDefault() } 阻止在视频上右键单击鼠标可以选择浏览器自带的控件

setInterval(function(){ canPlay.style.width = video.buffered.end(0) / video.duration * 100 + "%" },50) video.buffered.end(0)就是缓冲的结尾部分,返回值单位是s,类型为number。video.duration就是该视频的总长度。缓冲的部分 / 总长度 可以得到缓冲部分相对于时间轴的宽度。

video.addEventListener('waiting',function(){} 监听当缓冲不足以播放视频时,我们可以在这个方法下进行设置,例如过场动画。

video.addEventListener('playing',function(){} 监听缓冲足够播放视频时,我们可以在这个方法下设置,譬如取消过场动画。

function getVideoTime(time){ var arr = [] var hours = parseInt(time / 60 / 60) hours = hours < 10 ? '0' + hours : hours var miniutes = parseInt(time / 60 % 60) miniutes = miniutes < 10 ? '0' + miniutes : miniutes var seconds = parseInt(time % 60) seconds = seconds < 10 ? '0' + seconds : seconds arr.push(hours,miniutes,seconds) return arr } 封装的时间格式化方法。video.duration以及video.currentTime返回值都是带小数点的数字,我们需要将这些数字转换为时:分:秒的形式。这里返回值是一个数组。

示例:https://zhouwuchao.github.io/

About

H5视频播放器 模仿PotPlayer 带缓冲、过渡动画

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 89.9%
  • HTML 10.1%