zoukankan      html  css  js  c++  java
  • html5常用API之Full Screen

    所谓Full Screen API,就是全屏API,在html5中,该API允许开发者以编程方式将Web应用程序全屏运行,使Web应用程序更像本地应用程序。这款API十分简单有用,是html5初学者必须掌握的一款API,今天小编就为大家分享分享这款API的具体使用方法。

    Full Screen 的介绍

    FullScreen API使用非常简单,在html5中,共有两种模式,分别是:

    Launching Fullscreen Mode 启动全屏模式

        // 找到适合浏览器的全屏方法  function launchFullScreen(element) { 

      if(element.requestFullScreen) { 

        element.requestFullScreen(); 

      } else if(element.mozRequestFullScreen) { 

        element.mozRequestFullScreen(); 

      } else if(element.webkitRequestFullScreen) { 

        element.webkitRequestFullScreen(); 

      } 

    // 启动全屏模式 

    launchFullScreen(document.documentElement); // the whole page 

    launchFullScreen(document.getElementById("videoElement")); // any individual element

    Exit FullScreen Mode 退出全屏模式

    // Whack fullscreenfunction exitFullscreen() {

      if(document.exitFullscreen) {

        document.exitFullscreen();

      } else if(document.mozCancelFullScreen) {

        document.mozCancelFullScreen();

      } else if(document.webkitExitFullscreen) {

        document.webkitExitFullscreen();

      }

    }

    // Cancel fullscreen for browsers that support it!

    exitFullscreen();

    Full Screen 的相关属性和事件

    虽然,Full ScreenAPI简单易用,但目前 仍存在兼容的问题,许多能使用的浏览器仍需要在其相应的属性和事件加相关的前缀。

    【document.fullScreenElement】 该属性表示启动全屏的元素(如 video这些)

    【document.fullScreenEnabled】 该属性表示当前是否全屏

    【fullscreenchange 事件】 监听全屏状态改变的事件

    2.2 Full Scrren 相关的css属性

    众所周知,说到html,就不得不提css,而fullscreen API 中也有一些关于的css属性:

    :-webkit-full-screen,

    :-moz-full-screen,

    :-ms-fullscreen,

    :full-screen {

      /*pre-spec */

       /* properties */

    }

    :fullscreen {

      /* spec */

       /* properties */

    }

    /* deeper elements */:-webkit-full-screen video {

       100%;

       height: 100%;

    }

    /* styling the backdrop*/::backdrop {

      /* properties */

    }

    ::-ms-backdrop {

      /* properties */

    }

    结束语

           在屏幕大小有限的移动端,全屏功能显得异常重要,虽然现目前Full Screen API还存在一些兼容问题,但相信这些问题肯定很快会找到解决办法,且这个API肯定也会成为移动互联网时代最常用的API之一。

    相关文章:《Web前端之jQuery 的10大操作技巧

  • 相关阅读:
    ecplise 导出maven项目依赖的jar
    vue.js 中组件的使用
    爬虫:python采集豆瓣影评信息并进行数据分析
    Python爬取前程无忧十万条招聘数据
    爬虫:新浪微博爬虫的最简单办法
    爬虫:利用python完成百度贴吧数据采集
    基于SSM框架的新生报到可视化系统
    爬虫:利用selenium采集某某环境网站的空气质量数据
    基于flask框架的高校舆情分析系统
    基于flask的城市空气质量分析系统
  • 原文地址:https://www.cnblogs.com/space007/p/4911446.html
Copyright © 2011-2022 走看看