1. ·您当前的位置:主页 > 技术教程 > 微信视频 >

      [html5]HTML5全屏与退出全屏的API

      时间:2017-12-29 14:58csdn.net
      [html5]HTML5全屏与退出全屏的API

      翻译人员: 铁锚
      原文日期: 2013年12月23日
      翻译日期: 2013年12月29日
      原文链接: Fullscreen API

      在越来越真实的web应用程序中,JavaScript也变得越来越给力.
      FullScreen API 是一个新的JavaScript API,简单而又强大. FullScreen 让我们可以通过编程的方式来向用户请求全屏显示,如果交互完成,随时可以退出全屏状态.
      在线演示Demo:  Fullscreen API Example
      (在此Demo中,可以Launch ,Hide ,以及Dump显示相关属性,可以通过chrome的控制台查看日志信息.)

      启动全屏模式
      全屏API requestFullscreen方法在一些老的浏览器里面依然使用带前缀形式的方法名,因此可能需要进行检测判断:
      (带前缀,意思就是各个浏览器内核不通用.)

      1. // ?#19994;?#25903;持的方法, 使用需要全屏的 element 调用   
      2. function launchFullScreen(element) {   
      3.   if(element.requestFullscreen) {   
      4.     element.requestFullscreen();   
      5.   } else if(element.mozRequestFullScreen) {   
      6.     element.mozRequestFullScreen();   
      7.   } else if(element.webkitRequestFullscreen) {   
      8.     element.webkitRequestFullscreen();   
      9.   } else if(element.msRequestFullscreen) {   
      10.     element.msRequestFullscreen();   
      11.   }   
      12. }   
      13.    
      14.    
      15. // 在支持全屏的浏览器中启动全屏   
      16. // 整个页面   
      17. launchFullScreen(document.documentElement);   
      18. // 某个元素   
      19. launchFullScreen(document.getElementById("videoElement"));   

      将需要全屏显示的DOM元素作为参数,调用此方法即可让window进入全屏状态,有时候可能需要用户同意(浏览器自己和用户交互),假若用户拒绝,则可能出现各种不完全的全屏.
      如果用户同意进入全屏,那么工具栏以及其他浏览器组件会隐藏起来,使document框架的宽度和高度横跨整个屏幕.

      退出全屏模式
      使用 exitFullscreen 方法可以使浏览器退出全屏,返回原先的布局. 该方法在一些老的浏览器上也是支持前缀方法.

      1. // 退出 fullscreen   
      2. function exitFullscreen() {   
      3.   if(document.exitFullscreen) {   
      4.     document.exitFullscreen();   
      5.   } else if(document.mozExitFullScreen) {   
      6.     document.mozExitFullScreen();   
      7.   } else if(document.webkitExitFullscreen) {   
      8.     document.webkitExitFullscreen();   
      9.   }   
      10. }   
      11.    
      12.    
      13. // 调用退出全屏方法!   
      14. exitFullscreen();   

      ?#35753;?#25991;章推荐

      请稍候...
      彩票软件开发公司