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是你正在寻找的。仍under consideration for IE。

Answer 2

您可以将透明海报图像与CSS背景图像结合使用来实现此目的（example）;但是，要将背景拉伸到视频的高度和宽度，您必须use an absolutely positioned <img> tag（example）。

set background-size to 100% 100%（browsers that support background-size）中也可以example。

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

我正在玩这个并尝试了所有解决方案，最终我使用的解决方案是Google Chrome的Inspector提出的建议。如果你把它添加到你的CSS，它对我有用：

Node 1 = Length of 2 (3 -> 2)
Node 2 = Length of 0 ()
Node 3 = Length of 1 (2)
Node 4 = Length of 3 (1 -> 3 -> 2)
Node 5 = Length of 3 (1 -> 3 -> 2)
Node 6 = Length of 4 (4 -> 1 -> 3 -> 2) <-Longest 
Node 7 = Length of 0 ()

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

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

使用简单，但如果您想将div的背景尺寸调整为视频尺寸，则可能无法与所有网络浏览器一起使用，因为我的代码使用的是“背景尺寸”。

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

Answer 7

我有一个类似的问题，只是通过创建一个与我的视频（16：9）具有相同宽高比的图像来修复它。我的宽度在视频标签上设置为100％，现在图像（320 x 180）非常适合。希望有所帮助！

Answer 8

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

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

Answer 9

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

<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>

现在，您只需通过媒体查询为移动设备的视频标签内的海报属性设置样式。

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

Answer 10

<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 11

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;

Answer 12

这有效

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

和CSS

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

Answer 13

  <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>

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

13 个答案: