Fullscreen API

Launching Fullscreen Mode

// Find the right method, call on correct element
function launchIntoFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

// Launch fullscreen for browsers that support it!
launchIntoFullscreen(document.documentElement); // the whole page
launchIntoFullscreen(document.getElementById("videoElement")); // any individual element

Exiting Fullscreen Mode

// Whack fullscreen
function 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();

Fullscreen Properties & Events

  • document.fullScreenElement: the element which has been pushed to fullscreen.
  • document.fullScreenEnabled:  notes if fullscreen is current enabled.
var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;

Fullscreen CSS

Browsers do provide us one helpful bit of fullscreen CSS control:

:-webkit-full-screen {
  /* properties */
}

:-moz-full-screen {
  /* properties */
}

:-ms-fullscreen {
  /* properties */
}

:full-screen { /*pre-spec */
  /* properties */
}

:fullscreen { /* spec */
  /* properties */
}

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

/* styling the backdrop*/
::backdrop {
  /* properties */
}
::-ms-backdrop {
  /* properties */
}
时间: 2024-10-10 03:58:29

Fullscreen API的相关文章

Fullscreen API 全屏显示网页

第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrome 和 FireFox 三种浏览器支持该特性.因为尚未发布正式版的标准,所以必须使用浏览器特定的方法,也就是应用添加前缀(webit/moz)的方法. 这个 API 不仅能够使整个页面全屏显示,也可以使页面中的某个元素全屏显示.它的设计初衷是为了全屏显示 HTML5 视频和游戏,以便更全面的替代 flash 功能.尽管还有很多有待完善的地方,

封装Html5 Fullscreen API

复制前言: 使用新的全屏 API,可以将用户的注意力导向特定元素,同时隐藏背景或转移对其他应用的注意力.因为W3C全屏规范还未达到最终版本,所以大多数浏览器供应商都使用唯一标识符为 API 添加前缀.在本例中,Microsoft 使用ms.最好是有单个函数可以请求所有前缀的全屏模式,类似于此处显示的大部分示例.若要获取更佳性能,请将 W3C API 名称放在第一,其后跟随设置前缀的版本. 先来几个或详细解释的地址吧: http://www.zhangxinxu.com/wordpress/201

HTML5全屏(Fullscreen)API详细介绍

// 整个页面 onclick=   launchFullScreen(document.documentElement); // 某个元素 launchFullScreen(document.getElementById("videoElement")); // 找到支持的方法, 使用需要全屏的 element 调用 function launchFullScreen(element) { if(element.requestFullscreen) { element.request

HTML5 API详解(1):fullscreen全屏模式

fullscreen API 接口 属性1:fullscreenElement 该属性返回当前处于全屏模式的DOM元素. 属性2:fullscreenEnabled 该属性返回当前 document 是否进入了可以请求全屏模式的状态. 方法1:requestFullscreen() 请求进入全屏模式. 方法2:exitFullscreen() 退出全屏模式. 事件1:fullscreenchange 进入/退出全屏模式切换时会触发. 事件2:fullscreenerror 进入/退出全屏模式失败

Native Fullscreen JavaScript API (plus jQuery plugin)

http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/ HTML5 <video> is great, but when it was first released, one of the big complaints was that it couldn’t do true FullScreen like Flash. Thankfully, this is changing and native F

[转载]你可能不知道的5个功能强大的 HTML5 API —— html5系列

HTML5 新增了许多重要的特性,像 video.audio 和 canvas 等等,这些特性使得能够很容易的网页中包含多媒体内容,而不需要任何的插件或者 API.而其它的新元素,例如 section.article.header 和 nav 等则是用来丰富网页内容.另外还有很多强大的 JavaScript API,下面这5个 HTML5 API 你可能不知道,通过今天这篇文章可以了解一下. Fullscreen API 这个 HTML5 全屏 API 让 Web 开发者可以通过编程控制页面的全

How to Use HTML5 FUll Screen API(怎样使用HTML5全屏接口)

原文链接:http://www.sitepoint.com/use-html5-full-screen-api/ 假设你不太喜欢变化太快的东西,那么web开发可能不适合你. 我曾在2012年末有写过Full-Screen API的介绍,而且当时就提到事实上现细节可能会被改动,可是没有想到一年后我须要重写!本篇的所讲的内容或许不是最新的.可是很感谢David Storey帮我重点归纳出最近技术方面的变化.... 什么是Full-Screen API? 此API能够使单个元素全屏显示. 与按下F11

How to Use HTML5 FUll Screen API(如何使用HTML5全屏接口)

原文链接:http://www.sitepoint.com/use-html5-full-screen-api/ 如果你不太喜欢变化太快的东西,那么web开发可能不适合你.我曾在2012年末有写过Full-Screen API的介绍,并且当时就提到其实现细节可能会被修改,但是没有想到一年后我需要重写!本篇的所讲的内容也许不是最新的,但是非常感谢David Storey帮我重点归纳出近期技术方面的变化.... 什么是Full-Screen API? 此API可以使单个元素全屏显示.与按下F11键强

HTML5: Screen Orientation API

媒体查询允许网站根据智能手机和平板的方向来调整布局.但有时候你希网站锁定到一个特定的方向,横屏或竖屏,此时,原生应用的格式是可以被指定的.APP只在预设格式下显示-独立于实际的设备方向.通过使用HTML5的 Screen Orientation API, 可以在JavaScript定义屏幕方向. 为一个文档定义屏幕方向 通过screen.orientation属性的lock()方法可以调整屏幕方向,其默认值是any,这允许设备根据其物理方向来应用任何方向.值"natural"将在设备的