浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
如果你想使一个元素在全屏模式下展现 (比如说 <video>)，你可以调用该元素的 requestFullscreen() 方法；这个方法在 Gecko 中的实现是 element.mozRequestFullScreen()，在 WebKit 中为 element.webkitRequestFullscreen()。
比如一个实例：
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
elem.requestFullscreen(); //IE浏览器
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen(); //火狐浏览器
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen(); //谷歌浏览器
}
运行到这里，Gecko 与 WebKit 两个实现中出现了一个值得注意的区别：Gecko 会为元素自动添加 CSS 使其伸展以便铺满屏幕： "width: 100%; height: 100%"。 WebKit 则不会这么做；它会让全屏的元素以原始尺寸居中到屏幕中央，其余部分变为黑色。为了在 WebKit 下也达到与 Gecko 同样的全屏效果，你需要手动为元素增加 CSS 规则"width: 100%; height: 100%;"：
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
代码首先检查了 document 上的 fullscreenElement 属性(也检查了带 -moz- 与 -webkit- 两个前缀的)。如果该属性为 null，则 document 当前处于窗口模式，所以我们需要切换进全屏模式。可以通过调用 element.mozRequestFullScreen() 或者 webkitRequestFullscreen()来进入全屏模式，具体调用哪个还要看哪个方法可用。
如果已经激活了全屏模式 (fullscreenElement 非空)，我们调用 document.mozCancelFullScreen() 或 webkitCancelFullScreen()，同样要依赖于我们使用了哪个浏览器。
以上就是小编为大家带来的浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题全部内容了，希望大家多多支持脚本之家~
相关文章
这篇文章主要介绍了javscript 数组扁平化的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要介绍了RxJS的入门指引和初步应用，RxJS是一个强大的Reactive编程库，提供了强大的数据流组合与控制能力，但是其学习门槛一直很高，本次分享期望从一些特别的角度解读它在业务中的使用，而不是从API角度去讲解。,需要的朋友可以参考下2019-06-06
工作需要写的一个js拖拽组件，需要的朋友可以参考下代码。2011-07-07
用于改变方法的当前对象2008-11-11
这篇文章主要为大家详细介绍了JavaScript实现搜索的数据显示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了JS 中ES6变量的结构赋值的相关资料，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-07-07
有1到100000共10万个数。从中随机抽走两个。再把原来的数字顺序打乱。如何快速找到被抽走的两个数2011-04-04
你也许是位乐于分享的技术人员，尽管你算不上什么技术高手，但是你都希望把自己所知道的通过博客与网友分享。为了让更多人知道你的经验，你可能会努力把博文发布到专业论坛。2009-11-11
用JavaScript来美化HTML的select标签的下拉列表效果
这篇文章主要介绍了用JavaScript来美化HTML的select标签的下拉列表效果的方法,而且在多浏览器下的兼容效果也得到提升,需要的朋友可以参考下2015-11-11
JavaScript没有监听物理返回键的API，所以只能使用 popstate 事件监听。接下来通过本文给大家分享JavaScript监听手机物理返回键的两种解决方法，感兴趣的朋友一起看看吧2017-08-08
最新评论