前端学习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(