中国新闻最新消息简要_贪玩游戏官网_网络营销的六大特征_网络销售公司经营范围

视频窗口

    <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"><divv-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><divv-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;
}