最近整了台nas机,准备自己写个视频网站搭建家庭媒体服务。临时记录下h5 video全屏+自定义控制器的实现的方式,之后会针对实现完整的h5 video播放控制写一些介绍和遇到的坑。
video标签中有controls属性,如果controls=“controls” 则会使用浏览器内嵌的控制器,当然这是最省力的,而且实际使用也没什么问题,但对于喜欢从轮子造起的猴子,还是喜欢全部自定义。
简单的说,全屏用的不是video全屏,而是将div全屏。先入为主以为视频全屏,只有video具有全屏功能,结果搜索了各种video全屏+自定义控制器的方法,要么只有chrome能用,要么就是只有非全屏自定义控制器,全屏还是浏览器的控制器。。
div全屏和video全屏调用方法一样,或者说全屏功能是所有标签的方法,不是video专有的方法。
html
<div class="video-box">//视频容器<div class="video-main" ><video preload="auto" ><source src="" type="video/mp4"></video></div>//控制器容器<div class="video-control"></div></div>
jQuery:
let videoBox=$('videoBox');if (videoBox.requestFullscreen) {videoBox .requestFullscreen();} else if (videoBox .mozRequestFullScreen) {videoBox .mozRequestFullScreen();} else if (videoBox .webkitRequestFullScreen) {videoBox .webkitRequestFullScreen();}
div全屏可以说是同时解决屏蔽浏览器全屏控制器,同时使用自定义的控制器。嵌套在被全屏的div里面的元素都会在全屏的时候显示,只用把自定义控制器和video共有父容器全屏就可以了。然后就是各种css调整布局。
顺便一提,有很多现成的插件可以实现全屏,自定义控制器这些,像是videojs。只是个人不喜欢而已,而且出bug了都不知道是哪里的问题。自己写的改起来反而得心应手。后面会打算出个造轮子的系列,慢慢讲做一个视频网站遇到的坑。