前端学习Html5(day3)视频播放器

一、简单布局
一整个div作为父级
然后里面放个video 再来一个控制栏div
父级设置relative
控制栏position:absolute bottom:-40px

二、逻辑问题
1、视频初始化问题
一开始的话video设置

video{
   
    height:100%;
    margin: 0 auto;
    display: none;
}

让其隐藏 然后在这里放一张动态的gif图片

.player{
   
    width: 720px;
    height: 360px;
    margin: 0 auto;
    border:3px solid red;
    background: url("../images/loading.gif") center no-repeat;
    background-size: cover;
    position: relative;
}

2、实现播放停止视频以及图标的变换

//对其class进行类进行切换
$(this).toggleClass("fa-play fa-pause") 

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、全屏操作
这个之前说过了 很简单同时要考虑兼容性问题

/*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、实现播放业务逻辑：当视频文件可以播放时触发下面的事件oncanplay

video.oncanplay=function(){
   
            set