1.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>自制视频播放器</title>
<style>
*{margin: 0; padding: 0}
#div1{ 300px; height: 20px; background: #666; overflow: hidden;position: relative;top:10px}
#div2{ 30px; height: 20px;background: red; position: absolute; left: 0; top: 0;}
#div3{ 300px; height: 10px; background: #666; overflow: hidden;position: relative;top:20px}
#div4{ 30px; height: 10px;background: green; position: absolute; left: 90px; top: 0;}
</style>
</head>
<body>
<video id="v1">
<source src="a.mp4"/>
</video><br>
<input type="button" value="播放"/>
<input type="button" value="00:00:00"/>
<input type="button" value="00:00:00"/>
<input type="button" value="静音"/>
<input type="button" value="全屏"/>
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3">
<div id="div4"></div>
</div>
<script>
window.onload = function(){
var oVideo = document.getElementById('v1');
var aInput = document.getElementsByTagName('input');
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');//进度滑块
var oDiv3 = document.getElementById('div3');
var oDiv4 = document.getElementById('div4');//音量滑块
var timer = null;
//功能1.播放暂停
aInput[0].onclick = function(){
if(oVideo.paused){
oVideo.play();
this.value = '暂停';
nowTime();
timer = setInterval(nowTime, 1000);
}else if(oVideo.played){
oVideo.pause();
this.value = '播放';
clearInterval(timer);
}
}
//功能2.获取视频总时间,默认是秒
aInput[2].value = changeTime(oVideo.duration);
oVideo.ondurationchange = function(){
aInput[2].value = changeTime(oVideo.duration);
}
//功能3 静音
aInput[3].onclick = function(){
if(oVideo.muted ){ //如果是静音状态,点击按钮变成不静音! 音量在0-1之间, 0静音,1最大
oVideo.volume = 0.3;
this.value = '静音';
oVideo.muted = false;
}else { //如果当前非静音状态,点击按钮变成静音,音量变成0
oVideo.volume = 0;
this.value = '取消静音';
oVideo.muted = true;
}
};
//功能4 全屏 方法1.视频的宽高==可视区的宽高! 方法2: 自带的全屏的方法 mozRequestFullScreen()
aInput[4].onclick = function(){
//oVideo.mozRequestFullScreen();
var w = document.body.clientWidth || document.documentElement.clientWidth;
var h = document.body.clientHeight || document.documentElement.clientHeight;
oVideo.width = w;
oVideo.height = h;
};
//功能5 播放时间进度条
oDiv2.onmousedown = function(ev){
var ev = ev || window.event;
disX = ev.clientX - oDiv2.offsetLeft;//鼠标坐标到控件的左边的距离
document.onmousemove = function(ev){
var ev = ev || window.event;
var L = ev.clientX - disX;//控件到html的左边的距离
if(L < 0){
L = 0;
}else if( L > oDiv1.offsetWidth - oDiv2.offsetWidth){
L = oDiv1.offsetWidth - oDiv2.offsetWidth;
}
oDiv2.style.left = L + 'px';
var scale = L / (oDiv1.offsetWidth - oDiv2.offsetWidth);
oVideo.currentTime = scale * oVideo.duration;
nowTime();
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
return false;
};
//功能6 音量进度条控制
oDiv4.onmousedown = function(ev){
var ev = ev || window.event;
disX = ev.clientX - oDiv4.offsetLeft;//鼠标坐标到控件的左边的距离
document.onmousemove = function(ev){
var ev = ev || window.event;
var L = ev.clientX - disX;//控件到html的左边的距离
if(L < 0){
L = 0;
}else if( L > oDiv3.offsetWidth - oDiv4.offsetWidth){
L = oDiv3.offsetWidth - oDiv4.offsetWidth;
}
oDiv4.style.left = L + 'px';
var scale = L / (oDiv3.offsetWidth - oDiv4.offsetWidth);
oVideo.volume = scale;
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
//当视频播放的时候,显示当前的播放的时间,每隔一秒更新下,当暂停的时候清除定时器
function nowTime(){
aInput[1].value = changeTime(oVideo.currentTime);
var scale = oVideo.currentTime / oVideo.duration;
oDiv2.style.left = scale * 270 +'px'; //视频播放时进度条要向前跑 270 = oDiv1.style.width - oDiv2.style.width
}
//获取视频总时长 00:00:00
function changeTime(iNum){
iNum = parseInt(iNum);
var iH = toZero(Math.floor(iNum / 3600)); //时
var iM = toZero(Math.floor(iNum % 3600 / 60)); //分
var iS = toZero(Math.floor(iNum % 60)); //秒
return iH + ":" + iM + ":" + iS;
}
function toZero(num){
return num <= 9 ? '0'+ num : ''+ num ;
}
};
</script>
</body>
</html>