哈哈,大家原谅我这标题太唬人了……
不过真的很有效哎。
以前对付全屏需求,我的做法是重新写一套css,触发事件之后给顶层节点加上class。这样的做法麻烦,不够美观,容易出错。
最近才知道有一种更方便、快捷、优雅、安全的做法。
原来H5自带全屏api啊!
而且全屏效果很酷炫有木有!
废话不多少,直接上代码吧。
//切换全屏效果export function toggleFullScreen(videoElement) { if ( !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.fullscreenElement && !document.FullscreenElement ) { if (videoElement.mozRequestFullScreen) { videoElement.mozRequestFullScreen(); } else if (videoElement.webkitRequestFullScreen) { videoElement.webkitRequestFullScreen(); } else if (videoElement.requestFullscreen) { videoElement.requestFullscreen(); } else if (videoElement.msRequestFullscreen) { videoElement.msRequestFullscreen(); } } else { if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.fullscreen) { document.exitFullscreen(); } else { document.msExitFullscreen(); } }}//验证是否全屏
export function checkFull() { if ( !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.fullscreenElement && !document.FullscreenElement ) { return false; } else { return true; }}//监听全屏事件
this.$parent.$el.addEventListener("fullscreenchange", function() { if (checkFull()) { self.isFullScreen = true; } else { self.isFullScreen = false; } }); this.$parent.$el.addEventListener("webkitfullscreenchange", function() { if (checkFull()) { self.isFullScreen = true; } else { self.isFullScreen = false; } });
this.$parent.$el.addEventListener("mozfullscreenchange", function() { if (checkFull()) { self.isFullScreen = true; } else { self.isFullScreen = false; } });
this.$parent.$el.addEventListener("MSFullscreenChange", function() { if (checkFull()) { self.isFullScreen = true; } else { self.isFullScreen = false; } });
有两个需要注意的地方:
1,不同浏览器的兼容写法。
2,元素全屏后,某些功能可能会失效,比如modal,如果是写在元素之外的,那么不会出现,需要将之写在元素内部。