只此一招,全屏操作从此易如反掌

174 阅读1分钟

哈哈,大家原谅我这标题太唬人了……

不过真的很有效哎。

以前对付全屏需求,我的做法是重新写一套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,如果是写在元素之外的,那么不会出现,需要将之写在元素内部。