html5video按钮点击全屏 h5全屏显示

转载

mob64ca14101b2f 2023-11-29 09:33:24

文章标签 html5video按钮点击全屏 javascript ViewUI 全屏 Web 文章分类 HTML5 移动开发

全屏功能是浏览器很早就支持的一项功能了，可以让你页面中的video, image ,div 等等子元素实现全屏浏览，从而带来更好的视觉体验，来看看怎么使用吧。先来看看有哪些API和事件支持。

API

// 元素请求全屏显示  
element.requestFullscreen() // 检测文档的当前状态是否允许执行全屏操作 document.fullscreenEnabled() //当前显示的元素是否处于全屏状态，如果处于，则返回为非空对象，否则返回null document.fullscreenElement() //元素退出全屏显示 document.exitFullscreen() 

// 元素请求全屏显示  
element.requestFullscreen() // 检测文档的当前状态是否允许执行全屏操作 document.fullscreenEnabled() //当前显示的元素是否处于全屏状态，如果处于，则返回为非空对象，否则返回null document.fullscreenElement() //元素退出全屏显示 document.exitFullscreen()

上面除了RequestFullscreen()是支持element 对象以外，其他3个都只是支持document.

Event

fullscreenchange   // 全屏状态更改时触发

fullscreenerror  //  执行全屏错误时触发

fullscreenchange   // 全屏状态更改时触发

fullscreenerror  //  执行全屏错误时触发

由于每个浏览器实现的方式不一样，所以我们实际的调用中还不能直接这样写，需要针对不同的浏览器做支持检测，下面跟着详细的例子看下具体兼容代码。

html

<body>
<img id="imgFS" src=""/> <a id="btnFS" href="javascript:;"> FullScreen </a> </body>

javascript

var fullScreen = document.getElementById('btnFS'); fullScreen.addEventListener("click", function(){ var status = document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullscreenEnabled || document.msFullscrrenEnabled; if (status) { var img = document.getElementById("imgFS"); if (img.requestFullscreen) { img.requestFullscreen(); } else if (img.msRequestFullscreen) { // IE img.msRequestFUllscreen(); } else if (img.mozRequestFullscreen) { // Firefox (Gecko) img.mozRequestFullscreen(); } else if (img.webkitRequestFullscreen) { // Webkit img.webkitRequestFullscreen(); } } else { alert("The document not allowed to fullscreen."); } }); 
var fullScreen = document.getElementById('btnFS'); fullScreen.addEventListener("click", function(){ var status = document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullscreenEnabled || document.msFullscrrenEnabled; if (status) { var img = document.getElementById("imgFS"); if (img.requestFullscreen) { img.requestFullscreen(); } else if (img.msRequestFullscreen) { // IE img.msRequestFUllscreen(); } else if (img.mozRequestFullscreen) { // Firefox (Gecko) img.mozRequestFullscreen(); } else if (img.webkitRequestFullscreen) { // Webkit img.webkitRequestFullscreen(); } } else { alert("The document not allowed to fullscreen."); } });

以上代码针对一个图片元素进行了全屏操作的例子，上文中的全屏触发是通过监听一个按钮来实现的，这个地方需要注意的是，假如你想在页面载入后就触发全屏，这个事件是不会触发执行全屏显示的。只有通过例如click, keydown等触发事件，才可以启用全屏显示的功能。

监听键盘按钮触发

下面的代码示例通过按键F12来触发启用或者关闭的操作，主要是利用了element.fullscreenElement 方法来判断当前的文档状态，来进行切换的，具体代码如下：

document.addEventListener("keydown", function(e){ console.log(e.keyCode); if (e.keyCode == 123) { // keypress fn + F12 for Mac fullscreen(); } }); function fullscreen() { var body = document.body; var status = !document.fullscreenElement && // get the screen status !document.msFullscreenElement && !document.mozFullscreenElement && !document.webkitFullscreenElement; if (status) { if (body.requestFullscreen) { body.requestFullscreen(); } else if (body.mozRequestFullscreen) { body.mozRequestFullscreen(); } else if (body.webkitRequestFullscreen) { body.webkitRequestFullscreen(); } else if (body.msRequestFullscreen) { body.msRequestFUllscreen(); } } else { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozExitFullscreen) { document.mozExitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } } 
document.addEventListener("keydown", function(e){ console.log(e.keyCode); if (e.keyCode == 123) { // keypress fn + F12 for Mac fullscreen(); } }); function fullscreen() { var body = document.body; var status = !document.fullscreenElement && // get the screen status !document.msFullscreenElement && !document.mozFullscreenElement && !document.webkitFullscreenElement; if (status) { if (body.requestFullscreen) { body.requestFullscreen(); } else if (body.mozRequestFullscreen) { body.mozRequestFullscreen(); } else if (body.webkitRequestFullscreen) { body.webkitRequestFullscreen(); } else if (body.msRequestFullscreen) { body.msRequestFUllscreen(); } } else { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozExitFullscreen) { document.mozExitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } }

全屏样式

全屏效果下，可以启用针对该状态下的特定样式，从而达到更好的浏览效果。样式定义如下：

:-webkit-full-screen { // Webkit
} :-moz-full-screen { // Gecko } :-ms-fullscreen { // IE } :fullscreen { } // 调用示例 #elementID :fullscreen { width:100%; height:100%; } :fullscreen::backdrop { // 背光 } // 全屏背光，这是一个新的样式属性，但是目前浏览器支持的的都不太好， 在IE11中被支持，另外下面提到的Opera12.1,使用了:fullscreen-ancestor， 调用方法如下 :-ms-fullscreen::-ms-backdrop { background-color: #000; } 
:-webkit-full-screen { // Webkit
} :-moz-full-screen { // Gecko } :-ms-fullscreen { // IE } :fullscreen { } // 调用示例 #elementID :fullscreen { width:100%; height:100%; } :fullscreen::backdrop { // 背光 } // 全屏背光，这是一个新的样式属性，但是目前浏览器支持的的都不太好， 在IE11中被支持，另外下面提到的Opera12.1,使用了:fullscreen-ancestor， 调用方法如下 :-ms-fullscreen::-ms-backdrop { background-color: #000; }

在这个地方需要注意的是，Gecko和Webkit在全屏状态下显示是有差异的，Gecko会默认把指定的全屏元素进行width:100%;height:100%,而Webkit则是显示一片黑色，所以这个地方就需要针对全屏的元素进行样式调整了，参考以上代码示例。

浏览器兼容情况

参考地址：Caniuse

另外上面有说道下面几个问题，可以注意下。

IE11全屏状态下是不允许滚动的
IE11 并不允许通过keydown or pointerdown事件来触发msRequestFullscreen()，keypress 和click没有问题
IE11对iframe中使用全屏支持的并不是很好
在全屏模式中Safari阻塞了keyboard事件（出于安全考虑），但是我上面代码中，在Yosmite中，通过监听F12，Safari是可以正常工作的
Opera 12.1 使用老的标准:fullscreen-ancestor 伪类替代了 ::backdrop伪元素