当前位置: 首页 > news >正文

vue3+ts实时播放视频,视频分屏

使用vue3以及播放视频组件Jessibuca
Jessibuca地址
使用循环个数来实现分屏

效果图,四屏在这里插入图片描述
九屏
在这里插入图片描述

dom代码

<div class="icon"><div class="icon-box"><span class="text">分屏:</span><el-icon class="iconsty" @click="oneVideo" style="margin-right: 24px;" title="单屏"><ele-FullScreen /></el-icon><el-icon class="iconsty" @click="fourVideo" style="margin-right: 24px;" title="四屏"><ele-Menu /></el-icon><el-icon class="iconsty" @click="nightVideo" title="九屏"><ele-Grid /></el-icon></div><div class="right-tetx" @click="allVedio" style="margin-right: 24px;" title="全屏">全屏</div>
</div>
<div class="videobox"><JessibucaDemo ref="JessibucaDemoRef" @click="videoBtn(index, item)" :style="liveStyle" v-for="(item, index) in state.spilt" :key="index" :class="state.videoIndex === index ? 'PlayVideo active' :'PlayVideo'" />
</div>

事件

import { reactive, ref } from 'vue';
const state = reactive({spilt: 1,videoIndex: 0
})
// 分频样式
const liveStyle = computed<any>(() => {let style = { width: '100%', height: '100%' }switch (state.spilt) {case 4:style = { width: '50%', height: '50%' }breakcase 9:style = { width: '33.33%', height: '33.333%' }break}return style
});// 单频
const oneVideo = () => {state.videoIndex = 0state.spilt = 1
}
// 四频
const fourVideo = () => {state.videoIndex = 0state.spilt = 4
}
// 九频
const nightVideo = () => {state.videoIndex = 0state.spilt = 9
}

样式

.icon{display: flex;justify-content: space-between;z-index: 999;color: #000;.icon-box{display: flex;align-items: center;.text{font-size: 20px;}.iconsty{font-size: 20px;cursor: pointer;}}.right-tetx{font-size: 20px;cursor: pointer;}
}
.videobox{height: 70vh;display: flex;width: 100%;align-content: flex-start;justify-content: center;flex-wrap: wrap;
}
// 实时视频
.PlayVideo{position: relative;background-color: #000;.borderBox{z-index: 99999;position: absolute;width: 100% !important;top: 0;left: 0;height: 100% !important;border: 1px solid blue;}
}
.PlayVideo {border: 1px solid #505050;
}
::v-deep .is-active{background-color: rgba(20, 157, 251, 1);color: #fff;
}
.active{border: 2px solid blue !important;
}

全屏事件
下载依赖包
npm i screenfull@6.0.2

// 全屏
import screenfull from 'screenfull'
const allVedio = () => {//获取dom元素节点来实现指定元素全屏展示let el = document.querySelector('.videobox')//screenfull.isEnabled  此方法返回布尔值,判断当前能不能进入全屏if (!screenfull.isEnabled) {return false}//screenfull.toggle 此方法是执行全屏化操作。如果已是全屏状态,则退出全屏screenfull.toggle(el)
}

相关文章:

vue3+ts实时播放视频,视频分屏

使用vue3以及播放视频组件Jessibuca Jessibuca地址 使用循环个数来实现分屏 效果图&#xff0c;四屏 九屏 dom代码 <div class"icon"><div class"icon-box"><span class"text">分屏&#xff1a;</span><el-icon …...

【网页设计】学成在线案例

Demo 典型的企业级网站&#xff0c;目的是为了整体感知企业级网站的布局流程&#xff0c;复习以前知识。 集合代码见文章最后。 5.1 准备素材和工具 学成在线 PSD 源文件。开发工具 PS&#xff08;切图&#xff09; sublime&#xff08;代码&#xff09; chrome&#xff0…...

一篇文章总结 SQL 基础知识点

