就目前而言,这仅在WebKit中进行了测试.
<video>使用poster属性在元素上设置海报图像时,将在用户播放视频之前显示此图像(默认行为).但是,如果海报图像的宽高比与<video>设置的元素的宽高比不同,则在图像的两侧(左侧或右侧或顶部和底部)可以看到空白(或可能是黑色空间),图像为居中(也是默认行为).
我想知道如何缩放此图像(最好是在CSS中),以便填充视频元素,类似于使用CSS3 background-size: cover;值.
仍然困惑？也许这个JSFiddle会帮助解释:http://jsfiddle.net/jonnymilano/2w2CE/
我也有兴趣将图像强制放入视频容器,扭曲其高度和/或宽度以适应视频容器的尺寸.但是,这个答案只会部分解决我的问题.
我在 <div> 中有一个 <video> 元素，当页面上的其他元素动态调整/添加/删除时，它会自动调整大小。
我希望视频元素也自动调整大小，以便它始终包含在其背景 div 中；如果我将视频元素的 CSS 高度和宽度设置为 100%，这种工作方式是可行的，因此它始终与其容器的大小相同。但是，如果包含 div 的尺寸低于视频图像的固有 videoWidth 或 videoHeight，那么它开始表现得好像 CSS 高度/宽度属性指的是视频图像固有尺寸的百分比，而不是容器 div！例如，如果 CSS 高度为 100%，它会正常缩放，但它具有视频固有高度的最小尺寸；如果 CSS 高度为 50%，它会正常缩放，但最小尺寸为视频固有高度的 50%。
我可以通过使用 JavaScript 定期将视频元素的像素高度重置为容器的计算高度来解决这个问题，但这真的很慢而且不稳定。有什么办法可以在 CSS 中解决这个问题，以便视频元素的大小正确？
VideoJS 4使用了与我习惯的不同的CSS行为,从我所看到的海报图像.我已经将背景大小的CSS改为"覆盖"而不是"包含",这意味着即使我的图像比例错误,图像也会填充海报div.但是,出于某种原因,当您单击海报上开始播放视频时,海报图像似乎会在视频加载时返回"包含"状态.这种变化是在别处做出的吗？
提前致谢!