从零制作视频播放器——安得广厦千万间,大庇天下 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 结构也会发生一些变化。现在视频的控件都还是原生的,之后我们会对控件进行开发。

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

相关推荐
ygming4 分钟前
Q43- code973- 最接近原点的 K 个点 + Q44- code347- 前 K 个高频元素
前端·算法
ygming6 分钟前
Hashmap/ Hashset- Q39~Q42内容
前端·算法
多啦C梦a6 分钟前
【前端必修】闭包、`this`、`箭头函数`、`bind`、节流,一篇文章全懂!
前端·javascript·html
归于尽6 分钟前
为什么别人用闭包那么溜?这 8 个场景照着用就对了
前端·javascript·面试
Hilaku9 分钟前
Vue 2与Vue 3响应式原理的对比与实现
前端·javascript·vue.js
自出洞来无敌手(曾令瑶)14 分钟前
浏览器 实时监听音量 实时语音识别 vue js
前端·javascript·vue.js·语音识别
在钱塘江30 分钟前
《你不知道的JavaScript-上卷》-笔记-5-作用域闭包
前端
搬砖码31 分钟前
Vue病历写回功能:实现多输入框内容插入与焦点管理🚀
前端
不简说35 分钟前
史诗级更新!sv-print虽然不是很强,但却是很能打的设计器组件
前端·产品
用户952511514015536 分钟前
最常用的JS加解密场景MD5
前端