1. 官方文档 MySQL&#xff1a;https://dev.mysql.com/doc/refman/8.4/en/ SQL Server&#xff1a;What is SQL Server? - SQL Server | Microsoft Learn Oracle&#xff1a;https://docs.oracle.com/en/database/oracle/oracle-database/23/lnpls/loe.html 2. 术语 SQL S…...

vue Element U 解决表格数据不更新问题

最近在使用 Vue 和 Element UI 开发后台管理系统时&#xff0c;操作表单数据重新请求表格接口后遇到表格数据不更新的问题。后面查阅了些资料&#xff0c;这通常是由于 Vue 的响应式系统没有检测到数据的变化&#xff0c;或者数据更新后没有正确地触发视图的重新渲染。以下是一…...

PeView 命令行PE文件解析工具

PeView 是一款基于C/C开发的命令行版PE文件解析工具&#xff0c;专门用于解析Windows可执行文件并提供详尽的文件结构和交互式查询功能&#xff0c;帮助用户理解和分析目标程序的内部构成&#xff0c;是逆向分析和软件调试中的重要工具&#xff0c;本次分享工具源代码及使用方法…...

微信小程序25__实现卡片变换

先看效果图 实现代码如下&#xff1a; <view class"page" style"filter:hue-rotate({{rotation}}deg)"><view class"prev" catchtap"toPrev">《《《</view><view class"next" catchtap"toNext&q…...

使用Git进行团队协作开发

使用Git进行团队协作开发 Git简介 安装Git 在Windows上安装Git 在macOS上安装Git 在Linux上安装Git 设置Git用户信息 创建Git仓库 基本Git命令 添加文件 提交更改 查看状态 克隆仓库 推送更改 获取更改 分支管理 创建分支 切换分支 合并分支 删除分支 解决合并冲突 检查冲突…...

期货跟单、量化交易模拟演示系统

一、跟单下单 在“排行榜”中选择要跟单的用户&#xff0c;合约可以跟全部&#xff0c;也可以指定跟该用户的某一合约操作&#xff0c;选定跟单的倍数&#xff08;操作手数的倍数&#xff09;/手数&#xff08;指定手数&#xff0c;可以不是对方的倍数&#xff09;&#xff0c;…...

Python小白学习教程从入门到入坑------第十八课 异常模块与包【下】(语法基础)

一、内置全局变量__name__ 在Python中&#xff0c;有一些内置的全局变量和特殊变量&#xff0c;它们是由Python解释器预定义的&#xff0c;可以在代码的任何地方直接使用。 这些变量通常用于提供关于当前解释器状态的信息&#xff0c;或者用于控制解释器的行为 在Python中&a…...

arcgis pro 3.3.1安装教程

一、获取方式&#xff1a; http://dt4.8tupian.net/2/29913a61b1500.pg3二、软件目录&#xff1a; 三、安装步骤&#xff1a; &#xff08;1&#xff09;安装软件运行环境windowsdesktop-runtime 8.0.4; &#xff08;2&#xff09;选中安装文件arcgispro_33zh_cn_190127.exe&…...

Spring 获取Cookie/Session

