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 相关文章推荐
纯CSS实现预加载动画效果
Sep 06 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
Apr 25 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 HTML / CSS
HTML5中原生的右键菜单创建方法
Jun 28 HTML / CSS
有关HTML5页面在iPhoneX适配问题
Nov 13 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
五个PHP程序员工具
2008/05/26 PHP
PHP 图像尺寸调整代码
2010/05/26 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
浅谈php提交form表单
2015/07/01 PHP
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
标准的毕业生自荐信
2014/04/20 职场文书
企业人事任命书
2014/06/05 职场文书
医院节能减排方案
2014/06/13 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
感恩教师节主题班会
2015/08/12 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书