HTML5全屏(Fullscreen)API详细介绍


Posted in HTML / CSS onApril 24, 2015

在越来越真实的web应用程序中,JavaScript也变得越来越给力.

FullScreen API 是一个新的JavaScript API,简单而又强大. FullScreen 让我们可以通过编程的方式来向用户请求全屏显示,如果交互完成,随时可以退出全屏状态.

在线演示Demo:  Fullscreen API Example

(在此Demo中,可以Launch ,Hide ,以及Dump显示相关属性,可以通过chrome的控制台查看日志信息.)

启动全屏模式

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

复制代码
代码如下:

// 找到支持的方法, 使用需要全屏的 element 调用
function launchFullScreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}

// 在支持全屏的浏览器中启动全屏
// 整个页面
launchFullScreen(document.documentElement);
// 某个元素
launchFullScreen(document.getElementById("videoElement"));

将需要全屏显示的DOM元素作为参数,调用此方法即可让window进入全屏状态,有时候可能需要用户同意(浏览器自己和用户交互),假若用户拒绝,则可能出现各种不完全的全屏.

如果用户同意进入全屏,那么工具栏以及其他浏览器组件会隐藏起来,使document框架的宽度和高度横跨整个屏幕.

退出全屏模式

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

复制代码
代码如下:

// 退出 fullscreen
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozExitFullScreen) {
document.mozExitFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}

// 调用退出全屏方法!
exitFullscreen();


请注意: exitFullscreen 只能通过 document 对象调用 —— 而不是使用普通的 DOM element.

Fullscreen 属性与事件

一个坏消息,到目前为止,全屏事件和方法依然是带前缀的,好消息就是很快主流浏览器就会都支持。

1.document.fullscreenElement:  当前处于全屏状态的元素 element.
2.document.fullscreenEnabled:  标记 fullscreen 当前是否可用.

当进入/退出 全屏模式时,会触发 fullscreenchange 事件:

复制代码
代码如下:

var fullscreenElement =
document.fullscreenEnabled
|| document.mozFullscreenElement
|| document.webkitFullscreenElement;
var fullscreenEnabled =
document.fullscreenEnabled
|| document.mozFullscreenEnabled
|| document.webkitFullscreenEnabled;

在初始化全屏方法时,可以探测需要监听哪一个事件.

Fullscreen CSS

浏览器提供了一些有用的 fullscreen CSS 控制规则:

复制代码
代码如下:

/* html */
:-webkit-full-screen {
/* properties */
}
:-moz-fullscreen {
/* properties */
}

:fullscreen {
/* properties */
}

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

/* styling the backdrop */
::backdrop {
/* properties */
}


在某些情况下,WebKit需要一些特殊处理,所以在处理多媒体时,你可能需要上面的代码。

我认为 Fullscreen API 超级简单,超级有用. 我首次见到这个 API 是在一个名为 MDN's BananaBread demo 的全客户端第一人称射击游戏, 这真是一个使用全屏模式的绝佳案例。

全屏API提供了进入和退出全屏模式的方式,并提供相应的事件来监测全屏状态的改变,所以各方面都连贯起来了.

请记住这个很好的API吧 —— 在未来的某个时刻,它肯定会派上用场!

HTML / CSS 相关文章推荐
CSS3等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
html5指南-2.如何操作document metadata
Jan 07 HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 HTML / CSS
h5调用摄像头的实现方法
Jun 01 HTML / CSS
关于HTML5语义标签的实践(blog页面)
Jul 12 HTML / CSS
详解px单位html5响应式方案
Mar 08 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 HTML / CSS
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
Nov 11 HTML / CSS
Html5获取用户当前位置的几种方式
Jan 18 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 #HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 #HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 #HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
Apr 24 #HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 #HTML / CSS
HTML5 Convas APIs方法详解
Apr 24 #HTML / CSS
微信浏览器取消缓存的方法
Mar 28 #HTML / CSS
You might like
咖啡常见的种类
2021/03/03 新手入门
php 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
椰子猫砂:CatSpot
2018/08/27 全球购物
孝老爱亲模范事迹材料
2014/05/25 职场文书
公司授权委托书范文
2014/08/02 职场文书
教师见习报告范文
2014/11/03 职场文书
教师学期末个人总结
2015/02/13 职场文书
公司人事任命通知
2015/04/20 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
Pytorch使用shuffle打乱数据的操作
2021/05/20 Python
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python
Python list列表删除元素的4种方法
2021/11/01 Python
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python