h5 音频 视频全屏设置

HTML5规范允许用户自定义网页上任一元素全屏显示。
    1、Node.requestFullScreen() 开启全屏显示
    2、Node.cancelFullScreen() 关闭全屏显示

    由于其兼容性原因，不同浏览器需要添加前缀如：

    webkit内核浏览器：webkitRequestFullScreen、webkitCancelFullScreen，
        如chrome浏览器。
    Gecko内核浏览器：mozRequestFullScreen、mozCancelFullScreen，如火狐浏览器。
    3、document.fullScreen检测当前是否处于全屏
    不同浏览器需要添加前缀
    document.webkitIsFullScreen、document.mozFullScreen
    全屏伪类选择器
    :full-screen .box {}、:-webkit-full-screen {}、:moz-full-screen {}
    .box:-webkit-full-screen {
            background-color: blue;
        }
    //全屏
    open.addEventListener('click', function () {

            // html全屏
            // document.documentElement.webkitRequestFullScreen();

            //  任意盒子全屏
            box.webkitRequestFullScreen();
        });

    // 关闭全屏
        cancel.addEventListener('click', function () {

            // document.documentElement.webkitCancelFullScreen();

            // box.webkitCancelFullScreen();

            // 只能通过document才能调用关闭方法
            document.webkitCancelFullScreen();

        });
    // 检测当前是否处于全屏
        check.addEventListener('click', function () {
            // 返回值为true或false
            alert(document.webkitIsFullScreen);
        });