网站建设后期费用,市场监督管理局官网,东莞网站搭建建站公司,设计师培训多久想同时播放四个本地视频#xff1a;
四宫格#xff1b;自式应#xff0c;即放缩浏览器时#xff0c;四宫格也跟着放缩#xff1b;尽量填满页面#xff08;F11 浏览器全屏时可以填满整个屏幕#xff09;。 在 html 中放视频用 video 标签#xff0c;参考 [1]#xff1…想同时播放四个本地视频
四宫格自式应即放缩浏览器时四宫格也跟着放缩尽量填满页面F11 浏览器全屏时可以填满整个屏幕。 在 html 中放视频用 video 标签参考 [1]参考 [2,3] 用 css 的 grid 实现自适应九宫格的方法grid 的介绍见 [3]。
Code
code base 是 [2] 的方案 1。参考 [3] 用 * {...} 去除 padding、margin单位 vh 详见 [5]默认黑背景视频没有内容的地方黑边视频默认静音muted
!doctype html
html
headmeta charsetUTF-8titletest/titlestyle* {/* 去掉四围空白 */padding: 0;margin: 0;/* 黑背景 */background: #000000;}body {/* vw/vhviewport 宽/高的 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
/headbody
div classcontainervideo width100% height100% controls mutedsource srcD:/幺妹儿冯宝宝.mp4 typevideo/mp4/videodiv classitem2/div !-- 占位框 --div classitem3/div !-- 占位框 --video width100% height100% controls mutedsource srcD:/王也踏青.mp4 typevideo/mp4/video
/div
/body
/htmlReferences
HTML video TagCSS–九宫格布局(自适应)–方法/教程/实例CSS Grid 网格布局实现自适应9宫格CSS Grid 网格布局教程CSS Units
