关于html5 video全屏+自定义控制器

最近整了台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了都不知道是哪里的问题。自己写的改起来反而得心应手。后面会打算出个造轮子的系列，慢慢讲做一个视频网站遇到的坑。