设置全屏与退出全屏

设置全屏的方式很简单，一般运用到video标签中比较多，如果我们使用自带的控件会导致在不同的浏览器显示效果不一样。往往我们就采用自定义的控件，增强用户体验

那么今天我就来说说全屏的设置与退出，一般全屏的按钮我们会用一张背景图片来代替，通过改变background-position来改变现实的状态

 

<div>

　　<video id="vdo"></video>

</div>
<script>
　　var vdo = document.getElementById("vdo");
　　var isFull = true;
　　vdo.onclick = function() {
　　　　if(isFull) {

　　　　　　　　if(vdo.requestFullScreen) {
　　　　　　　　　　vdo.requestFullScreen() 　　//W3C标准
　　　　　　　　} else if(vdo.webkitRequestFullScreen) {
　　　　　　　　　　vdo.webkitRequestFullScreen() 　　　　//谷歌
　　　　　　　　} else if(vdo.mozRequestFullScreen) {
　　　　　　　　　　vdo.mozRequestFullScreen() 　　　　//火狐
　　　　　　　　} else if(vdo.msRequestFullScreen) {
　　　　　　　　　　vdo.msRequestFullScreen() 　　　　//IE
　　　　　　　　}
　　　　　　　　isFulls = false

　　　　} else {

　　　　　　if(document.exitFullscreen) {
　　　　　　　　document.exitFullscreen()
　　　　　　} else if(document.webkitExitFullscreen) {
　　　　　　　　document.webkitExitFullscreen()
　　　　　　} else if(document.mozExitFullscreen) {
　　　　　　　　document.mozExitFullscreen()
　　　　　　} else if(document.msExitFullscreen) {
　　　　　　　　document.msExitFullscreen()
　　　　　　}

　　　　　　isFull = true

　　　　}
　　}
</script>

在按下ESC的时候也是可使video标签退出全屏模式的，但是在全屏模式下即使是按下了ESC，也退出了全屏模式，单实际上是没有触发onkeydown事件的，这样再点击全屏按钮时就不会有反应，那么这个问题怎么解决呢其实只需要检测是否处于全屏模式就可以了

window.addEventListener('resize', function() {
                let vdo= document.getElementById("vdo")if(vdo.scrollHeight == window.screen.height || vdo.scrollWidth == window.screen.width) {
                    isFull = false
                }else {
                    isFull = true
                }
        })

至于要检测屏幕的宽度或者高度是否与vdo相等就可以了，这样把isFull 的值从写就可以达到目的了