注:提 HTML5 只是说明他是一项新的东西,至于浏览器的 JavaScript API 应不应是 HTML5 的一个配套?我们不纠结。不如看这个接口能给我带来什么,思考可以如何给网页做个体验上的增强应用吧。
一、说在前面的
其实只是一个新的 JavaScript API,让 HTML 元素可以实现全屏显示。不过,这已经足够让我们兴奋。具体是怎样呢?其实这个从 iOS 和 Safari 5.0 就已经可以用在 <video> 上。看一下这个,在 iPhone 上访问 youku 上的一个视频:
我们可以点击中间这个大大的放映按钮,这里 iOS 里的 safari 会把影片全屏显示,使用的就是这个接口。只不过是 Safari 自己实现的接口。依然不是 W3C 标准。如下图:
二、FullScreen JavaScript API 具体使用
1、JavaScript API
FullScreen Javascript API 目前仍是草案,实现这个 API,更确切来说是具有这项功能的浏览器有:Chrome 15 / Firefox Nightly / Safari 5.1。对于 JS API 的前端调用,我们可以先看看下面的代码:
// Webkit (works in Safari5.1 and Chrome 15) element.webkitRequestFullScreen(); document.webkitCancelFullScreen(); // Firefox (works in nightly) element.mozRequestFullScreen(); document.mozCancelFullScreen(); // W3C 提议 element.requestFullscreen(); document.exitFullscreen();
只有两个方法,在需要调用全屏的元素调用 requestFullscreen() 方法,在需要退出时对 document 调用 exitFullscreen() 这个 API。问题不大,只是命名上的不同。
只是,厂商前缀,各浏览器的实现和 W3C 不一致,代码又得写得跟屎一样。我特意把不同用颜色标注出来。绿色的是相同的点,红色的是不同的点。在这一点上倒觉得 W3C 有点奇怪。好不容易 Webkit 和 Mozilla 是一致的,何必改掉命名。既然发,为什么不把 request 发成 enter 与 exit 对应?!。无论如何,至少可以实现,目前 IE 仍没有决定要不要实现这个草案,Johndyer 这样说:“I have an email from a IE team member saying they are discussing it, but have not made any decisions. ” 。呃~
在这里吐槽也没什么用,我们返回正题。浏览器支持 fullscreenchange 事件。让你可以为全屏做更多事。官方草案没有多提,只是略过,这一段来自 Johndyer 的代码,使用的是 Mozilla 的提案,具体使用还需要具体对待:
// Webkit-base: element.onwebkitfullscreenchange // Firefox: element.onmozfullscreenchange // W3C Method: element.addEventListener('fullscreenchange', function(e) { if (document.fullScreen) { /* make it look good for fullscreen */ } else { /* return to the normal state in page */ } }, true);
2. CSS 选择器::fullscreen / :fullscreen-ancestor
这两个选择器的作用是这样的:
- :fullscreen – 当前全屏化的元素
- :fullscreen-ancestor – 所有全屏化元素的祖先元素
对于 :fullscreen 还是比较好理解的,但对于 fullscreen-ancestor 要选出它的全家,而不仅仅是父节点,似乎不能理解其他使用。其实,看一下官方草案提供的 Demo 代码,就知道了:可以隐藏或者什么的。但为什么不把全屏的内容设置为最高级别置顶的元素呢?这一点 W3C 的选择似乎也比较另令想吐槽。看官方 CSS Demo 代码吧:
:fullscreen { position:fixed; top:0; left:0; right:0; bottom:0; z-index:2147483647; background:black; width:100%; height:100%; } /* If there is a fullscreen element that is not the root then we should hide the viewport scrollbar. */ :fullscreen-ancestor:root { overflow:hidden; } :fullscreen-ancestor { /* Ancestors of a fullscreen element should not induce stacking contexts that would prevent the fullscreen element from being on top. */ z-index:auto; /* Ancestors of a fullscreen element should not be partially transparent, since that would apply to the fullscreen element and make the page visible behind it. It would also create a pseudo-stacking-context that would let content draw on top of the fullscreen element. */ opacity:1; /* Ancestors of a fullscreen element should not apply SVG masking, clipping, or filtering, since that would affect the fullscreen element and create a pseudo- stacking context. */ mask:none; clip:none; filter:none; transform:none; }
3. HTML 标签属性: allowFullScreen
像 flash 使用的 <object> 和 <embed> 可以设置是否允许全屏,现在这个特性同样可以应用于 <iframe> 标签。只要添加 allowFullScreen 属性即可:
<!-- content from another site that is allowed to use the fullscreen command --> <iframe width="640" height="360" src="http://anothersite.com/video/123" allowfullscreen=""></iframe>
三、解决方案
一般来说,全屏主要应用还是在视频和游戏。当然,也可以实现像 Mac Lion 一样的全屏显示,就像 Preview.app,全屏的时候使用起来是非常爽的。游戏和视频可以使用 flash 来兼容旧的浏览器和不支持 fullScreen JavaScript API 的浏览器。像 Firefox Nightly( v10 会支持),Chrome 15, Safari 5.1 可以使用 Johndyer 的 jQuery 插件:https://gist.github.com/1354468
四、总结
目前遇到的问题可能是:
- IE 对这个功能的实现没有安排
- 全屏在 Mac 下是浏览器全屏还是内置实现的全屏?Chrome 实现的是 Lion 内置的全屏,而 Safari 本身实现的是浏览器自身的全屏。
- 安全问题,全屏下伪造一个系统登陆框?
- 是否所有元素都应该被全屏内容盖住?
似乎第 1 点和第 3 点是我们比较关注的,也需要去关注的。反而对于 API 的调用是比较简单的,不需要那么多思考。
引用 DEMO: Fullscreen JavaScript API
五、引用文档
1. 参考事件的处理:Let Your Content Do the Talking: Fullscreen API
2. 大部分代码引用这篇文章:Native Fullscreen JavaScript API (plus jQuery plugin)
3. 历史和讨论:Fullscreen HTML5 video
4. 标准与厂商对比:W3C Draft: Fullscreen
相关推荐
在越来越真实的web应用程序中,JavaScript也变得越来越给力. FullScreen API 是一个新的JavaScript ...全屏API requestFullscreen方法在一些老的浏览器里面依然使用带前缀形式的方法名,因此可能需要进行检测判断:(带前缀
点击一个按钮要实现按F11全屏的效果。 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果
由于此插件使用 HTML5 全屏 API,因此文档会完整显示,没有任何额外的浏览器镶边(例如,选项卡)。 ... 的全屏属性? 这个插件添加了一个键绑定,并将全屏元素设置为document.body而不仅仅是 WebGL 画布。 执照 ...
这通常是由于layer自身的动画效果(class="layer-anim")与HTML5全屏API之间的冲突所导致的。为了解决这个问题,可以在layer弹出层成功创建后,通过setTimeout函数延迟移除该类名。这样,全屏操作就不会受到layer...
通过HTML5全屏API全屏支持 通过HTML5 Visibility API自动暂停/启动 两个Joystikcs的Keyborad键设置对话框 屏幕操纵杆支持,通过NippleJS为手机和平板电脑提供触摸控制 通过HTML5 Gamepad API支持操纵杆 轻松与第三方...
为了实现全屏功能,HTML5定义了两个API:`requestFullscreen()` 和 `exitFullscreen()`。这两个方法分别用于进入和退出全屏模式。需要注意的是,这些方法必须在用户的交互事件(如点击按钮)触发后执行,因为浏览器...
HTML5的诞生给我们提供了很多精彩的JavaScript和HTML新功能和新特征。有些新特征我们已知多年并大量的...强大的全屏API接口能让程序员通过编程启动浏览器进入全屏模式,并请求用户的允许: 复制代码代码如下:// Find t
利用JavaScript和Html5提供的一些API进入全屏,JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境...
人们一直注意到Fullscreen API标准存在较小和较大的问题,我们很乐意为您解决这些问题。 也欢迎出现印刷和语法错误的请求请求。 我们很乐意指导您完成此过程。 如果您有兴趣并且需要入门帮助,请对该问题发表评论或...
html5 threecanvas.js全屏3D大雪花飘落动画特效 导入后直接使用,经过二次开发补充参数配置,开发基本够用了 效果:http://www.api1000.com
全屏API(Fullscreen API) 该API允许开发者以编程方式将Web应用程序全屏运行,使Web应用程序更像本地应用程序。 复制代码代码如下:// 找到适合浏览器的全屏方法 function launchFullScreen(element) { if...
说来话长,长话短说,关于 html5 的拖拽 api 也只是做过一些拖拽排序的例子.其实思路上与其他拖拽上传组件基本一样,都是指定一个区域可拖拽,然后读取文件在上传 先说说拖拽 api,这个是 html5 新增的一个 api,给一个...
手机页面强制横屏显示 竖屏会有手机旋转遮罩提示 之前整理的文件 现在清理电脑,先上传,以备下次使用...
video.js HTML5播放器插件API调用实例,HTML5的,Flash和其他播放技术都有不同的JavaScript API与视频交互。video.js提供了一个单一的API,可用于跨平台一致,所以你只需要编写一次代码。Video.js自定义Flash后备...
video.js提供了一个通用控件内置的HTML / CSS的皮肤,修复跨浏览器的不一致,增加了附加功能,如全屏和字幕,管理退回到Flash或其他播放技术,不支持HTML5视频时,也提供了一个一致与视频交互的JavaScript API。...
Video.Js提供了一个通用控件内置的HTML / CSS的皮肤,修复跨浏览器的不一致,增加了附加功能,如全屏和字幕,管理退回到Flash或其他播放技术,不支持HTML5视频时,也提供了一个一致与视频交互的JavaScript API。...
现代浏览器提供了全屏API,允许开发者将页面或页面的部分元素置入全屏模式。这些API在不同的浏览器中有不同的实现方式,但主要遵循W3C的标准。以下是主要的全屏API方法: 1. **requestFullScreen()**:这个方法用于...