代码之家 › 专栏 › 技术社区 › Jim Jeffers

如何使HTML5视频播放适合帧而不是保持纵横比?

html5 video

Jim Jeffers · 技术社区 · 16 年前

我一直在尝试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>

我的问题是视频元素保留了它的纵横比,而我更喜欢强制播放以适应帧。有人知道怎么做吗?

6 回复 | 直到 7 年前

foolip 16 年前

目前还没有办法做到这一点,但有了ccs3 image fit属性,这将成为可能。不过,目前还没有浏览器支持它。然后,您可以使用此选项将所有视频拉伸到宽度/高度:

video {
  image-fit: fill;
}

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

Silvia 15 年前

现在有点晚了,但是对象适合CSS3属性将满足这个需求。 http://dev.w3.org/csswg/css3-images/#object-fit 它已经在Opera中实现,请参见 http://my.opera.com/desktopteam/blog/2010/08/03/presto-update .

Simon Mattes 9 年前

如果希望视频填充整个帧并保持其纵横比,请使用以下命令:

video
{
  object-fit: cover;
  height: 100%;
  width: 100%;
}

magikMaker 9 年前

您也可以这样做:将视频元素放在中间 left 和 top 50%,然后用 transform: translate(-50%, -50%); 最后给它一个 min-height 和 min-width 100%

video {
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
}

Leo Yu 9 年前

我试过图像匹配,但失败了。

然后通过检查上面的答案,我在CSS中使用对象匹配:

video {
  object-fit: fill;
}

来自多媒体数据网 https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit ):

object fit css属性指定如何将替换元素的内容安装到由其使用的高度和宽度建立的框中。

值:填充

替换内容的大小可以填充元素的内容框:对象的具体对象大小是元素使用的宽度和高度。

jwhitlock 7 年前

是的,我认为至少有一种方法可以做到这一点,但这很难看: 使用CSS转换(或SVG)缩放视频元素。问题是,我认为您需要一些JavaScript来根据容器的大小计算适当的比例。

好消息是Webkit和Gecko已经支持CSS转换很长一段时间了,Opera10.50也支持它。他们都支持SVG。

http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/#transforms https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms