原生JS实现——自定义播放器

多媒体

1.常用方法：    load() :加载        play():播放      pause():暂停

                          注：JQ中没有提供对视频播放控件的方式，如果要操作视频播放，必须使用原生的js方法——dom元素

2.常用属性：

    1.currentTime：视频播放的当前进度

    2.duration：视频的总时间

    3.paused：视频播放的状态

3.常用事件：

    1.oncanplay：事件在用户可以开始播放视频/音频(video/audio)时触发

    2.ontimeupdate：通过该事件来报告当前的播放速度

    3.onended：播放完时触发——重置

4.通过JS来实现该功能的步骤：

    1.首先获取播放器

$(function(){
    var video=$(".video")[0];
})

    2.实现播放与暂停

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

})

    3.实现全屏操作

$(".expend").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.通过总时长计算时分秒

function getResult(time){
    var hour=Math.floor(time/3600);
    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.实现播放业务逻辑

video.oncanplay=function(){
    setTimeOut(function(){
        /*将视频文件设置为显示状态*/
        video.style.display="block";    
        /*获取当前视频的总长度*/
        var total=video.duration;
        var result=getResult(total);
        $(".totalTime").html(result);

    },2000)

}

    6.实现播放过程中的业务逻辑：当视频播放时会触发ontimeupdate事件(只要currentTime的值发生改变，就会触发该事件)

video.ontimeupdate=function(){
    /*获取当前的播放时间*/
    var current=video.currentTime;
    /*计算出时分秒*/
    var result=getResult(currrent);
    /*将结果展示在指定的dom元素中*/
    $(".currentTime").html(result);
    /*设置当前播放进度条样式*/
    var percent=current/video.total*100+"%";
    $(".elapse").css("width",percent);

}

    7.实现视频跳播功能

$(".bar").click(function(e){
    /*获取当前鼠标相对于父元素的left值——偏移值*/
    var offset=e.offsetX;

    /*计算偏移值相对于父元素总宽度的比例*/
    var precent=offset/$(this).width();

    /*计算这个位置对应的的视频进度值*/
    var current=precent*video.duration;

    /*设置当前视频的currentTime*/
    video.currentTime=current;

})

    8.播放完毕之后，重置播放器的状态   

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




}