使用FullScreen让Video全屏
时间：2022-11-29 12:07:16 | 来源：网友投稿
经常有网友提到需要让video全屏。其他让video全屏不难，难就难在兼容性。
如果光使用FullScreen api就能全屏的话，就简单了。主要是各种浏览器对w3c的标准用的api不一样。
比如：火狐的Gecko内核要用moz前缀，webkit内核的要用webkit，ms代表IE的前缀，o代表Opera前缀。
下面看看全屏的主要代码：
// 判断各种浏览器，找到正确的方法function launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if(element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if(element.msRequestFullscreen) { element.msRequestFullscreen(); }}// 启动全屏!launchFullScreen(document.documentElement); // 整个网页// 某个页面元素launchFullScreen(document.getElementById("videoElement"));
该全屏api在被调用时，会弹出一个等待用户确认的通知，只有用户允许了才会全屏。
任何页面元素都可以成为全屏输出的目标，HTML5里甚至还提供了一个CSS伪类来让程序员在浏览器全屏时控制全屏元素的样式。当你在开发游戏时这个全屏API接口特别有用；尤其像BananaBread这样的枪击游戏中。
反过来，有全屏就有退出全屏。退出全屏我们使用exitFullscreen()函数。但是退出全屏不需要浏览器通知用户进行允许提示。
// 判断浏览器种类function exitFullscreen() {if(document.exitFullscreen) {document.exitFullscreen();} else if(document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if(document.webkitExitFullscreen) {document.webkitExitFullscreen();}}// 退出全屏模式!exitFullscreen();
exitFullscreen只能由document对象调用，而不是启动全屏时传入的对象。
另外w3c也提供了全屏事件，全屏属性和事件的相关方法也需要添加浏览器前缀。
- document.fullScreenElement: 全屏显示的网页元素。
- document.fullScreenEnabled: 判断当前是否处于全屏状态。
fullscreenchange事件会在启动全屏或退出全屏时触发：
var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;
全屏样式CSS
各种浏览器都提供了一个非常有用的全屏模式时的css样式规则：
:-webkit-full-screen {/* properties */}:-moz-full-screen {/* properties */}:-ms-fullscreen {/* properties */}: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 */}
这些api看起来很强大，赶紧上手试一试吧！
#免责声明#
站长收录网提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件2533742662@qq.com与我们联系处理。敬请谅解！
