视频播放器

<h3 class="playerTitle">视频播放器</h3>
<div class="player">
    <video src="mp4/chrome.mp4"></video>
    <div class="controls">
        <a href="javascript:;" class="switch fa fa-play"></a>
        <a href="javascript:;" class="expand fa fa-expand"></a>
        <div class="progress">
            <div class="bar"></div>
            <div class="loaded"></div>
            <div class="elapse"></div>
        </div>
        <div class="time">
            <span class="currentTime">00:00:00</span>
            
            <span class="totalTime">00:00:00</span>
        </div>
    </div>
</div>
<script src="jquery.min.js"></script>
<script>
    /*通过jq来实现功能*/
    $(function(){
        /*1.获取播放器*/
        var video=$("video")[0];

        /*2.实现播放与暂停*/
        $(".switch").click(function(){
            /*实现播放与暂停的切换：如果是暂停>>播放  ，如果是播放 >> 暂停*/
            if(video.paused){
                video.play();
                /*移除暂停样式，添加播放样式*/
            }
            else{
                video.pause();
                /*移除播放样式，添加暂停样式*/
            }
            /*设置标签的样式  fa-pause:暂停   fa-play：播放*/
            $(this).toggleClass("fa-play fa-pause");
        });

        /*3.实现全屏操作*/
        $(".expand").click(function(){
            /*全屏>>不同浏览器需要添加不同的前缀>>能力测试*/
            if(video.requestFullScreen){
                video.requestFullScreen();
            }
            else if(video.webkitRequestFullScreen){
                video.webkitRequestFullScreen();
            }
            else if(video.mozRequestFullScreen){
                video.mozRequestFullScreen();
            }
            else if(video.msRequestFullScreen){
                video.msRequestFullScreen();
            }
        });

        /*4.实现播放业务逻辑：当视频文件可以播放时触发下面的事件*/
        video.oncanplay=function(){
            setTimeout(function(){
                /*1.将视频文件设置为显示*/
                video.style.display="block";
                /*2.获取当前视频文件的总时长(以秒做为单位，同时获取了小数值)，计算出时分秒*/
                var total=video.duration; //01:01:40   00:00:36
                /*3.计算时分少  60*60=3600
                * 3700:3700/3600
                * 3700:3700%3600 >> 100 /60*/
                /*var hour=Math.floor(total/3600);
                /!*补0操作*!/
                hour=hour<10?"0"+hour:hour;
                var minute=Math.floor(total%3600/60);
                minute=minute<10?"0"+minute:minute;
                var second=Math.floor(total%60);
                second=second<10?"0"+second:second;*/
                var result=getResult(total)
                /*4.将计算结果展示在指定的dom元素中*/
                $(".totalTime").html(result);
            },2000);
        }

        /*通过总时长计算出时分秒*/
        function getResult(time){
            var hour=Math.floor(time/3600);
            /*补0操作*/
            hour=hour<10?"0"+hour:hour;
            var minute=Math.floor(time%3600/60);
            minute=minute<10?"0"+minute:minute;
            var second=Math.floor(time%60);
            second=second<10?"0"+second:second;
            /*返回结果*/
            return hour+":"+minute+":"+second;
        }

        /*5.实现播放过程中的业务逻辑，当视频播放时会触发ontimeupdate事件
        * 如果修改currentTime值也会触发这个事件，说白了，只要currenTime值变化，就会触发这个事件*/
        video.ontimeupdate=function(){
            /*1.获取当前的播放时间*/
            var current=video.currentTime;
            /*2.计算出时分秒*/
            var result=getResult(current);
            /*3.将结果展示在指定的dom元素中*/
            $(".currentTime").html(result);
            /*4.设置当前播放进度条样式  0.12>>0.12*100=12+%>12%*/
            var percent=current/video.duration*100+"%";
            $(".elapse").css("width",percent);
        }

        /*6.实现视频的跳播*/
        $(".bar").click(function(e){
            /*1.获取当前鼠标相对于父元素的left值--偏移值*/
            var offset= e.offsetX;
            /*2.计算偏移值相对总父元素总宽度的比例*/
            var percent=offset/$(this).width();
            /*3.计算这个位置对应的视频进度值*/
            var current=percent*video.duration;
            /*4.设置当前视频的currentTime*/
            video.currentTime=current;
        });

        /*7.播放完毕之后，重置播放器的状态*/
        video.onended=function(){
            video.currentTime=0;
            $(".switch").removeClass("fa-pause").addClass("fa-play");
        }
    });
</script>