·您当前的位置:首页 > 技术教程 > Html5技术 >

[html5]html5全屏API

时间:2016-02-17 09:36酷播
[html5]html5全屏API

html5 已经推出全屏功能了

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>

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器