最近整了臺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了都不知道是哪里的問題。自己寫的改起來反而得心應手。后面會打算出個造輪子的系列，慢慢講做一個視頻網站遇到的坑。

總結

以上是生活随笔為你收集整理的关于html5 video全屏+自定义控制器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。