使用HTML5自制视频控件

前言

随着网络时代的到来，人们的生活也是相当便利，例如：当我们点击一个视频时，视频就会开始播放。在这个例子中，有没有大胆想过我们常用的播放，暂停，音量控制，进度条等等，这些功能我们自己来实现呢？如果你有这个想法，那么我的这篇文章就可以帮您实现。

静态样式实现

标签部分：

    <div id="father">
        <video src="birds.mp4" volume="0.5" currentTime></video>
        <div class="jdt">
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div3">00:00/00:00</div>
            <div id="ran">
                <div></div>
                <i></i>
            </div>
            <div class="div4"></div>
            <div class="sy">
                <i></i>
            </div>
            <div class="div5"></div>
        </div>
    </div>

样式部分：

#father {
            position: relative;
            width: 885px;
            height: 480px;
            transition: all 3s linear;
        }

        .div1 {
            position: absolute;
            width: 40px;
            height: 40px;
            background-image: url("播放_wps图片.png");
            background-position: center;
            background-size: 40px 40px;
            top: 8px;
            left: 30px;
        }

        .div2 {
            position: absolute;
            width: 450px;
            height: 250px;
            /* background-image: url("gg.jpeg"); */
            background-position: center;
            background-size: 450px 250px;
            top: -345px;
            left: 225px;

        }

        .div3 {
            position: absolute;
            width: 100px;
            height: 30px;
            left: 95px;
            top: 20px;
            font-size: 16px;
        }

        .div4 {
            position: absolute;
            width: 30px;
            height: 30px;
            background-image: url("声音.png");
            background-position: center;
            background-size: 30px 30px;
            top: 10px;
            right: 290px;
        }

        .sy {
            position: absolute;
            width: 100px;
            height: 2px;
            top: 25px;
            left: 563px;
            background-color: cornflowerblue;
        }

        .sy>i {
            position: absolute;
            width: 10px;
            height: 10px;
            left: 0px;
            top: -4px;
            background-color: snow;
            border-radius: 10px;
        }


        .div5 {
            position: absolute;
            width: 50px;
            height: 50px;
            background-image: url("放大.png");
            background-position: center;
            background-size: 50px 50px;
            top: 2px;
            right: 30px;
        }

        #ran {
            position: absolute;
            width: 856px;
            height: 2px;
            top: 0px;
            left: 0px;
            background-color: cornflowerblue;
        }

        #ran>i {
            position: absolute;
            width: 10px;
            height: 10px;
            left: 0px;
            top: -4px;
            background-color: snow;
            border-radius: 10px;
        }
        .jdt {
            position: absolute;
            width: 855px;
            height: 50px;
            left: 0px;
            top: 430px;
            background-color: rgba(0, 0, 0, 0.5);
            display: none
        }

        video {
            position: absolute;
            width: 855px;
            height: 480px;
        }

实现之后的页面是这样的：

完成这些之后，我们就得加强真实度：
1.当鼠标触碰进度条的时候进度条放大，进度条计时点放大

2.当鼠标接触声音控件的时候，音量计时点放大

实现代码为：

        .sy:hover i {
            height: 15px;
            width: 15px;
            top: -7px;
        }
                #ran:hover {
            height: 5px;
            top: -2px;
        }

        #ran:hover>div {
            height: 5px;
        }

        #ran:hover>i {
            height: 15px;
            width: 15px;
        }
        #father:hover .jdt {
            display: block;
        }

js的dom元素获取

        var playvid;
        var bf = document.getElementsByClassName("div1")[0];
        var gg = document.getElementsByClassName("div2")[0];
        var tim = document.getElementsByClassName("div3")[0];
        var sybt = document.getElementsByClassName("div4")[0];
        var vid = document.getElementsByTagName("video")[0];
        var jd = document.getElementById("ran");
        var sy = document.getElementsByClassName("sy")[0];
        var num = 60;

播放、暂停功能

第一次点击时播放，播放控件图标变为暂停，第二次点击时暂停，播放控件图标变为播放

        bf.addEventListener("click", function () {
            if (playvid == true) {
                vid.play();
                playvid = false;
                bf.style.backgroundImage = "url(暂停.png)"
            } else {
                vid.pause();
                bf.style.backgroundImage = " url(播放_wps图片.png)"
                playvid = true;
            }
        })

暂停时弹出广告

        vid.onplay = function () {
            gg.style.display = "none";
        }
        vid.onpause = function () {
            gg.style.display = "block";
        }

进度条功能

 var timer = setInterval(function () {
                // 获取视频的总时长 播放的时间
                var total = vid.duration;
                var nowTime = vid.currentTime;
                // 获取进度条总宽度  20/60 * 总宽度
                // 当前播放节点  20
                // 总时长  60
                var owidth = nowTime / total * jd.clientWidth;

                // 改变进度条的位置
                jd.children[0].style.width = owidth + 'px';
                jd.children[1].style.left = owidth + 'px';
            }, 30);

计时功能实现

                // 将时间设置到页面
                if (parseInt(nowTime % 60) < 10) {
                    tim.innerHTML = parseInt(nowTime / 60) + ":" + "0" + parseInt(nowTime % 60) + "/" + "0" + parseInt(total / 60) + ":" + parseInt(total % 60) + "0"
                } else if (parseInt(nowTime % 60) >= 10 && parseInt(nowTime % 60) <= 60) {
                    tim.innerHTML = parseInt(nowTime / 60) + ":" + parseInt(nowTime % 60) + "/" + "0" + parseInt(total / 60) + ":" + parseInt(total % 60) + "0"
                }

声音控件

        sy.children[0].style.left = num + "px"
        vid.volume = num / sy.clientWidth;
          sy.onclick = function (e) {
            if (e.offsetX >= 0) {
                sy.children[0].style.left = e.offsetX + 'px';
                vid.volume = e.offsetX / sy.clientWidth;
                console.log(e.offsetX / sy.clientWidth)
                if(e.offsetX / sy.clientWidth==0||e.offsetX / sy.clientWidth==0.01) {
                    sybt.style.backgroundImage="url(禁音.png)"
                }else{
                    sybt.style.backgroundImage="url(声音.png)"
                }
            }

总结

本文主要根据本人测试视频编写，不同浏览器打开不同视频的显示效果不同，本文主要提供学习使用。