播放器自定义控制条

这是我目前做的，但并不完善，后期有时间还会修改过，但大致上已经可以了。

我写进度条样式的方法不是很好，我觉得把进度条最后的原点额外用一个div来控制比较好。我这里写的是用 :before 来控制的。

效果图：

引入的文件

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/video-play.css">//自己写的
<script src="../jQuery版本/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/videoPlay.js"></script>//自己写的

主代码结构

<div id="player" class="player">
    <div id="videoBox" class="video-box text-center">
        <video id="film" width="100%" ondblclick="fullScreen()">
            <source src="video/遇见你之前Me.Before.You.2016.hd720p.x264.AAC.英语中文字幕.mp4" type="video/mp4"/>
        </video>
        
 		<!--屏幕中显示的这暂停/播放图标-->
        <img id="playImg" class="none" src="img/play.svg" alt="">
        <img id="pauseImg" class="none" src="img/pause.svg" alt="">

        <div id="controller" style="display: none;">
            <div class="custom-progress">
                <div class="progress-bar">
                    <div class="now"></div>
                </div>
            </div>
            <div class="controller-btns">
                <div class="controller-left">
                    <!--播放/暂停-->
                    <span class="glyphicon glyphicon-play pointer" onclick="playPause()"></span>
                    <span class="glyphicon glyphicon-pause pointer none" style="padding-right: 19px;"
                          onclick="playPause()"></span>
                    <!--停止-->
                    <span class="glyphicon glyphicon-stop pointer" onclick="stop()"></span>
                    <!--音量-->
                    <div class="sound-group">
                        <span class="glyphicon glyphicon-volume-up pointer" style="font-size: 19px;top:3px; padding-left:13px;"
                              onclick="soundMuted()"></span>
                            <span class="glyphicon glyphicon-volume-down pointer none" style="font-size: 19px;top:3px; padding-left:15px;"
                                  onclick="soundMuted()"></span>
                            <span class="glyphicon glyphicon-volume-off pointer none"
                                  style="font-size: 19px;padding-left: 11px;padding-right: 10px; top:3px;"