html5 全屏样式,HTML5 全屏特征
HTML5 全屏特性
全屏功能是浏览器很早就支持的一项功能了,可以让你页面中的video, image ,div 等等子元素实现全屏浏览,从而带来更好的视觉体验,来看看怎么使用吧。先来看看有哪些API和事件支持。
API
// 元素请求全屏显示
element.requestFullscreen()
// 检测文档的当前状态是否允许执行全屏操作
document.fullscreenEnabled()
//当前显示的元素是否处于全屏状态,如果处于,则返回为非空对象,否则返回null
document.fullscreenElement()
//元素退出全屏显示
document.exitFullscreen()
上面除了RequestFullscreen()是支持element 对象以外,其他3个都只是支持document.
Event
fullscreenchange // 全屏状态更改时触发
fullscreenerror // 执行全屏错误时触发
由于每个浏览器实现的方式不一样,所以我们实际的调用中还不能直接这样写,需要针对不同的浏览器做支持检测,下面跟着详细的例子看下具体兼容代码。
html
FullScreen
javascript
var fullScreen = document.getElementById('btnFS');
fullScreen.addEventListener("click", function(){
var status = document.fullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.mozFullscreenEnabled ||
document.msFullscrrenEnabled;
if (status) {
var img = document.getElementById("imgFS");
if (img.requestFullscreen) {
img.requestFullscreen();
} else if (img.msRequestFullscreen) { // IE
img.msRequestFUllscreen();
} else if (img.mozRequestFullscreen) { // Firefox (Gecko)
img.mozRequestFullscreen();
} else if (img.webkitRequestFullscreen) { // Webkit
img.webkitRequestFullscreen();
}
} else {
alert("The document not allowed to fullscreen.");
}
});
以上代码针对一个图片元素进行了全屏操作的例子,上文中的全屏触发是通过监听一个按钮来实现的,这个地方需要注意的是,假如你想在页面载入后就触发全屏,这个事件是不会触发执行全屏显示的。只有通过例如click, keydown等触发事件,才可以启用全屏显示的功能。
监听键盘按钮触发
下面的代码示例通过按键F12来触发启用或者关闭的操作,主要是利用了element.fullscreenElement 方法来判断当前的文档状态,来进行切换的,具体代码如下:
document.addEventListener("keydown", function(e){
console.log(e.keyCode);
if (e.keyCode == 123) { // keypress fn + F12 for Mac
fullscreen();
}
});
function fullscreen() {
var body = document.body;
var status = !document.fullscreenElement && // get the screen status
!document.msFullscreenElement &&
!document.mozFullscreenElement &&
!document.webkitFullscreenElement;
if (status) {
if (body.requestFullscreen) {
body.requestFullscreen();
} else if (body.mozRequestFullscreen) {
body.mozRequestFullscreen();
} else if (body.webkitRequestFullscreen) {
body.webkitRequestFullscreen();
} else if (body.msRequestFullscreen) {
body.msRequestFUllscreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozExitFullscreen) {
document.mozExitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
全屏样式
全屏效果下,可以启用针对该状态下的特定样式,从而达到更好的浏览效果。样式定义如下:
:-webkit-full-screen { // Webkit
}
:-moz-full-screen { // Gecko
}
:-ms-fullscreen { // IE
}
:fullscreen {
}
// 调用示例
#elementID :fullscreen {
width:100%;
height:100%;
}
:fullscreen::backdrop { // 背光
}
// 全屏背光,这是一个新的样式属性,但是目前浏览器支持的的都不太好, 在IE11中被支持,另外下面提到的Opera12.1,使用了:fullscreen-ancestor, 调用方法如下
:-ms-fullscreen::-ms-backdrop {
background-color: #000;
}
在这个地方需要注意的是,Gecko和Webkit在全屏状态下显示是有差异的,Gecko会默认把指定的全屏元素进行width:100%;height:100%,而Webkit则是显示一片黑色,所以这个地方就需要针对全屏的元素进行样式调整了,参考以上代码示例。
浏览器兼容情况
另外上面有说道下面几个问题,可以注意下。
IE11全屏状态下是不允许滚动的
IE11 并不允许通过keydown or pointerdown事件来触发msRequestFullscreen(),keypress 和click没有问题
IE11对iframe中使用全屏支持的并不是很好
在全屏模式中Safari阻塞了keyboard事件(出于安全考虑),但是我上面代码中,在Yosmite中,通过监听F12,Safari是可以正常工作的
Opera 12.1 使用老的标准:fullscreen-ancestor 伪类替代了 ::backdrop伪元素
总结
总之全屏是一个非常棒的特性,它可以让我们的Web拥有像原生应用一样体验,在以后的项目中会多尝试下这个特性。
本文参考
html5 全屏样式,HTML5 全屏特征相关推荐
- html5控制字体样式,HTML5之CSS-网页文本美化-字体样式
做了挺长时间的程序员,逐渐的让我意识到,其实技术是给自己打开了一扇窗户,让自己更好的去了解这个世界. 今天,来了解文字在网页在中,是如何去设置的. 中间来一个小插曲,我想大家应该都用过办公软件,那么办 ...
- html 锁屏模板,如何自定义锁屏样式
华为手机怎么换自定义锁屏样式?只有这两个,想换个自己拍的照片 你选择了第二个,然后去设置锁屏壁纸.用你的照片当锁屏壁纸.那样就不会变换了. 怎么自定义锁屏样式,我想应用自己的图片. 手机打开主题有个混 ...
- Html5结合JS实现浏览器全屏功能
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...
- jquery video全屏_用videojs让HTML5视频在移动端全屏的方法
用videojs让HTML5视频在移动端全屏的方法 文章标签: 视频 : 04-10 19:23 : 1859次 : 0条 1赞 点赞 简介在使用videojs插件时,如何让HTML5的视频在移动端里 ...
- html5 video播放调研,全屏,伪全屏
web duper code{web} :|: life{me} :|: tencent&xiaomi{work} 来源:http://materliu.github.io/all/web/m ...
- [html] HTML5如何监听video的全屏和退出全屏?
[html] HTML5如何监听video的全屏和退出全屏? 监听fullscreenchange事件document.addEventListener('fullscreenchange', (ev ...
- html手机端自动全屏,HTML5在手机端实现视频全屏展示方法
最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能.测试了很久,终于找到解决办法. 第一种:将视频放大来控制. 视频在播放的时候,全屏是根据高度来的,如果设置视频 video 标签的宽度是 1 ...
- HTML5视频手机全屏,HTML5在手机端实现视频全屏展示方法
这篇文章主要介绍了HTML5在手机端实现视频全屏展示方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 最近做项目,遇到一个问题 ...
- 熊猫怎么用html5看直播,熊猫TV HTML5播放器自动网页全屏
// ==UserScript== // @name 熊猫TV HTML5播放器自动网页全屏 // @name:zh-CN 熊猫TV HTML5播放器自动网页全屏 // @namespace pand ...
最新文章
- Uva 11997 多路归并
- 网易实战分享|Docker文件系统实战
- 从键盘输入一个正整数(不多于5位),计算该正整数与789之和(记为sum)
- 论文学习10-Joint entity recognition and relation extraction as a multi-head selection problem(实体关系联合抽取模型
- Windows将WSL 1升级为WSL2
- 软件测试中qa的职责,软件测试 -- 测试人员和QA的区别
- 递归 人理解循环 神理解递归
- android 显示多条数据格式,Multipart上传的进度条,包含多个Android文件
- CMMI中的过程改进
- WPS插件开发流程(1)
- FPGA中数电基础知识
- 图形化生物软件专题(4):MEGAN
- LoadRunner 自动登录163邮箱
- 聊天室-界面-curses
- OpenGL 灰度图
- 旋转矩阵和变换矩阵的概念和区别
- C语言/771.宝石与石头
- 在caffe 中添加Crowd counting 数据层
- 大一上:英语复习:英译汉(新视野大学英语读写教程1:第一、三、四、六单元分句+注释)
- Unity编辑器拓展之三:拓展Unity的Hierarchy面板