这两天学习了HTML5的视频音频,今天刚好完成了自制的视频控件。但是其中有一个小bug,音量只有最大和静音,,,,不过可以凑合看的,然后我今天晚上再试试写音量那块。。。
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" rel="stylesheet" href="自制播放器.css">
<script src="自制播放器.js"></script>
</head>
<body>
<div id="all">
<video id="vid">
<source src="[老友记][第七季]第24集_hd.mp4" />
</video>
<div id="box">
<div id="div1">
<div id="div3"></div>
<div id="div2"></div>
</div>
<form>
<input type="button" value="Play" class="play">
<input type="button" value="Mute" class="mute">
<input type="range" class="ran">
<span class="span1">00:00:00</span>
<input type="button" value="Fullscreen" class="full">
<span class="span2"></span>
</form>
</div>
</div>
</body>
</html>
CSS部分
body{
background-color: #160d00;
}
*{
padding:0;
margin:0;
}
#all{
margin:0 auto;
width: 886px;
height:789px;
position: relative;
}
#vid{
width: 886px;
height:789px;
}
#box{
width: 886px;
background: url("img/背景.png") repeat left bottom;
position: absolute;
bottom: 70px;
}
#div1{
background-color: #8e9daf;
height:27px;
position: relative;
overflow: hidden;
}
#div2{
width: 27px;
height:27px;
background-color: #cccccc;
border-radius: 50%;
position: absolute;
left:0;
}
#div3{
width: 13px;
height:27px;
background-color: #1e3f69;
position: absolute;
left:0;
}
form{
padding: 2px;
}
form input{
font-size: 15px;
padding:10px 13px 10px 35px;
text-shadow: 2px 2px 2px black;
color: #ffffff;
border:none;
border-bottom: #1e3f69 1px solid;
}
.ran{
width:120px;
padding:0;
color: #636f7c;
margin-right: 10px;
}
.play{
background:#454545 url("img/暂停.png") no-repeat center left 14px;
}
.mute{
background:#454545 url("img/音量.png") no-repeat center left 14px;
}
.full{
background:#454545 url("img/全屏.png") no-repeat center left 14px;
float: right;
}
.span1,.span2{
display: inline-block;
color: #FFFFFF;
font-weight: bold;
}
.span2{
float: right;
}
input:hover{
background-color: #1e3f69 ;
border-bottom: red solid 1px;
}
input:focus { outline: none; }
JS部分
window.onload = function () {
var oV = document.querySelector("#vid");
var aInput = document.querySelectorAll("input");
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
var oDiv3 = document.getElementById("div3");
var aSpan = document.querySelectorAll("span");
var timer = null;
aInput[2].value = 100;
aInput[0].onclick = function () {
if( oV.paused ){
oV.play();
this.value = 'Pause';
this.style.background = "#1e3f69 url('img/播放.png') no-repeat center left 14px";
nowTime();
timer = setInterval(nowTime,1000);
}
else{
oV.pause();
this.value = 'Play';
this.style.background = "#454545 url('img/暂停.png') no-repeat center left 14px";
clearInterval(timer);
}
};
aInput[1].onclick = function(){
if( oV.muted ){
this.value = 'Mute';
this.style.background = "#454545 url('img/音量.png') no-repeat center left 14px";
aInput[2].value = 100;
oV.muted = false;
}
else{
this.value = 'Unmute';
this.style.background = "#1e3f69 url('img/静音.png') no-repeat center left 14px";
aInput[2].value = 0;
oV.muted = true;
}
};
aInput[3].onclick = function(){
var userAgent = navigator.userAgent;
if (userAgent.indexOf("Firefox") > -1) {
oV.mozRequestFullScreen();
}
if (userAgent.indexOf("Chrome") > -1){
oV.webkitRequestFullScreen();
}
};
function clickMoment(obj){
obj.onmousedown = function () {
this.style.transform = "translate(-2px)";
};
obj.onmouseup = function () {
this.style.transform = "none";
}
}
for(var i=0;i<aInput.length;i++){
clickMoment(aInput[i]);
}
aSpan[1].innerHTML = changeTime(oV.duration);
oDiv2.onmousedown = function (ev) {
ev = ev || event;
disX = ev.clientX - oDiv2.offsetLeft;
document.onmousemove = function (ev) {
ev = ev || event;
var newDis = ev.clientX - disX;
if(newDis<0){
newDis = 0;
}
else if(newDis > oDiv1.offsetWidth - oDiv2.offsetWidth){
newDis = oDiv1.offsetWidth - oDiv2.offsetWidth;
}
oDiv2.style.left = newDis + "px";
oDiv3.style.width = newDis + 13 + "px";
oV.play();
aInput[0].value = 'Pause';
aInput[0].style.background = "#1e3f69 url('img/播放.png') no-repeat center left 14px";
var scale = newDis/(oDiv1.offsetWidth - oDiv2.offsetWidth);
oV.currentTime = scale * oV.duration;
aSpan[0].innerHTML = changeTime(oV.currentTime);
};
document.onmouseup = function () {
document.onmousemove = document.onmouseup = null;
};
return false;
};
function addZero(x) {
x < 10 ? x = '0' + x :x;
return x;
}
function changeTime(obj) {
var oH = addZero(parseInt(obj/3600));
var oM = addZero(parseInt(obj/60));
var oS = addZero(parseInt(obj%60));
return oH + ":" + oM + ":" + oS;
}
function nowTime() {
aSpan[0].innerHTML = changeTime(oV.currentTime);
var scale = oV.currentTime/oV.duration;
oDiv2.style.left = scale * 886 + 'px';
oDiv3.style.width = scale * 886 + 13 + 'px';
}
};
视频中的截图
显示出来的样式就是这样,然后除了音量部分,其他就跟一般视频底下的控件没什么区别了