从零制作视频播放器——安得广厦千万间,大庇天下 video 俱欢颜(第二章)

1. 前言

书接上回,这篇文章我们将为 video 设置一个容器,将其包裹起来,以便该播放器能适应不同的布局。当然布局千变万化,可能在这里可以正常展示,到另一个地方就不能正常展示了。

为了尽量使我们的视频播放器能在各种布局下都能适应,下面我们将对 video 这个元素进行研究,看看怎么才能让它更好的适应千奇百怪的布局。

另外,各位看客的点赞与收藏就是我源源不断的动力,有兴趣的可以关注该专栏,如果有合适的功能需求,专栏也会进行更新。为了大家,为了大家,我今天决定不睡了,熬夜更!!!(╯°□°)╯︵ ┻━┻

2. 分析

下面将对如何使 video 元素更好的展示进行分析、研究。当然研究可能并不深入,所以阅读的同时请代入自己的思考。

2.1. video 元素的宽高影响什么?

video 这个元素比较特殊,它的长宽在渲染后呈现一定的比例,具体的比例是依照视频内容的比例来决定的。

比如视频内容的宽高比为 16:9,如果我们设置 video 的 width 为 160px,height 为 100px,视频内容的宽高将会是 160px、90px。

下面将 video 的 width 设置的稍大了些,可以看到视频内容并没有拉伸。另外将 width 设置的稍小了些,发现视频内容也会变小,但是没有出现压缩的情况。

注意视频内容指的是肉眼可见的视频区域,下图中 video 元素的宽度大于视频内容的宽度。

由此我们可以得出初步的结论:width 和 height 并不会拉伸或压缩视频内容。

PS:可以使用 object-fit: fill 来将视频内容拉伸或压缩。

2.2. 怎么较好的限定 video 的宽高?

通常我们的视频容器都是固定的尺寸,而视频的尺寸可能就千变万化了,所以我们一般都让 video 的宽高跟随容器的宽高,这样呈现的效果会比较好。

下面进行详细分析并进行实现。

2.2.1. 实现

下面将对如何更好的展示 video 进行代码实践。

  1. 假设我们的视频展示区域宽高为 width:800px,height:400px,如果直接给 video 赋值宽高效果如下图所示。如果我们的要求就是宽 800高 400,非视频区域应该是黑边才行。所以我们会将 video 元素放在一个父容器中,父容器背景颜色设置为 #000。这里不建议给 video 设置背景颜色,因为 video 不能包含控件元素,最好给最外层的元素设置。
  1. 然后我们设置 video 元素的 width:100%,height:100%,这样 video 元素就能在容器内呈现较好的视觉效果。(如果要对视频内容进行拉伸或压缩,需要使用 object-fit 属性)

  2. 效果如下图所示:

  1. 之后我们就可以暂时将这个容器放置在预先准备好的视频展示位,当然还不是最终成品,再加入控件后 DOM 结构也会发生一些变化。现在视频的控件都还是原生的,之后我们会对控件进行开发。

目前我采用的方式就是上述的方式,如果各位看客还有更好的方式,可以在评论区给出你的方法。

相关推荐
腾讯TNTWeb前端团队1 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰5 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪5 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪5 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy6 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom6 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom6 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom7 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom7 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom7 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试