html用css grid实现自适应四宫格放视频
想同时播放四个本地视频：
- 四宫格；
- 自式应，即放缩浏览器时，四宫格也跟着放缩；
- 尽量填满页面（F11 浏览器全屏时可以填满整个屏幕）。
在 html 中放视频用 video 标签，参考 [1]；参考 [2,3] 用 css 的 grid 实现自适应九宫格的方法，grid 的介绍见 [3]。
Code
- code base 是 [2] 的方案 1。
- 参考 [3] 用
* {...}去除 padding、margin；单位vh详见 [5]； - 默认黑背景（视频没有内容的地方黑边）；
- 视频默认静音：
muted
<!doctype html>
<html>
<head><meta charset="UTF-8"><title>test</title><style>* {/* 去掉四围空白 */padding: 0;margin: 0;/* 黑背景 */background: #000000;}body {/* vw/vh：viewport 宽/高的 1% */height: 100vh;/* width: 100vw; */}.container {/* grid 布局的样式 */display: grid;width: 100%;height: 100%;/* 2x2，各占一半宽/高 */grid-template-columns: repeat(2, 50%);grid-template-rows: repeat(2, 50%);/* 宫格之间的间隔（以前是 grid-row/column-gap） */row-gap: 0;column-gap: 0;}.item {/* 这个只是 debug 用的示例框，看宫格内容的大小 */border: 1px solid red;color: red;text-align: center;}</style>
</head><body>
<div class="container"><video width=100% height=100% controls muted><source src="D:/幺妹儿冯宝宝.mp4" type="video/mp4"></video><div class="item">2</div> <!-- 占位框 --><div class="item">3</div> <!-- 占位框 --><video width=100% height=100% controls muted><source src="D:/王也踏青.mp4" type="video/mp4"></video>
</div>
</body>
</html>
References
- HTML <video> Tag
- CSS–九宫格布局(自适应)–方法/教程/实例
- CSS Grid 网格布局实现自适应9宫格
- CSS Grid 网格布局教程
- CSS Units
相关文章：
html用css grid实现自适应四宫格放视频
想同时播放四个本地视频： 四宫格；自式应，即放缩浏览器时，四宫格也跟着放缩；尽量填满页面（F11 浏览器全屏时可以填满整个屏幕）。 在 html 中放视频用 video 标签，参考 [1]࿱…...
【机器学习可解释性】5.SHAP值的高级使用
机器学习可解释性 1.模型洞察的价值2.特征重要性排列3.部分依赖图4.SHAP 值5.SHAP值的高级使用 正文 汇总SHAP值以获得更详细的模型解释 总体回顾 我们从学习排列重要性和部分依赖图开始，以显示学习后的模型的内容。 然后我们学习了SHAP值来分解单个预测的组成部…...
CentOS开机自动运行jar程序实现
前面已经有一篇文章介绍jar包如何在CentOS上运行，《在linux上运行jar程序操作记录》 后来发现系统重启后不能自动运行，导致每次都要手动打开，这篇介绍如何自动开机启动运行jar程序。 一、找到JDK程序执行位置 [rootlocalhost /]# which jav…...
matlab双目标定中基线物理长度获取
在MATLAB进行双目摄像机标定时，通常会获得相机的内参，其中包括像素单位的焦距（focal length）以及物理单位的基线长度（baseline）。对于应用中的深度估计和测量，基线长度的物理单位非常重要，因为它直接影响到深度信息的准确性。有时候，您可能只能获取像素单位的焦距和棋…...
自己动手实现一个深度学习算法——二、神经网络的实现
文章目录 1. 神经网络概述1）表示2）激活函数3）sigmoid函数4）阶跃函数的实现5）sigmoid函数的实现6)sigmoid函数和阶跃函数的比较7）非线性函数8）ReLU函数 2.三层神经网络的实现1）结构2&…...
gRPC源码剖析-Builder模式
一、Builder模式 1、定义 将一个复杂对象的构建与表示分离，使得同样的构建过程可以创建不同的的表示。 2、适用场景 当创建复杂对象的算法应独立于该对象的组成部分以及它们的装配方式时。 当构造过程必须允许被构造的对象有不同的表示时。 说人话：…...
ARM传输数据以及移位操作
3.2.2 数据传送指令 LDR/STR指令用来在寄存器和内存之间输送数据。如果我们想要在寄存器之间传送数据，则可以使用MOV指令。MOV指令的格式如下。 MOV {cond} {s}Rd, oprand2 MOV {cond} {s}Rd, oprand2 其中，{cond}为条件指令可选项，{s}用来表…...
06、如何将对象数组里 obj 的 key 值变成动态的(即：每一个对象对应的 key 值都不同)
1、数据情况： 其一、从后端拿到的数据为： let arr [1,3,6,10,11,23,24] 其二、目标数据为： [{vlan_1: 1, value: 1}, {vlan_3: 3, value: 1}, {vlan_6: 6, value: 1}, {vlan_10: 10, value: 1}, {vlan_11: 11, value: 1}, {vlan_23: 23, v…...
ngx_http_request_s
/* 罗剑锋老师的注释参考： https://github.com/chronolaw/annotated_nginx/blob/master/nginx/src/http/ngx_http_request.h */struct ngx_http_request_s {uint32_t signature; /* "HTTP" */ngx_connection_t …...
Docker 学习路线 2：底层技术
了解驱动Docker的核心技术将让您更深入地了解Docker的工作原理，并有助于您更有效地使用该平台。 Linux容器（LXC） Linux容器（LXC）是Docker的基础。 LXC是一种轻量级的虚拟化解决方案，允许多个隔离的Linux系…...
UEFI实战——显示图片
一、准备工作 1.1 BMP格式图片 参考：BMP格式详解获取“BMP格式详解”文档里的图片，命名为Logo.bmp将Logo.bmp图片放到U盘里，U盘格式FAT32二、实例代码 2.1 代码结构 TextPkg/ ├── Display.c ├── GetFile.c ├── Test.c ├── Test.dsc ├── Test.h └── Tes…...
Ansible中的playbook
目录 一、playbook简介 二、playbook的语法 三、playbook的核心组件 四、playbook的执行命令 五、vim 设定技巧 六、基本示例 一、playbook简介 1、playbook与ad-hoc相比，是一种完全不同的运用。 2、playbook是一种简单的配置管理系统与多机器部署系统的基础…...
怎样去除视频中的杂音，保留人声部分？
怎样去除视频中的杂音，保留人声部分？这个简单嘛！两种办法可以搞定：一是进行音频降噪，把无用的杂音消除掉；二是提取人声，将要保留的人声片段提取出来。 这就将两种实用的办公都分享出来…...
基于Qt QTreeView|QTreeWidget控件使用简单版
头文件解析： 这是一个C++代码文件，定义了一个名为MainWindow的类。以下是对每一句的详细解释： ```cpp #ifndef MAINWINDOW_H #define MAINWINDOW_H ``` 这是一个条件编译指令，用于避免头文件的重复包含。`MAINWINDOW_H`是一个宏定义，用于唯一标识这个头文件。 ```cpp #…...
edge浏览器的隐藏功能
1. edge://version 查看版本信息 2. edge://flags 特性界面 具体到某一特性：edge://flags/#overlay-scrollbars 3. edge://settings设置界面 详情可参考chrome: 4. edge://extensions 扩展程序页面 5. edge://net-internals 网络事件信息 6. edge://component…...
安卓抓包之小黄鸟
下载安装 下载地址: https://download.csdn.net/download/yijianxiangde100/88496463 安装apk 即可。 证书配置：...
Django中的FBV和CBV
一、两者的区别 1、在我们日常学习Django中，都是用的FBV（function base views）方式，就是在视图中用函数处理各种请求。而CBV（class base view）则是通过类来处理请求。 2、Python是一个面向对象的编程语言…...
信息泄露--
大唐电信AC简介 大唐电信科技股份有限公司是电信科学技术研究院（大唐电信科技产业集团）控股的的高科技企业，大唐电信已形成集成电路设计、软件与应用、终端设计、移动互联网四大产业板块。 大唐电信AC集中管理平台存在弱口令及敏感信息泄漏漏…...
C#WPF文本格式化模式实例
本文演示C#WPF文本格式化模式实例 WPF 文本渲染优缺点 WPF中的文本渲染和旧式的基于 GDI的应用程序的文本染有很大区别。很大一部分区 别是由于 WPF 的设备无关显示系统造成的，但 WPF 中的文本染也得到了显著增强，能更清晰地显示文本，在 LCD 监视器上尤其如此。 然而，W…...
嵌入式云平台一些基础概念的理解
1.SDK SDK是Software Development Kit的缩写,译为”软件开发工具包”,通常是为辅助开发某类软件而编写的特定软件包,框架集合等,SDK一般包含相关文档,范例和工具。 我自己的理解就似乎，SDK也就是软件开发工具包，他会为其使用者提供一些封装好的接口&…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装；只需暴露 19530（gRPC）与 9091（HTTP/WebUI）两个端口，即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
大语言模型如何处理长文本？常用文本分割技术详解
为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...
Module Federation 和 Native Federation 的比较
前言 Module Federation 是 Webpack 5 引入的微前端架构方案，允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...
ardupilot 开发环境eclipse 中import 缺少C++
目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...
C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。
1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj，再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...
使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度
文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...
【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变（硬件篇）
本项目是基于 STM32F103C8T6 微控制器的 SPWM（正弦脉宽调制）电源模块，能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路，图中 D1 为二极管， 其目的是防止正负极电源反接， …...
基于Springboot+Vue的办公管理系统
角色： 管理员、员工 技术： 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能： 该办公管理系统是一个综合性的企业内部管理平台，旨在提升企业运营效率和员工管理水…...
LangFlow技术架构分析
🔧 LangFlow 的可视化技术栈 前端节点编辑器 底层框架：基于 （一个现代化的 React 节点绘图库） 功能： 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...
HTTPS证书一年多少钱？
HTTPS证书作为保障网站数据传输安全的重要工具，成为众多网站运营者的必备选择。然而，面对市场上种类繁多的HTTPS证书，其一年费用究竟是多少，又受哪些因素影响呢？ 首先，HTTPS证书通常在PinTrust这样的专业平…...