video标签点击播放时直接全屏显示，播放完成后变成之前的样子

video的两个事件play 和 ended

全屏显示，参考了

版权声明：本文为CSDN博主「CurryChou777」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/m0_37727560/article/details/106024057

最后实现就是：

template模板中：

              <video
                src="http://haier-dev.oss-cn-beijing.aliyuncs.com/upload/daily/211026/1635231357.mp4"
                controls="controls"
                @play="handleFullScreen"
                @ended="handleExitFullScreen"
                style="width:200px;"
              >
                <!-- your browser does not support the video tag -->
              </video>

 script的methods中：

     handleFullScreen(e) {
      this.launchFullscreen(e.target);
    },
    // 进入全屏
    launchFullscreen(element) {
      //此方法不可以在異步任務中執行，否則火狐無法全屏
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.oRequestFullscreen) {
        element.oRequestFullscreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullScreen();
      } else {
        var docHtml = document.documentElement;
        var docBody = document.body;
        var videobox = element;
        var cssText = "width:100%;height:100%;overflow:hidden;";
        docHtml.style.cssText = cssText;
        docBody.style.cssText = cssText;
        videobox.style.cssText = cssText + ";" + "margin:0px;padding:0px;";
        document.IsFullScreen = true;
      }
    },
    handleExitFullScreen(e) {
      this.exitFullscreen(e.target);
    },  
    exitFullscreen(element) {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.oRequestFullscreen) {
        document.oCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else {
        var docHtml = document.documentElement;
        var docBody = document.body;
        var videobox = element;
        docHtml.style.cssText = "";
        docBody.style.cssText = "";
        videobox.style.cssText = "";
        document.IsFullScreen = false;
      }
    },