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

html用css grid实现自适应四宫格放视频

news 2026/4/1 15:42:06

想同时播放四个本地视频：

  • 四宫格；
  • 自式应，即放缩浏览器时，四宫格也跟着放缩；
  • 尽量填满页面（F11 浏览器全屏时可以填满整个屏幕）。

4grid

在 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

  1. HTML <video> Tag
  2. CSS–九宫格布局(自适应)–方法/教程/实例
  3. CSS Grid 网格布局实现自适应9宫格
  4. CSS Grid 网格布局教程
  5. CSS Units

相关文章：

html用css grid实现自适应四宫格放视频

想同时播放四个本地视频&#xff1a; 四宫格&#xff1b;自式应&#xff0c;即放缩浏览器时&#xff0c;四宫格也跟着放缩&#xff1b;尽量填满页面&#xff08;F11 浏览器全屏时可以填满整个屏幕&#xff09;。 在 html 中放视频用 video 标签&#xff0c;参考 [1]&#xff1…...

编程日记 2023/11/3 10:34:34

【机器学习可解释性】5.SHAP值的高级使用

机器学习可解释性 1.模型洞察的价值2.特征重要性排列3.部分依赖图4.SHAP 值5.SHAP值的高级使用 正文 汇总SHAP值以获得更详细的模型解释 总体回顾 我们从学习排列重要性和部分依赖图开始&#xff0c;以显示学习后的模型的内容。 然后我们学习了SHAP值来分解单个预测的组成部…...

编程日记 2023/11/3 10:33:33

CentOS开机自动运行jar程序实现

前面已经有一篇文章介绍jar包如何在CentOS上运行&#xff0c;《在linux上运行jar程序操作记录》 后来发现系统重启后不能自动运行&#xff0c;导致每次都要手动打开&#xff0c;这篇介绍如何自动开机启动运行jar程序。 一、找到JDK程序执行位置 [rootlocalhost /]# which jav…...

编程日记 2023/11/3 10:31:30

matlab双目标定中基线物理长度获取

在MATLAB进行双目摄像机标定时，通常会获得相机的内参，其中包括像素单位的焦距（focal length）以及物理单位的基线长度（baseline）。对于应用中的深度估计和测量，基线长度的物理单位非常重要，因为它直接影响到深度信息的准确性。有时候，您可能只能获取像素单位的焦距和棋…...

编程日记 2023/11/3 10:30:29

自己动手实现一个深度学习算法——二、神经网络的实现

文章目录 1. 神经网络概述1&#xff09;表示2&#xff09;激活函数3&#xff09;sigmoid函数4&#xff09;阶跃函数的实现5&#xff09;sigmoid函数的实现6)sigmoid函数和阶跃函数的比较7&#xff09;非线性函数8&#xff09;ReLU函数 2.三层神经网络的实现1&#xff09;结构2&…...

编程日记 2023/11/3 10:29:28

gRPC源码剖析-Builder模式

一、Builder模式 1、定义 将一个复杂对象的构建与表示分离&#xff0c;使得同样的构建过程可以创建不同的的表示。 2、适用场景 当创建复杂对象的算法应独立于该对象的组成部分以及它们的装配方式时。 当构造过程必须允许被构造的对象有不同的表示时。 说人话&#xff1a…...

编程日记 2023/11/3 10:28:25

ARM传输数据以及移位操作

3.2.2 数据传送指令 LDR/STR指令用来在寄存器和内存之间输送数据。如果我们想要在寄存器之间传送数据&#xff0c;则可以使用MOV指令。MOV指令的格式如下。 MOV {cond} {s}Rd, oprand2 MOV {cond} {s}Rd, oprand2 其中&#xff0c;{cond}为条件指令可选项&#xff0c;{s}用来表…...

编程日记 2023/11/3 10:27:24

06、如何将对象数组里 obj 的 key 值变成动态的(即：每一个对象对应的 key 值都不同)

1、数据情况&#xff1a; 其一、从后端拿到的数据为&#xff1a; let arr [1,3,6,10,11,23,24] 其二、目标数据为&#xff1a; [{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…...

编程日记 2023/11/3 10:26:23

ngx_http_request_s

