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

[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. // 找到支持的方法, 使用需要全屏的 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();   

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器