如何使HTML 5视频播放适合框架而不是保持纵横比？

发布时间：2020-12-14 19:30:00 所属栏目：资源来源：网络整理

导读：我一直在尝试 HTML5视频播放.例如我的网页上嵌入了这个视频对象： video width="480" height="380" class="ecard" tabindex="0" source type="video/ogg; codecs=quot;theora,vorbisquot;" src="videos/1156 In your honor we'll be dancing.ogv"/source sou

我一直在尝试 HTML5视频播放.例如我的网页上嵌入了这个视频对象：

<video width="480" height="380" class="ecard" tabindex="0">
   <source type="video/ogg; codecs=&quot;theora,vorbis&quot;" src="videos/1156 In your honor we'll be dancing.ogv"></source>
   <source type="video/mp4; codecs=&quot;avc1.42E01E,mp4a.40.2&quot;" src="videos/1156 In your honor we'll be dancing.mp4"></source>
</video>

我的问题是视频元素保留它的宽高比,而我更喜欢强制播放适合帧.有没有人知道这样做的方法？

解决方法

目前没有办法这样做,但是使用CCS3图像适配属性将成为可能.没有浏览器支持它,但是.然后,您可以使用它来使所有视频伸展到宽度/高度：

video {
  image-fit: fill;
}

见http://dev.w3.org/csswg/css3-page/#propdef-image-fit规格

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!