zoukankan      html  css  js  c++  java
  • HTML5全屏(Fullscreen)API详细介绍

    // 整个页面
    onclick=   launchFullScreen(document.documentElement);
    // 某个元素
    launchFullScreen(document.getElementById("videoElement"));

    // 找到支持的方法, 使用需要全屏的 element 调用
    function launchFullScreen(element) {
    if(element.requestFullscreen) {
    element.requestFullscreen();
    } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
    } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
    } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
    }
    }

    // 退出 fullscreen
    function exitFullscreen() {
    if(document.exitFullscreen) {
    document.exitFullscreen();
    } else if(document.mozExitFullScreen) {
    document.mozExitFullScreen();
    } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
    }
    }


    // 调用退出全屏方法!
    exitFullscreen();

    Fullscreen 属性与事件

    一个坏消息,到目前为止,全屏事件和方法依然是带前缀的,好消息就是很快主流浏览器就会都支持。

    1.document.fullscreenElement:  当前处于全屏状态的元素 element.
    2.document.fullscreenEnabled:  标记 fullscreen 当前是否可用.

    当进入/退出 全屏模式时,会触发 fullscreenchange 事件:

    var fullscreenElement =
    document.fullscreenEnabled
    || document.mozFullscreenElement
    || document.webkitFullscreenElement;
    var fullscreenEnabled =
    document.fullscreenEnabled
    || document.mozFullscreenEnabled
    || document.webkitFullscreenEnabled;

    Fullscreen CSS

    浏览器提供了一些有用的 fullscreen CSS 控制规则:

    /* html */
    :-webkit-full-screen {
    /* properties */
    }
    :-moz-fullscreen {
    /* properties */
    }


    :fullscreen {
    /* properties */
    }


    /* deeper elements */
    :-webkit-full-screen video {
    100%;
    height: 100%;
    }


    /* styling the backdrop */
    ::backdrop {
    /* properties */
    }

  • 相关阅读:
    JS 利用数组拼接html字符串
    IE浏览器下读取客户端上传的文件大小
    PrintWriter out = response.getWriter() 输出中文乱码问题
    非常有用的Java程序片段
    sql之left join、right join、inner join的区别
    JAVA 数组常用技巧
    java 图片文件格式转换(多页tif转jpg 、jpg转tif)
    SQL Server 字段状态判断语句
    sql server 2008中id如何设为自增
    java基于xml配置的通用excel单表数据导入组件(五、Action处理类)
  • 原文地址:https://www.cnblogs.com/lfqcode/p/6164001.html
Copyright © 2011-2022 走看看