div的全屏与退出全屏

作用:将div全屏与退出全屏,一般播放器使用较多。

html按钮:

<button  onclick="showFull();">
                全屏
            </button>
<button onclick="delFull();"> 退出全屏 </button>

js调用:

function showFull(){
               var full=document.getElementById("container");
               launchIntoFullscreen(full);
            }

function delFull() {
                exitFullscreen();
            }

全屏方法封装:

 function launchIntoFullscreen(element) {
                if(element.requestFullscreen){
                    element.requestFullscreen();
                }
                else if(element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                }
                else if(element.webkitRequestFullscreen) {
                    element.webkitRequestFullscreen();
                }
                else if(element.msRequestFullscreen) {
                    element.msRequestFullscreen();
                }
            }

退出全屏方法封装:

 function exitFullscreen() {
                if(document.exitFullscreen) {
                    document.exitFullscreen();
                } else if(document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if(document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                }
            }

参考自:http://blog.sina.com.cn/s/blog_1458577430102xn4r.html