获取Cookie/Session Cookie & Session获取Cookie传统方法获取使用 Spring 获取 Cookie 获取Session传统方法使用 SpringBoot 获取 Session简洁获取 Session HTTP协议 自身是属于 无状态协议(默认情况下 HTTP 协议的客户端与服务端的这次通信&#xff0c;和下次的通信之间没…...

小红书接口数据查询优化指南

小红书&#xff0c;作为分享生活、购物心得与美妆护肤经验的热门社交媒体平台&#xff0c;对开发者而言&#xff0c;其数据接口具有极高的实用价值。本指南将聚焦于如何通过接口高效查询小红书数据&#xff0c;并提供清晰的步骤与示例代码。 一、前置准备 在深入查询之前&…...

数据结构 - 图

文章目录 一、图的基本概念二、图的储存结构1、邻接矩阵2、邻接表 三、图的遍历1、广度优先遍历2、深度优先遍历 四、最小生成树1、概念2、Kruskal算法3、Prim算法 五、最短路径问题1、单源最短路径--Dijkstra算法2、单源最短路径--Bellman-Ford算法3、多源最短路径--Floyd-War…...

如何在Linux系统中管理和优化Swap空间

如何在Linux系统中管理和优化Swap空间 Swap空间简介 检查Swap空间 创建Swap空间 创建Swap文件 创建Swap分区 配置Swap空间 编辑fstab文件 设置vm.swappiness Swap使用策略 调整vm.vfs_cache_pressure 设置vm.min_free_kbytes Swap空间的监控 使用top命令 使用free命令 Swap…...

瑞格智慧心理服务平台 NPreenSMSList.asmx sql注入漏洞复现

0x01 产品描述&#xff1a; ‌ 瑞格智慧心理服务平台‌是一个集心理测评、心理咨询、心理危机干预、心理放松训练等功能于一体的综合性心理健康服务平台。该平台由北京瑞格心灵科技有限公司开发&#xff0c;旨在为用户提供全方位的心理健康服务。0x02 漏洞描述&#xff1a;…...

大模型是否具备推理能力?解读苹果新论文:GSM-Symbolic和GSM8K

在人工智能领域&#xff0c;大模型的推理能力一直备受关注。OpenAI的GPT-4和其他大模型的表现令人惊叹&#xff0c;但究竟是否具备真正的数学推理和抽象逻辑能力&#xff1f;最近&#xff0c;苹果的研究人员发表了一篇题为“GSM-Symbolic&#xff1a;理解大语言模型中数学推理的…...

自动化部署-02-jenkins部署微服务

文章目录 前言一、配置SSH-KEY1.1 操作jenkins所在服务器1.2 操作github1.3 验证 二、服务器安装git三、jenkins页面安装maven四、页面配置自动化任务4.1 新建任务4.2 选择4.3 配置参数4.4 配置脚本 五、执行任务5.1 点击执行按钮5.2 填写参数5.3 查看日志 六、查看服务器文件七…...

HTB:Analytics[WriteUP]

目录 连接至HTB服务器并启动靶机 1.How many open TCP ports are listening on Analytics? 2.What subdomain is configured to provide a different application on the target web server? 3.What application is running on data.analytical.htb? 4.What version of…...

【每日题解】3211. 生成不含相邻零的二进制字符串

给你一个正整数 n。 如果一个二进制字符串 x 的所有长度为 2 的 子字符串 中包含 至少 一个 "1"&#xff0c;则称 x 是一个 有效 字符串。 返回所有长度为 n 的 有效 字符串&#xff0c;可以以任意顺序排列。 示例 1&#xff1a; 输入&#xff1a; n 3 输出&a…...

Nginx、Tomcat等项目部署问题及解决方案详解

目录 前言1. Nginx部署后未按预期显示结果1.1 查看Nginx的启动情况1.2 解决启动失败的常见原因 2. 端口开启问题2.1 Windows环境下的端口开放2.2 Linux环境下的端口开放 3. 重视日志分析3.1 Nginx日志分析3.2 Tomcat日志分析 4. 开发环境与部署后运行结果不同4.1 开发环境与生产…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

MySQL账号权限管理指南:安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

MacOS下Homebrew国内镜像加速指南(2025最新国内镜像加速)

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

django blank 与 null的区别

1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是&#xff0c;要注意以下几点&#xff1a; Django的表单验证与null无关&#xff1a;null参数控制的是数据库层面字段是否可以为NULL&#xff0c;而blank参数控制的是Django表单验证时字…...

适应性Java用于现代 API:REST、GraphQL 和事件驱动

在快速发展的软件开发领域&#xff0c;REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名&#xff0c;不断适应这些现代范式的需求。随着不断发展的生态系统&#xff0c;Java 在现代 API 方…...

【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...