用HTML5自制视频控件

这两天学习了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;

    //Play的点击事件：播放时，点击暂停，暂停时，点击播放
    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);
        }
    };

    //Mute的点击事件，有声音时，点击变为静音，静音时，点击变有声音
    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;
        }
    };

    //FullScreen的点击事件：两个if是兼容火狐和Chrome版本的，效果是点击时变为全屏
    aInput[3].onclick = function(){
        var userAgent = navigator.userAgent;
        if (userAgent.indexOf("Firefox") > -1) {
            oV.mozRequestFullScreen();
        }
        if (userAgent.indexOf("Chrome") > -1){
            oV.webkitRequestFullScreen();
        }
    };

    //鼠标事件：点击的瞬间改变input的位置，鼠标抬起时回到原位，实现抖动原理
    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]);
    }

    //显示总时长，写了之后觉得没错，但是显示出来就是NaN，所以就注释起来,但是今天看的时候，发现一个问题，在网上打开是好的，本地打开就有问题了
    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;
    };

    //时间显示加0操作
    function addZero(x) {
        x < 10 ? x = '0' + x :x;
        return x;
    }

    //函数changeTime:计算时分秒
    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;
    }

    //根据播放时间改变oDiv的位置
    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';
    }
};

视频中的截图

显示出来的样式就是这样，然后除了音量部分，其他就跟一般视频底下的控件没什么区别了

这里写图片描述

用HTML5自制视频控件

这两天学习了HTML5的视频音频，今天刚好完成了自制的视频控件。但是其中有一个小bug，音量只有最大和静音，，，，不过可以凑合看的，然后我今天晚上再试试写音量那块。。。

HTML部分

CSS部分

JS部分

视频中的截图

显示出来的样式就是这样，然后除了音量部分，其他就跟一般视频底下的控件没什么区别了

猜你喜欢