1、先看效果

    注意：在点击进度条的时候，对本地视频是无效的，需要在线视频才可以生效。

2、CSS代码

* {padding: 0px;margin: 0px;}
html,body{background: #313127;}  
#player {width: 800px;margin: 0 auto;box-shadow: 0px 0px 800px #fff;margin-top: 200px;}  
#player #videobox, video {width: 100%;}
#player .controlsbox {height: 60px;background: #FAFAFA;display: flex;line-height: 60px;margin-top: -4px;}  
.Progress {background: #DADADA;width: 100%;display: block;}
.Progress > span {background: #317EF3;height: 60px;display: inline-block;  }
#play, #muted {flex: 10;color: #317EF3;text-align: center;line-height: 60px;font-size: 25px;cursor: pointer;}
#duration {flex: 80;}
#volume {flex: 20;}

3、html代码

<div id="player">
    <div id="videobox"></div>
    <div class="controlsbox">
        <span class="fa fa-play" id="play"></span>
        <span class="Progress" id="duration">
            <span style="width:0%"></span>
        </span>
        <span class="fa fa-volume-up" id="muted"></span>
        <span class="Progress" id="volume">
            <span style="width:00%"></span>
        </span>
    </div>
</div>

4、js代码

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script>
    var video;
    var time;
    var init = function () {
        video = document.createElement("video");
        video.src = "http://www.yangshaofeng.com/Uploads/Editor/v/023.mp4";
        video.volume = 0.2;
        document.getElementById("videobox").appendChild(video);
        $("#volume").find("span").attr("style", "width:" + video.volume * 100 + "%");
    }
    init();
    var playtime = function () {
        if (video.ended) {
            video.pause();
            $("#play").addClass("fa-play");
            $("#play").removeClass("fa-pause");
            clearInterval(time);
            video.currentTime = 0;
        }
        $("#duration").find("span").attr("style", "width:" + video.currentTime * 100 / video.duration + "%");
    }
    //播放
    var play = function () {
        if (video.currentTime == 0 || video.paused == true) {
            video.play();
            $("#play").removeClass("fa-play");
            $("#play").addClass("fa-pause");
            time = setInterval(playtime, 1000);
        } else {
            video.pause();
            $("#play").addClass("fa-play");
            $("#play").removeClass("fa-pause");
            clearInterval(time);
        }
    }
    $("#play").click(function () {
        play();
    });
    //静音
    $("#muted").click(function () {
        video.muted = !video.muted;
        if (video.muted) {
            $("#muted").addClass("fa-volume-off");
            $("#muted").removeClass("fa-volume-up");
        } else {
            $("#muted").addClass("fa-volume-up");
            $("#muted").removeClass("fa-volume-off");
        }
    });
    $("#duration").click(function () {
        var click_width = event.offsetX;
        var box_width = $(this).width();
        var videoduration = video.duration;
        video.currentTime = videoduration * click_width / box_width;
        $(this).find("span").attr("style", "width:" + video.currentTime * 100 / video.duration + "%");
    });
    $("#volume").click(function () {
        var click_width = event.offsetX;
        var box_width = $(this).width();
        video.volume = click_width / box_width;
        $(this).find("span").attr("style", "width:" + video.volume * 100 + "%");
    });

</script>