@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%
。