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);

        });