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弹性盒模型开发笔记(一)
Apr 26 HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
一款利用纯css3实现的win8加载动画的实例分析
Dec 11 HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 HTML / CSS
详解css3 flex弹性盒自动铺满写法
Sep 17 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
微信浏览器左上角返回按钮拦截功能
Nov 21 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
Mar 26 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
Nov 16 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
我的论坛源代码(二)
2006/10/09 PHP
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
PHP form 表单传参明细研究
2009/07/17 PHP
tp5框架的增删改查操作示例
2019/10/31 PHP
js 模拟气泡屏保效果代码
2010/07/10 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
Python批量转换文件编码格式
2015/05/17 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
python的Tqdm模块的使用
2018/01/10 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
求职者简历中的自我评价
2013/10/20 职场文书
统计岗位职责
2014/02/21 职场文书
暑期社会实践证明书
2014/11/17 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
MySQL命令行操作时的编码问题详解
2021/04/14 MySQL
详解Python牛顿插值法
2021/05/11 Python
详解Python中__new__方法的作用
2022/03/31 Python