zoukankan      html  css  js  c++  java
  • HTML5 全屏特性

    html5 现在支持全屏特性了,fullscreen api接口如下所示(使浏览器窗口全屏),见下列代码:

    (1)全屏 

    // Find the right method, call on correct element
    function launchFullScreen(element) {
      if(element.requestFullScreen) {
        element.requestFullScreen();
      } else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if(element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
      }
    }
    
    // Launch fullscreen for browsers that support it!
    launchFullScreen(document.documentElement); // the whole page  这里代码必须手动出发执行才可以
    launchFullScreen(document.getElementById("videoElement")); // any individual element
    

    (2)取消全屏

    // Whack fullscreen
    function cancelFullscreen() {
      if(document.cancelFullScreen) {
        document.cancelFullScreen();
      } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if(document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      }
    }
    
    // Cancel fullscreen for browsers that support it!
    cancelFullscreen();
    

      

    (3)全屏属性和事件

    • document.fullScreenElement: 触发全屏的元素.
    • document.fullScreenEnabled: 全屏是否被禁止.

    (4)全屏的样式

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

      

    Note:触发全屏需要手动触发,浏览器不能自动全屏的。

      

     

  • 相关阅读:
    快递物流查询接口介绍
    DWR
    html网页自动跳转页面代码
    提升Apache网站访问速度的优化方法
    synchronized实现原理
    window下的hosts
    [转]BX9054: 各浏览器对 document.execCommand 方法的首参数可选值范围存在差异
    浏览器关闭或刷新事件--window.onbeforeunload
    浏览器,tab页显示隐藏的事件监听--页面可见性
    http 304
  • 原文地址:https://www.cnblogs.com/yupeng/p/3133779.html
Copyright © 2011-2022 走看看