Html5全屏API的使用方法

maiziedu · · 3214 次点击 · 开始浏览    置顶
这是一个创建于 的主题,其中的信息可能已经有所发展或是发生改变。

![a2cc7cd98d1001e97c71144eb90e7bec54e79725.jpg](http://studygolang.qiniudn.com/151026/8238e4991c18457a6adfd47443401c36.jpg) 所谓Full Screen API,就是全屏API,在html5中,该API允许开发者以编程方式将Web应用程序全屏运行,使Web应用程序更像本地应用程序。这款API十分简单有用,是html5初学者必须掌握的一款API,今天小编就为大家分享分享这款API的具体使用方法。 Full Screen 的介绍 FullScreen API使用非常简单,在html5中,共有两种模式,分别是: Launching Fullscreen Mode 启动全屏模式 ```javascript // 找到适合浏览器的全屏方法 function launchFullScreen(element) { if(element.requestFullScreen) { element.requestFullScreen(); } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if(element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); } } // 启动全屏模式 launchFullScreen(document.documentElement); // the whole page launchFullScreen(document.getElementById("videoElement")); // any individual element Exit FullScreen Mode 退出全屏模式 // Whack fullscreenfunction exitFullscreen() { if(document.exitFullscreen) { document.exitFullscreen(); } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if(document.webkitExitFullscreen) { document.webkitExitFullscreen(); } } // Cancel fullscreen for browsers that support it! exitFullscreen(); ``` Full Screen 的相关属性和事件 虽然,Full ScreenAPI简单易用,但目前 仍存在兼容的问题,许多能使用的浏览器仍需要在其相应的属性和事件加相关的前缀。 【document.fullScreenElement】 该属性表示启动全屏的元素(如 video这些) 【document.fullScreenEnabled】 该属性表示当前是否全屏 【fullscreenchange 事件】 监听全屏状态改变的事件 Full Scrren 相关的css属性 众所周知,说到html,就不得不提css,而fullscreen API 中也有一些关于的css属性: :-webkit-full-screen, :-moz-full-screen, :-ms-fullscreen, :full-screen { /*pre-spec */ /* properties */ } :fullscreen { /* spec */ /* properties */ } /* deeper elements */:-webkit-full-screen video { width: 100%; height: 100%; } /* styling the backdrop*/::backdrop { /* properties */ } ::-ms-backdrop { /* properties */ } 结束语 在屏幕大小有限的移动端,全屏功能显得异常重要,虽然现目前Full Screen API还存在一些兼容问题,但相信这些问题肯定很快会找到解决办法,且这个API肯定也会成为移动互联网时代最常用的API之一。 相关文章:《HTML5学习之页面可见性API》 http://www.maiziedu.com/group/article/7118/

有疑问加站长微信联系(非本文作者)

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

3214 次点击  
加入收藏 微博
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传