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

Question

有谁知道如何调整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%;
}

Answer 1

根据您要定位的浏览器,您可以使用object-fit属性来解决此问题:

object-fit: cover;

或者也许fill是你在找什么.仍在考虑IE.

Answer 2

您可以将透明海报图像与CSS背景图像结合使用来实现此目的(示例); 但是,要将背景拉伸到视频的高度和宽度,您必须使用绝对定位的<img>标签(示例).

它也可以设置background-size,以100% 100%在支持的浏览器background-size(例如).

Answer 3

或者您可以使用简单preload="none"属性使VIDEO背景可见.你可以background-size: cover;在这里使用.

 video {
   background: transparent url('video-image.jpg') 50% 50% / cover no-repeat ;
 }

 <video preload="none" controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
 </video>

Answer 4

我正在玩这个并尝试所有解决方案,最终我使用的解决方案是谷歌Chrome的Inspector的建议.如果你把它添加到你的CSS它对我有用:

video{
   object-fit: inherit;
}

Answer 5

我的解决方案结合了user2428118和VeikoJääger的答案,允许预加载但不需要单独的透明图像.我们使用base64编码的1px透明图像代替.

<style type="text/css" >
    video{
        background: transparent url("poster.jpg") 50% 50% / cover no-repeat ;
    }
</style>
<video controls poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" >
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
</video>

Answer 6

<video src="videofile.webm" poster="posterimage.jpg" controls preload="metadata">
    Sorry, your browser doesn't support embedded videos.
</video>

覆盖

video{
   object-fit: cover; /*to cover all the box*/
}

填

video{
   object-fit: fill; /*to add black content at top and bottom*/
   object-position: 0 -14px; /* to center our image*/
}

请注意，视频控件位于我们的图像之上，因此我们的图像并未完全显示。如果您使用的是适合对象的封面，请在视觉应用程序（如 Photoshop）上编辑您的图像并添加页边距底部内容。

Answer 7

我提出了这个想法,它完美无缺.好吧基本上我们想要从显示器中删除视频第一帧,然后将海报大小调整为视频的实际大小.如果我们设置尺寸,我们就完成了其中一项任务.然后只剩下一个.所以现在,我知道摆脱第一帧的唯一方法是实际定义一张海报.但是,我们将给视频一个伪造的视频,一个不存在的视频.这将导致背景透明的空白显示.即我们的父div的背景将是可见的.

使用简单,但如果您想将div背景的尺寸调整为视频尺寸,则可能无法与所有Web浏览器一起使用,因为我的代码使用的是"background-size".

HTML/HTML5:

<div class="video_poster">
    <video poster="dasdsadsakaslmklda.jpg" controls>
        <source src="videos/myvideo.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
<div>

CSS:

video{
    width:694px;
    height:390px;
}
.video_poster{
    width:694px;
    height:390px;
    background-size:694px 390px;
    background-image:url(images/myvideo_poster.jpg);
}