有谁知道如何调整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背景图像结合使用以实现此目的（示例）；但是，要使背景延伸到视频的高度和宽度，则必须使用绝对定位的<img>标记（例如）。

也可以在支持的浏览器中将其设置background-size为100% 100%（示例）。 background-size

更新资料

更好的方法是使用object-fit@Lars Ericsson建议的CSS属性。

用

object-fit: cover;

如果您不想显示不适合视频长宽比的那些部分，并且

object-fit: fill;

拉伸图像以适合视频的长宽比

例

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

object-fit: cover;

也许fill就是您要寻找的。仍在考虑IE。

或者，您可以使用简单的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>

我一直在尝试并尝试所有解决方案，最终我采用的解决方案是Google Chrome浏览器的Inspector的建议。如果将其添加到CSS，它对我有用：

video{
   object-fit: inherit;
}

我的解决方案结合了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>

我想出了这个主意，并且效果很好。好的，基本上，我们希望从显示的第一帧中删除视频，然后将海报的大小调整为视频的实际大小。然后，如果设置尺寸，我们将完成这些任务之一。然后只剩下一个。所以现在，我知道摆脱第一帧的唯一方法是实际定义海报。但是，我们将为该视频提供伪造的视频，这是不存在的。这将导致背景透明的空白显示。即我们父div的背景将可见。

简单易用，但是如果您想将div背景的尺寸调整为视频尺寸，则它可能不适用于所有网络浏览器，因为我的代码使用的是“ 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);
}

<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的形式编辑图像，并添加底部空白内容。

我遇到了类似的问题，只是通过创建与视频具有相同长宽比（16：9）的图像来解决此问题。我的宽度在视频标签上设置为100％，现在图像（320 x 180）非常合适。希望有帮助！

您可以在生成拇指后调整图像大小

exec("ffmpeg -i $video_image_dir/out.png -vf scale=320:240 {$video_image_dir}/resize.png",$out2, $return2);

您可以使用海报在移动设备（或不支持视频自动播放功能的设备）上显示图像而不是视频。因为移动设备不支持视频自动播放功能。

<div id="wrap_video">
<video preload="preload" id="Video" autoplay="autoplay" loop="loop" poster="default.jpg">
<source src="Videos.mp4" type="video/mp4">
Your browser does not support the <code>video</code> tag.
</video>
</div>

现在，您可以通过媒体查询为移动设备的视频标签内的poster属性设置样式。

#wrap_video
{
width:480px;
height:360px;
position: relative;
} 
@media (min-width:360px) and (max-width:780px)
{
video[poster]
{
top:0 !important;
left:0 !important;
width:480px !important;
height:360px !important;
position: absolute !important;
}
}

height:500px;
min-width:100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size:100% 100%;
object-fit:cover;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;

这工作

<video class="video-box" poster="/" controls>
    <source src="some source" type="video/mp4">
</video>

和CSS

.video-box{
 background-image: 'some image';
 background-size: cover;
}

  <div class="container">
        <video poster="~/Content/WebSite/img/SiteSetting/Load.gif" autoplay muted loop class="myVideo">
            <source src="~/Content/WebSite/images/VideoTube.mp4" type="video/mp4" />
        </video>

    </div>



 <style>
    .myVideo {
position: absolute;
right: 0;
left: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
object-fit: inherit;
 }
@media only screen and (max-width:768px) {
.myVideo {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    max-width: -webkit-fill-available;
    min-height: 100%;
    object-fit: cover;
    }
   }

     @media only screen and (max-width:320px) {
.myVideo {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    max-width: -webkit-fill-available;
    min-height: 100%;
    object-fit: cover;
  }
}
</style>