自制一个视频播放控件

学习了html5新标签后自己尝试写了一个视频控件，虽然不是很好看，但基本功能都实现了。

css：

<style type="text/css">
body{
margin:0;
padding:0;
}
#all{
position: relative;
}
#v1{
position: relative;
}
#play{
position: absolute;
top:120px;
left:130px;
overflow: hidden;
display: none;
}
#play img{
float: left;
cursor: pointer;
}
#play div{
margin-left:35px;
font-size:20px;
color:#fff;
display: none;
}
#play img:nth-of-type(2){
margin:20px;
transition:all linear 2s;
opacity:1;
}
#play img:nth-of-type(1){
margin-top:35px;
transition:all linear 2s;
opacity:1;
}
#play img:nth-of-type(3){
margin-top:35px;
transition:all linear 2s;
opacity:1;
}
#time{
position: absolute;
top:298px;
background-color: rgba(102,102,102,0.8);
width:400px;
}
#time input:nth-of-type(2){
float: right;
}
#voice{
position: absolute;
left:400px;
width:20px;
background-color: rgba(102,102,102,0.8);
height:320px;
top:0;
}
#voice img{
cursor: pointer;
}
#voice div{
width:8px;
height:200px;
background-color: rgba(0,0,0,0.8);
border-radius: 4px;
margin-top:60px;
margin-left:6px;
}
#voice p{
width:16px;
height:16px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top:44px;
left:2px;
cursor: pointer;
}
#screen{
position: absolute;
top:20px;
left:20px;
cursor: pointer;
display: none;
}
</style>

html：

<div id="all">
<video id="v1">
<!-- 为了兼容用了两个格式 -->
<source src="Intermission-Walk-in.ogv">
<source src="Intermission-Walk-in_512kb.mp4">
</video>
<br>
<div id="play">
<div></div>
<img src="img/left.png" width="30" height="23">
<img src="img/play.png" width="37" height="53">
<img src="img/right.png" width="30" height="24">
</div>
<div id="time">
<input id="alltime" type="button" value="00:00:00">
<input id="nowtime" type="button" value="00:00:00">
</div>
<div id="voice">
<div><p></p></div>
<img src="img/voice1.png" width="21" height="21">
</div>
<div id="screen">
<img src="img/allscreen.png" width="42" height="35">
</div>
</div>

js：

都是用原生写的，所以整个获取元素的过程比较繁琐哈哈哈不过我命名尽量语义化啦~<script>
var aAll = document.getElementById("all");
var oVideo = document.getElementById("v1");
var oPlay = document.getElementById("play");
var aPimg = oPlay.getElementsByTagName("img");
var ochangeTime = oPlay.getElementsByTagName("div")[0];
var oTime = document.getElementById("time");
var aTinput = oTime.getElementsByTagName("input");
var oVoice = document.getElementById("voice");
var aVimg = oVoice.getElementsByTagName("img");
var oVdiv = oVoice.getElementsByTagName("div")[0];
var oVcircle = oVdiv.getElementsByTagName("p")[0];
var oScreen = document.getElementById("screen");
var oScreenImg = oScreen.getElementsByTagName("img")[0];
var timer = null;
var disVoice = 0;
var setTimer = null;
//播放
aPimg[1].onclick = function(){
if(oVideo.paused){ //如果点击时是暂停状态就播放且切换图片，每秒调用修改时间的函数
oVideo.play(); //播放
aPimg[1].src= "img/middle.png";
nowTime();
timer = setInterval(nowTime,1000);
}else{ //如果是播放状态
aPimg[1].src= "img/play.png";
oVideo.pause();
clearInterval(timer);
}
};
//显示当前时间
function nowTime(){
aTinput[0].value = changeTime(oVideo.duration);//显示总时间
aTinput[1].value = changeTime(oVideo.currentTime);
return oVideo.currentTime;
}
aPimg[0].onclick = function() {
var beforeTime = nowTime();
if (beforeTime - 10) { //视频后退时间是要判断是否已经到头
oVideo.currentTime = beforeTime-10;
ochangeTime.innerHTML = "-10s";
ochangeTime.style.display = "block";
setTimeout(function () {
ochangeTime.style.display = "none";
}, 500)
}
};
aPimg[2].onclick = function(){
var beforeTime = nowTime();
if(beforeTime+10<oVideo.duration){ //视频前进时判断是否到头
oVideo.currentTime =beforeTime+10;
ochangeTime.innerHTML = "+10s";
ochangeTime.style.display = "block";
setTimeout(function(){
ochangeTime.style.display = "none";
},500)
}
};
function changeTime(itime){
var newitime = parseInt(itime);
var iH = addZero(Math.floor(newitime/3600));
var iM = addZero(Math.floor(newitime/60));
var iS = addZero(Math.floor(newitime%60));
return iH+":"+iM+":"+iS;
}
function addZero(num){ //给个位数时间前加0
var newnum = num.toString();
return newnum[1] ? newnum : "0"+newnum;
}
//全屏
oScreenImg.onclick = function(){
var userAgent = navigator.userAgent;
if(userAgent.indexOf("Firefox")>-1){
oVideo.mozRequsetFullScreen();
}
if(userAgent.indexOf("Chrome")>-1){
oVideo.webkitRequestFullScreen();
}
};
//声音
aVimg[0].onclick = function(){
if(oVideo.muted){ //这里是直接静音或播放的按钮
this.src = "img/voice1.png";
oVideo.muted = false;
}else{
this.src = "img/voiceno.png";
oVideo.muted = true;
}
};
oVdiv.onmousedown = function(ev){
var ev = ev || window.event;
disVoice = ev.clientY - oVcircle.offsetTop; //记录最初位置
document.onmousemove = function(ev){
var ev = ev || window.event;
var T = ev.clientY - disVoice - oVdiv.offsetTop; //要减去圆圈距离上面的位置
if(T<0){
T = 0; //不能往下拖
}else if(T>oVdiv.offsetHeight-oVcircle.offsetHeight){
T = oVdiv.offsetHeight-oVcircle.offsetHeight;
}
oVcircle.style.top = T +44+"px"; //这里的44是因为我的声音的总长度距离上还有44px的距离
var scale = T/(oVdiv.offsetHeight-oVcircle.offsetHeight); //根据圈圈和总线条的比值去设置声音该有的倍数
oVideo.volume = 1-scale;
};
document.onmouseup = function(){
document.onmousemove = document.onmouseop = null; //鼠标抬起后清掉事件
};
return false; //阻止浏览器默认行为
};

//总显示，想要做出鼠标移入视频就将播放等按钮显示，溢出延时消失的效果
oVideo.onmousemove = function(ev){
ev = ev || event;
oPlay.style.display = "block";
oScreen.style.display = "block";
clearTimeout(setTimer);
ev.cancelBubble = true;
};
oVideo.onmouseout = function(){

setTimer = setTimeout(function(e){
//window.event? window.e.cancelBubble = true : e.stopPropagation();
oPlay.style.display = "none";
oScreen.style.display = "none";

},1000);

};

</script>
4000
大概效果：