视频自定义全屏功能——兼容安卓和ios

视频窗口

    <div class="relative bg-black" style="width: 100%; height: 30vh">
      <div id="currentVideo" class="w100 h100 absolute">
        <div class="absolute flex_r w100" style="bottom: 0">
          <div
            v-show="!big"
            class="pd-6"
            @click="screenClick(1)"
            style="background: rgba(0, 0, 0, 0.3)"
          >
            <el-icon style="z-index: 999">
              <FullScreen />
            </el-icon>
          </div>
          <div
            v-show="big"
            @click="screenClick(2)"
            class="pd-6 mg-10"
            style="background: rgba(0, 0, 0, 0.3)"
          >
            <el-icon style="z-index: 999">
              <FullScreen />
            </el-icon>
          </div>
        </div>
      </div>
      <div v-show="speekName" class="absolute green flex_r w100">
        {{ speekName }}在说话
      </div>
    </div>

js

// ------------------------------------ 全屏------------------------------
//全屏
let big = ref(false);

function getDeviceType() {
  const ua = navigator.userAgent.toLowerCase();

  if (/android/.test(ua)) {
    return "Android";
  } else if (/iphone|ipad|ipod/.test(ua)) {
    return "iOS";
  } else {
    return "Unknown";
  }
}

const deviceType = getDeviceType();
console.log(`当前设备类型: ${deviceType}`);

function screenClick(type) {
  // type  1 放大 2 缩小
  if (deviceType === "Android") {
    screenAndroidClick();
  } else {
    if (type == 1) {
      simulateFullscreen();
    } else {
      exitFullscreen();
    }
  }
}
// 判断当前是否处于全屏模式
function fullScreen() {
  return (
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.msFullscreenElement
  );
}
// 安卓的全屏和缩小
function screenAndroidClick() {
  if (fullScreen()) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      /* Safari */
      document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      /* IE11 */
      document.msExitFullscreen();
    }
    big.value = false;
  } else {
    var elem = document.querySelector("#currentVideo");
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.webkitRequestFullscreen) {
      /* Safari */
      elem.webkitRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.msRequestFullscreen) {
      /* IE11 */
      elem.msRequestFullscreen();
    }
    big.value = true;
  }
}
// ios的全屏
function simulateFullscreen() {
  // 设置全屏样式
  const element = document.getElementById("currentVideo");
  element.style.position = "fixed";
  element.style.top = 0;
  element.style.left = 0;
  element.style.width = "100vw";
  element.style.height = "100vh";
  element.style.zIndex = 9999; // 确保覆盖其他内容
  element.style.backgroundColor = "#000"; // 可选: 设置背景色
  console.log(1111111111, "ios打");
  big.value = true;
}
// ios的缩小
function exitFullscreen() {
  const element = document.getElementById("currentVideo");
  element.style.position = "";
  element.style.top = "";
  element.style.left = "";
  element.style.width = "";
  element.style.height = "";
  element.style.zIndex = "";
  element.style.backgroundColor = "";
  console.log(222222222222, "ios小啊");
  big.value = false;
}