视频宽度和高度设置的重要性
说到网页上放视频，感觉应该很简单的，就是加个标签。但是，要是想要视频没那么大，网页看着更顺溜点儿该怎么办？这可得好好琢磨琢磨了。有木有觉得困惑，到底咋在HTML5里调整video 标签的大小，还有那些经常遇到的难题怎么处理？别急，今天就给你们揭晓谜底！
video标签基本介绍
嘿~告诉大家个好玩儿的事情，就是我们可以用HTML5里面的video标签来看视频了，真的超神奇！只要把视频的网址塞进”src”属性中，然后加上个”Controls”属性，炫酷的播放条就出来你想怎么看就怎么看，还能随时暂停或者调节音量，真的是太简单实用了！而且，这个播放器的大小也是随心所欲的，只需要设置一下”width”和”height”就搞定！
使用width和height属性设置视频宽高
搞定这个超简单滴！首先，给网页加点儿`video`的标签，再调整一下里面的`width`跟`height`，就搞定了。看完这段你应该会：
html
这个小神器让你的视频看上去更强大，变成大屏幕的800像素宽，450像素高版本~还有超级实用的播放控制按钮！无论在哪儿都能用得超顺手~
遇到问题：视频高度未发生变化
有时候你可能发现，视频播放器里面调好了比例，但是网页上看起来还是一样的大小。这时候别急，就在video标签下加上几行CSS代码，说不定就解决了！
利用父元素宽高填充video
你的视频播不大不小，别担心尝试调一下父元素宽度和高度。给video标签加个 style=”width=100%;height=100%;object-fit:fill”属性就能帮到你！
object-fit属性详解
你们听说过 CSS 的 object-fit 属性吗？真心超好用！它就像是装修时选择的家具和饰品，让元素恰如其分地在容器中展现。调节方式有五种，全占满container，遮住部分cover，或者全都不要pack nothing。更厉害的是，你甚至可以直接调大或缩小scale-down。
各取值说明
– fill：默认值，内容被拉伸填充整个容器。
– contain：保持内容原始比例缩放以适应容器。
– cover：保持内容原始比例缩放并填充整个容器。
– none：内容保持原始尺寸不做任何调整。
-就是说把啥减小点就能放卡槽了，具体缩到多少就得看当时啥情况！
如何应用object-fit到video标签
简单说就是把style=”object-fit:fill;”加到你的视频代码里。无论播放器大小如何变化，这个视频都会自动填满整个空间，不会变形，保证你看得爽
总结与展望
看完这篇文章以后你就知道，设定HTML5video里的滑动条儿，其实亚历山大没事儿滴！你想调整下视频的尺寸，画面就更好看哈哈。做网页设计师，别只顾腼腆，多试试各种方法总能找到最顺手的那一个哈~
评论0