css – 制作HTML5视频海报的大小与视频本身相同

前端之家收集整理的这篇文章主要介绍了css – 制作HTML5视频海报的大小与视频本身相同前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_502_1@有谁知道如何调整HTML5视频海报的大小,使其适合视频本身的确切尺寸?

这里是一个jsfiddle显示的问题:http://jsfiddle.net/zPacg/7/

这里的代码

HTML:

<video controls width="100%" height="100%"  poster="http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_orange_rectangle.png">
  <source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />
  <source src="http://demo.inwebson.com/html5-video/iceage4.ogg" type="video/ogg" />
  <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webm" />
</video>​

CSS:

video{
border:1px solid red;
}​

请注意,橙色矩形不会缩放到视频的红色边框。

此外,只是添加下面的CSS不工作,因为它重新调整视频与海报:

video[poster]{
height:100%;
width:100%;
}

解决方法

您可以使用透明的海报图像结合CSS背景图片来实现这一点( example);但是,要使背景伸展到视频的高度和宽度,您必须达到 use an absolutely positioned <img> tag( example)。

也可以在browsers that support background-size(example)set background-size to 100% 100%

原文链接:https://www.f2er.com/css/221159.html

猜你在找的CSS相关文章