让HTML5视频的海报是同样大小的视频本身 [英] Make HTML5 video poster be same size as video itself

问题描述

有谁知道如何调整HTML5视频海报，使得它适合影片本身的确切尺寸？

这里有一个的jsfiddle这说明问题： http://jsfiddle.net/zPacg/7/

下面是code：

HTML

 ＆lt;视频控制WIDTH =100％HEIGHT =100％ poster=\"http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_orange_rectangle.png\">
  ＆lt;信源SRC =htt​​p://demo.inwebson.com/html5-video/iceage4.mp4TYPE =视频/ MP4/＆GT;
  ＆lt;信源SRC =htt​​p://demo.inwebson.com/html5-video/iceage4.oggTYPE =视频/ OGG/＆GT;
  ＆lt;信源SRC =htt​​p://demo.inwebson.com/html5-video/iceage4.webmTYPE =视频/ W​​EBM/＆GT;
＆LT; /视频＆GT;
 

CSS：

 视频{
边框：1px的固体红色​​;
}
 

注意，橙色的矩形不能扩展到视频的红色边框。

此外，只需添加CSS下面无法正常工作或因为它重新调整视频的海报一起：

 视频[海报] {
高度：100％;
宽度：100％;
}
 

解决方案

您可以结合使用透明的海报图像使用CSS背景图片来实现这一（的例如）;然而，有拉长的高度和视频的宽度的背景下，你必须使用绝对定位的 ＆LT; IMG方式＆gt; 标记（例如）

这也可以设置背景大小到 100％100％ 在支持浏览器背景 - 大小 （例如）。

Does anyone know how to resize the HTML5 video poster such that it fits the exact dimensions of the video itself?

here's a jsfiddle which shows the problem: http://jsfiddle.net/zPacg/7/

here's that code:

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;
}​

Notice that the orange rectangle doesn't scale to the red border of the video.

Also, just adding the CSS below doesn't work either as it rescales the video along with the poster:

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

解决方案

You can use a transparent poster image in combination with a CSS background image to achieve this (example); however, to have a background stretched to the height and the width of a video, you'll have to use an absolutely positioned <img> tag (example).

It is also possible to set background-size to 100% 100% in browsers that support background-size (example).

这篇关于让HTML5视频的海报是同样大小的视频本身的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！