}
else{
VideoNode.requestFullscreen();
}
};
//解决最开始时间的NAN的问题
VideoNode.addEventListener('canplay',function(){
var needTime = parseInt(VideoNode.duration);
var s = needTime%60;
var m = parseInt(needTime / 60);
var timeNum = toDou(m)+':'+toDou(s);
allNode.innerHTML = timeNum;
},false);
//解决 时间不足10 的问题
function toDou(time){
return time<10?'0'+time:time;
}
//当视频播放的时候 需要当前的时间动起来
VideoNode.addEventListener('timeupdate',function(){
//目前的 百分比进度
LineNode.style.width = VideoNode.currentTime/VideoNode.duration*100+'%';
CrlNode.style.left = LineNode.offsetWidth - 8.5 + 'px'
var needTime = parseInt(VideoNode.currentTime);
var s = needTime%60;
var m = parseInt(needTime / 60);
var timeNum = toDou(m)+':'+toDou(s);
nowNode.innerHTML = timeNum;
},false);
//声音的拖拽按钮
VDragNode.onmousedown = function(e){
var ev = e || event;
var l = ev.clientX - this.offsetLeft;
document.onmousemove = function(e){
var ev = e || event;
var needX = ev.clientX - l;
var maxX = VDragNode.parentNode.offsetWidth - 2.5;
needX = needX < -2.5 ? - 2.5 : needX;
needX = needX > maxX ? maxX : needX;
//计算0 - 1
var lastVolume = (VDragNode.offsetLeft + 2) / VDragNode.parentNode.offsetWidth ;
VideoNode.volume = lastVolume < 0 ? 0 : lastVolume;
VDragNode.style.left = needX + 'px';
};
document.onmouseup = function(e){
document.onmousemove = document.onmouseup = null;
}
return false;
}
//拖拽进度条按钮
CrlNode.onmousedown = function(e){
var ev = e || event;
var l = ev.clientX - this.offsetLeft;
VideoNode.pause();
document.onmousemove = function(e){
var ev = e || event;
var needX = ev.clientX - l;
var maxX = LoadNode.offsetWidth - 8.5;
needX = needX < -8.5 ? -8.5 : needX;
needX = needX > maxX ? maxX : needX;
CrlNode.style.left = needX + 'px';
LineNode.style.width = (CrlNode.offsetLeft+9)/LoadNode.offsetWidth*100 + '%';
};
document.onmouseup = function(){
document.onmousemove = document.onmouseup = null;
VideoNode.currentTime = VideoNode.duration * (CrlNode.offsetLeft+9)/LoadNode.offsetWidth;
if(PlayBln == false){
//console.log(1);
PlayNode.className = 'pauseNode';
VideoNode.play();
}
else{
//console.log(2);
PlayNode.className = 'playNode';
VideoNode.pause();
}
};
return false;
};
</script>
</body>
</html>
总结
以上所述是小编给大家介绍的HTML5自定义视频播放器源码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
