相关疑难解决方法(0)

使HTML5视频海报与视频本身大小相同

有谁知道如何调整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>?
Run Code Online (Sandbox Code Playgroud)

CSS:

video{
border:1px solid red;
}?
Run Code Online (Sandbox Code Playgroud)

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

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

video[poster]{
height:100%;
width:100%;
}
Run Code Online (Sandbox Code Playgroud)

css html5 attributes html5-video

75
推荐指数
7
解决办法
14万
查看次数

标签 统计

attributes ×1

css ×1

html5 ×1

html5-video ×1