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

news/2024/12/13 23:24:26/

视频窗口

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

http://www.ppmy.cn/news/1554876.html

相关文章

【OpenCV】视频录制

介绍 在 OpenCV 中&#xff0c;视频录制涉及到读取摄像头或视频文件的帧&#xff0c;并将这些帧保存到新的视频文件中。为了实现这个过程&#xff0c;你需要创建一个 VideoCapture 对象来获取视频帧&#xff0c;以及一个 VideoWriter 对象来保存视频帧。以下是使用 OpenCV 进行…

四、vue多事件处理器

<template> <view> <!-- 这两个 one() 和 two() 将执行按钮点击事件 --> <button click"one($event); two($event)"> Submit </button> </view> </t…

经纬度解析到省市区【开源】

现在业务中有需要解析经纬度到省市区。 按理说可以直接使用高德&#xff0c;百度之类的。 但是老板太抠。于是去找开源项目。找了一圈&#xff0c;数据都太老了&#xff0c;而且有时候编码还不匹配。 所以诞生了这个项目&#xff0c;提供完整的一套省市区编码和定位反解析。…

软考中级-软件设计师通过心路经验分享

执念&#xff0c;第四次终于通过了 没买书&#xff0c;下班后每天2小时&#xff0c;四个2个月终于过了 学习经验&#xff1a; 1.下班后学习真的靠毅力&#xff0c;和上学的时候考证不是一个状态&#xff0c;大家要及时调整&#xff0c;否则过程很痛苦 2.失败三次的经验&#xf…

自定义生成小游戏提现截图工具的设计与实现

摘要 在游戏开发和测试过程中&#xff0c;开发者经常需要生成游戏截图以展示游戏界面或用于测试。本文将介绍一个自定义生成小游戏截图的工具&#xff0c;该工具可以帮助开发者快速生成游戏界面截图&#xff0c;以满足不同场景下的需求。 视频演示 引言 随着移动游戏市场的迅…

iview date-picker options只可选当前日期之前的

iview date-picker options只可选当前日期之前的 如果日期对象date的时间戳大于当前时间的时间戳&#xff0c;则该日期在当前日期之后&#xff0c;会被禁用。 <template><Row><Col span"12"><DatePickertype"datetime":options&qu…

如何使用 NuGet 程序包管理器

快速入门&#xff1a;在 Visual Studio 中安装和使用 NuGet 包&#xff08;仅适用于 Windows&#xff09; NuGet 包 包含其他开发人员已提供的在项目中使用的可重用代码。 可以使用 NuGet 包管理器、包管理器控制台或 .NET CLI 在 Microsoft Visual Studio 项目中安装 NuGet 包…

前端视角下的Go语法学习:创建 Go 项目

今日话题 使用 GoLand 创建 Go 项目 作者&#xff1a; 时间&#xff1a;2024年6月20日 17时16分14秒 主线任务 一、GoLand 创建项目 1、点击 “new Project” 按钮 2、已经有下载过两个 Golang SDK 版本&#xff0c;选择版本创建即可~ 3、如果没有下载过Golang SDK&#…