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

小曲曲

于 2024-08-15 17:55:44 发布

阅读量24

点赞数 1

分类专栏： js 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_43848576/article/details/141228405

版权

js 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

// 全屏
    _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();
      }
    },