html5 全屏api,HTML5 全屏 API
翻译人员: 铁锚
原文日期: 2013年12月23日
翻译日期: 2013年12月29日
原文链接: fullscreen api
在越来越真实的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 属性与事件
一个坏消息,到目前为止,全屏事件和方法依然是带前缀的,好消息就是很快主流浏览器就会都支持。
document.fullscreenelement: 当前处于全屏状态的元素 element.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吧 —— 在未来的某个时刻,它肯定会派上用场!
html5 全屏api,HTML5 全屏 API相关推荐
- 第89天:HTML5中 访问历史、全屏和网页存储API
一.访问历史 API 通过history对象实现前进.后退和刷新之类的操作 history新增的两个方法history.replaceState()和history.pushState()方法属于HT ...
- js实现全屏与退出全屏,解决F11进入全屏后退出全屏API方法失效(chrome)
js实现全屏与退出全屏,解决F11进入全屏后退出全屏API方法失效(chrome) 解决的问题 谷歌浏览器F11全屏后,在页面中编写的全屏按钮失效 解决方法 //判断是否是全屏状态 var isFul ...
- js实现浏览器全屏与退出全屏,解决chrome下F11进入全屏后退出全屏API方法失效
1. 问题说明 网页全屏和退出全屏其实已经算的上一个很常见的功能了,那是不是直接用HTML5全屏API就没什么问题了,但是不要忘了键盘上的F11有着同样的功能,实际使用的时候就发现F11使网页进入全屏 ...
- 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 ...
- jquery video全屏_用videojs让HTML5视频在移动端全屏的方法
用videojs让HTML5视频在移动端全屏的方法 文章标签: 视频 : 04-10 19:23 : 1859次 : 0条 1赞 点赞 简介在使用videojs插件时,如何让HTML5的视频在移动端里 ...
- HTML5视频手机全屏,HTML5在手机端实现视频全屏展示方法
这篇文章主要介绍了HTML5在手机端实现视频全屏展示方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 最近做项目,遇到一个问题 ...
- 熊猫怎么用html5看直播,熊猫TV HTML5播放器自动网页全屏
// ==UserScript== // @name 熊猫TV HTML5播放器自动网页全屏 // @name:zh-CN 熊猫TV HTML5播放器自动网页全屏 // @namespace pand ...
- html5视频退出全屏死机,HTML5 video进入全屏和退出全屏的实现方法
这篇文章主要介绍了HTML5 video进入全屏和退出全屏的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 当我们使用v ...
最新文章
- java中用于选择按钮的语句_java程序员考试套题1
- JavaScript异步编程解决方案探究
- JNI编程支持X86处理器的步骤
- Apache日志配置
- autoencoder自编码器原理以及在mnist数据集上的实现
- 错过了面试,公司招满人了_您可能错过了Google令人赞叹的AI公告。
- C++算法学习(力扣:134. 加油站)
- 聊聊spring for kafka对consumer的封装与集成
- 近期有哪些值得读的QA论文?
- ntko 发生错误:保存html到临时文件目录发生错误,ntko学习文档..doc
- IT 常用词汇(一)
- cuda 镜像_AMDamp;Intel双平台黑苹果镜像安装包Catalina 10.15.0(19A583)加强版
- 2018北航计算机考研复试经验
- 服务器四核cpu性能排行,服务器cpu性能排行
- 大恒相机连续采集并保存图片
- python实现输出日历_python实现输出日历
- Python奇技淫巧之Pycharm活动模板配置
- 计算机考试按脚本制作幻灯片,2018秋季【西南大学】[1055]《powerpoint多媒体课件制作》作业(参考答案)...
- Double值取得小数点后两位的若干方法
- 基于h5的航空订票系统的设计与实现