/* 罗剑锋老师的注释参考&#xff1a; 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 …...

编程日记 2023/11/3 10:25:22

Docker 学习路线 2：底层技术

了解驱动Docker的核心技术将让您更深入地了解Docker的工作原理&#xff0c;并有助于您更有效地使用该平台。 Linux容器&#xff08;LXC&#xff09; Linux容器&#xff08;LXC&#xff09;是Docker的基础。 LXC是一种轻量级的虚拟化解决方案&#xff0c;允许多个隔离的Linux系…...

编程日记 2023/11/3 10:24:21

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…...

编程日记 2023/11/3 10:23:20

Ansible中的playbook

目录 一、playbook简介 二、playbook的语法 三、playbook的核心组件 四、playbook的执行命令 五、vim 设定技巧 六、基本示例 一、playbook简介 1、playbook与ad-hoc相比&#xff0c;是一种完全不同的运用。 2、playbook是一种简单的配置管理系统与多机器部署系统的基础…...

编程日记 2023/11/3 10:22:19

怎样去除视频中的杂音，保留人声部分？

怎样去除视频中的杂音&#xff0c;保留人声部分&#xff1f;这个简单嘛&#xff01;两种办法可以搞定&#xff1a;一是进行音频降噪&#xff0c;把无用的杂音消除掉&#xff1b;二是提取人声&#xff0c;将要保留的人声片段提取出来。 这就将两种实用的办公都分享出来&#xf…...

编程日记 2023/11/3 10:20:15

基于Qt QTreeView|QTreeWidget控件使用简单版

头文件解析： 这是一个C++代码文件，定义了一个名为MainWindow的类。以下是对每一句的详细解释： ```cpp #ifndef MAINWINDOW_H #define MAINWINDOW_H ``` 这是一个条件编译指令，用于避免头文件的重复包含。`MAINWINDOW_H`是一个宏定义，用于唯一标识这个头文件。 ```cpp #…...

编程日记 2023/11/3 10:19:14

edge浏览器的隐藏功能

1. edge://version 查看版本信息 2. edge://flags 特性界面 具体到某一特性&#xff1a;edge://flags/#overlay-scrollbars 3. edge://settings设置界面 详情可参考chrome: 4. edge://extensions 扩展程序页面 5. edge://net-internals 网络事件信息 6. edge://component…...

编程日记 2023/11/3 10:18:13

安卓抓包之小黄鸟

下载安装 下载地址: https://download.csdn.net/download/yijianxiangde100/88496463 安装apk 即可。 证书配置：...

编程日记 2023/11/3 10:16:11

Django中的FBV和CBV

一、两者的区别 1、在我们日常学习Django中&#xff0c;都是用的FBV&#xff08;function base views&#xff09;方式&#xff0c;就是在视图中用函数处理各种请求。而CBV&#xff08;class base view&#xff09;则是通过类来处理请求。 2、Python是一个面向对象的编程语言…...

编程日记 2023/11/3 10:15:08

信息泄露--

大唐电信AC简介 大唐电信科技股份有限公司是电信科学技术研究院&#xff08;大唐电信科技产业集团&#xff09;控股的的高科技企业&#xff0c;大唐电信已形成集成电路设计、软件与应用、终端设计、移动互联网四大产业板块。 大唐电信AC集中管理平台存在弱口令及敏感信息泄漏漏…...

编程日记 2023/11/3 10:14:08

C#WPF文本格式化模式实例

本文演示C#WPF文本格式化模式实例 WPF 文本渲染优缺点 WPF中的文本渲染和旧式的基于 GDI的应用程序的文本染有很大区别。很大一部分区 别是由于 WPF 的设备无关显示系统造成的，但 WPF 中的文本染也得到了显著增强，能更清晰地显示文本，在 LCD 监视器上尤其如此。 然而，W…...

编程日记 2023/11/3 10:13:06

嵌入式云平台一些基础概念的理解

1.SDK SDK是Software Development Kit的缩写,译为”软件开发工具包”,通常是为辅助开发某类软件而编写的特定软件包,框架集合等,SDK一般包含相关文档,范例和工具。 我自己的理解就似乎&#xff0c;SDK也就是软件开发工具包&#xff0c;他会为其使用者提供一些封装好的接口&…...

编程日记 2023/11/3 10:12:05

mysql技巧(十六)：覆盖索引 vs 回表 —— 让查询效率提升 10 倍的核心技巧

&#x1f4dd; 本章学习目标本章聚焦数据库性能优化&#xff0c;帮助读者彻底掌握覆盖索引与回表的核心原理。通过本章学习&#xff0c;你将全面理解覆盖索引 vs 回表这一核心主题&#xff0c;并能在实际工作中应用这些技巧&#xff0c;让查询效率提升 10 倍以上。 一、引言&am…...

编程新知 2026/4/1 15:09:31

手把手教你用MounRiver Studio开发沁恒CH32V003（附完整项目实战）

从零开始用MounRiver Studio开发沁恒CH32V003&#xff1a;温度控制器实战指南 当RISC-V遇上国产MCU&#xff0c;会碰撞出怎样的火花&#xff1f;沁恒CH32V003作为一款性价比极高的RISC-V内核微控制器&#xff0c;配合MounRiver Studio这一专为RISC-V优化的开发环境&#xff0c;…...

编程新知 2026/4/1 12:46:23

如何用Awesome-Obsidian打造个性化知识管理神器：终极美化指南

如何用Awesome-Obsidian打造个性化知识管理神器&#xff1a;终极美化指南 【免费下载链接】awesome-obsidian &#x1f576;️ Awesome stuff for Obsidian 项目地址: https://gitcode.com/gh_mirrors/aw/awesome-obsidian 想要将Obsidian从简单的Markdown编辑器变身为功…...

编程新知 2026/4/1 12:36:20

H5扫码功能选型实战：微信JS-SDK vs 纯前端库，从公众号配置到代码封装的完整流程

H5扫码功能选型实战&#xff1a;微信JS-SDK vs 纯前端库的技术决策指南 当营销活动页需要实现"扫码领优惠券"功能时&#xff0c;技术团队突然陷入争论&#xff1a;是直接调用微信JS-SDK&#xff0c;还是采用纯前端扫码库&#xff1f;这个看似简单的技术决策&#xff…...

编程新知 2026/4/1 11:25:39

forkrun：革新数据处理，突破传统并行工具性能瓶颈

【导语&#xff1a;forkrun 作为一款自调优工具&#xff0c;可直接替代 GNU Parallel 和 xargs -P。它在现代 CPU 上能显著提升基于 Shell 的数据准备速度&#xff0c;尤其在 NUMA 架构上表现出色&#xff0c;为数据处理领域带来了新的变革。】数据处理速度的飞跃&#xff1a;5…...

编程新知 2026/4/1 11:05:26

Kandinsky-5.0-I2V-Lite-5s后端集成：Node.js环境下的高性能API服务构建

Kandinsky-5.0-I2V-Lite-5s后端集成&#xff1a;Node.js环境下的高性能API服务构建 1. 引言 想象一下&#xff0c;你正在开发一个创意设计平台&#xff0c;用户上传一张图片&#xff0c;几秒钟后就能看到它变成了一段生动的视频。这种从静态图像到动态视频的转换能力&#xf…...

编程新知 2026/4/1 10:49:10

从零开始：roLabelImg安装与OBB旋转框标注实战指南

1. 为什么需要roLabelImg和旋转框标注 在计算机视觉项目中&#xff0c;我们经常需要标注图像中的目标物体。对于常规的矩形框标注&#xff0c;LabelImg这类工具已经足够好用。但遇到倾斜物体时&#xff0c;比如遥感图像中的飞机、自然场景中的交通标志、医学图像中的器官&#…...

编程新知 2026/4/1 10:18:44

2026年华为云OpenClaw如何安装？配置百炼API零门槛10分钟步骤

2026年华为云OpenClaw如何安装&#xff1f;配置百炼API零门槛10分钟步骤。OpenClaw&#xff08;曾用名Clawdbot&#xff09;是一款轻量化、可扩展的开源AI智能体执行框架&#xff0c;支持自然语言指令驱动、多模型灵活切换与全场景任务自动化。对于新手而言&#xff0c;阿里云轻…...

编程新知 2026/4/1 9:32:02

超滤膜行业领先公司

《2026年超滤膜权威排名&#xff1a;深圳市洛哈斯水处理技术有限公司何以凭借AI智控技术领跑行业&#xff1f;》在2026年的深度测评中&#xff0c;深圳市洛哈斯水处理技术有限公司凭借其行业领先的“AIoT智能膜系统”与卓越的长期运行稳定性&#xff0c;综合表现排名第一&#…...

编程新知 2026/4/1 7:41:29

MetaTube插件：智能元数据整合引擎的技术架构深度解析

MetaTube插件&#xff1a;智能元数据整合引擎的技术架构深度解析 【免费下载链接】jellyfin-plugin-metatube MetaTube Plugin for Jellyfin/Emby 项目地址: https://gitcode.com/gh_mirrors/je/jellyfin-plugin-metatube 在Jellyfin/Emby媒体服务器生态系统中&#xff…...

编程新知 2026/4/1 7:37:28