关于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   pre