Bootstrap

video标签自定义全屏按钮和退出全屏

// 全屏
    _allScreen(r) {
      this.isAll = true;
      console.log(r.videoId, r);
      this.screenId = r.videoId;
      var videoElement = document.getElementById(r.videoId); // 获取到html中的video标签
      const videoElement1 = document.getElementById("V_" + r.videoId); // 获取到html中的video标签
      // this.type = "allScreen";
      let doc = this.type == "phone" ? videoElement1 : videoElement1;
      if (doc.requestFullscreen) {
        doc.requestFullscreen();
      } else if (doc.webkitRequestFullScreen) {
        doc.webkitRequestFullScreen();
      } else if (doc.mozRequestFullScreen) {
        doc.mozRequestFullScreen();
      } else if (doc.msRequestFullscreen) {
        // IE11
        doc.msRequestFullscreen();
      }
    },
    // 退出全屏
    exitFullscreen(r) {
      this.isAll = false;
      var videoElement = document.getElementById(r.videoId);
      let doc = this.type == "phone" ? document : document;
      // var videoElement = document.getElementById("V_" + r.videoId);
      if (doc.exitFullscreen) {
        doc.exitFullscreen();
      } else if (doc.webkitCancelFullScreen) {
        doc.webkitCancelFullScreen();
      } else if (doc.mozCancelFullScreen) {
        doc.mozCancelFullScreen();
      } else if (doc.msExitFullscreen) {
        doc.msExitFullscreen();
      }
    },
;