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

不过真的很有效哎。

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