1

有没有办法让 HTML5 视频(和海报属性)像居中的背景封面一样?

我创建了一个可以在宽度范围内玩的虚拟笔:

http://codepen.io/SEFarstad/pen/vujqE

布局基于两个 50% 宽度的部分,其中左侧将包含固定视频,右侧将包含绝对定位的内容。

主要问题是我的设计需要垂直分割,使水平视频成为问题。有没有办法让这些水平视频在这样的垂直布局中全高?- 与使用背景尺寸相同的方式:封面;

我知道你可以使用背景视频等,但我需要它来控制、海报等,以满足我对这个项目的一些交互性需求。

4

1 回答 1

0

我知道这是一个老问题,你可能已经转向其他事情了,但我想回答一下,以防其他人通过谷歌偶然发现这个问题。您正在寻找的是object-fit一种将这种行为添加到视频和图像的方法。这里有一些关于它的信息,但基本上你只需要这样写:

video {
  ... // other stuff here
  object-fit: cover;
}

可悲的是,您还不能在每个浏览器上都使用它。但是,您可以查看一个 polyfill

于 2014-09-04T15:36:41.143 回答