自定义播放器

css
<style type="text/css">
.jdt{
    width: 600px;
    height:10px;
    background:#ccc;
}
    #bf{
        height:10px;
        display:block;
        background:#639843;
    }
</style>

html

    <video  id="video" width="600">
        <source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4"/>
        <source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg"/>
    </video>
    <div class="tt">
        duration:  媒体总时间（只读）<br />
        play() : 媒体播放   <br />
        pause() :  媒体暂停<br />
        canplay（）：  可以播放<br />
        currentTime: 开始播放到现在所用的时间<br />
        timeupdate :  时间更新<br />
        <button id="playA">播放</button>
        <button id="paueseA">暂停</button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span>总共有：</span><span id="sj"></span>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span>播放了：</span><span id="currentTimeSpan">00:00</span>
    </div>
    <div class="jdt" id="jdt">
        <span id="bf" style="width:0px"></span>
    </div>

js部分
<script type="text/javascript">
    video.addEventListener("canplay",function(){
        //第一步 移除缓存事件  只需要加载一次
        video.removeEventListener("canplay",arguments.callee);
        playA.onclick=function(){
            video.play()
        }
        paueseA.onclick=function(){
            video.pause()
        }
        sj.innerText=toMs(video.duration);
        //第三步 剩余的时间
        video.ontimeupdate=function(){
            currentTimeSpan.innerText=toMs(video.currentTime);


            // 第4步 根据监控来让进度条动起来   算出百分比
            var bili=(video.currentTime/video.duration)*100+"%"
                bf.style.width=bili;
        }
        //第5步 进度条
        jdt.onclick=function(e){
            var e=e||event
            var X=e.offsetX;
            //获取到X 是点击的距离     除以整个盒子的距离是为了获得比例
            //再用比例乘以总共的时间
            var xxx=X/jdt.offsetWidth;
                video.currentTime=video.duration*xxx;
        }
    },false)
    //第二步 开始准备转化时间
    function toMs(num){
        //分钟
        var m=Math.floor(num/60);
            m=m>9?m:"0"+m
        //秒数
        var s=Math.floor(num%60);
            s=s>9?s:"0"+s
        return m+":"+s
    }
</script>