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 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 HTML / CSS
css3动画效果抖动解决方法
Sep 03 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
Jun 30 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
Apr 19 HTML / CSS
Html5应用程序缓存(Cache manifest)
Jun 04 HTML / CSS
使用Html5中的cavas画一面国旗
Sep 25 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 HTML / CSS
Web前端:CSS最强总结 附详细代码
Mar 31 HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
Aug 05 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
Parse正式发布开源PHP SDK
2014/08/11 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
python+pyqt5编写md5生成器
2019/03/18 Python
Django框架封装外部函数示例
2019/05/28 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
Python模块future用法原理详解
2020/01/20 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
python中pow函数用法及功能说明
2020/12/04 Python
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
C语言50道问题
2014/10/23 面试题
淘宝中秋节活动方案
2014/01/31 职场文书
《落花生》教学反思
2014/02/25 职场文书
安全例会汇报材料
2014/08/23 职场文书
2014年实习期工作总结
2014/11/27 职场文书
优秀班组事迹材料
2014/12/24 职场文书
公司聚餐通知
2015/04/22 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL