107

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

14 回答 14

93

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

object-fit: cover;

或者也许fill是你正在寻找的。仍在考虑 IE。

于 2015-06-25T07:43:05.423 回答
69

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

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

更新

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

利用

object-fit: cover;

如果您不想显示不符合视频纵横比的图像部分，以及

object-fit: fill;

拉伸图像以适应视频的纵横比

例子

于 2012-06-01T15:27:05.893 回答
28

或者您可以使用简单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>
于 2015-01-16T10:18:43.500 回答
27

我一直在玩这个并尝试了所有解决方案，最终我采用的解决方案是来自 Google Chrome 的 Inspector 的建议。如果您将其添加到您的 CSS 中，它对我有用：

video{
   object-fit: inherit;
}
于 2015-11-20T03:56:29.520 回答
12

我的解决方案结合了 user2428118 和 Veiko Jää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>
于 2016-03-16T12:04:41.603 回答
6

我想出了这个想法，并且效果很好。好的，所以基本上我们想从显示器中删除视频的第一帧，然后将海报调整为视频的实际大小。如果我们随后设置维度，我们就完成了其中一项任务。然后只剩下一个。所以现在，我知道摆脱第一帧的唯一方法是实际定义一张海报。然而，我们将给视频一个伪造的，一个不存在的。这将导致背景透明的空白显示。即我们的父 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);
}
于 2013-03-15T00:09:34.047 回答
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 等视觉应用程序上编辑您的图像并添加边距底部内容。

于 2017-11-17T20:34:46.527 回答
1

我有一个类似的问题，只是通过创建与我的视频 (16:9) 具有相同纵横比的图像来解决它。我在视频标签上的宽度设置为 100%，现在图像 (320 x 180) 非常适合。希望有帮助！

于 2014-05-16T17:14:48.983 回答
1

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

exec("ffmpeg -i $video_image_dir/out.png -vf scale=320:240 {$video_image_dir}/resize.png",$out2, $return2);
于 2015-05-26T09:31:04.563 回答
1

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

<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;
}
}
于 2016-11-04T11:13:36.513 回答
1

不需要额外的div。

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[poster]{ object-fit:cover; }  /* or object-fit:fill */
于 2021-11-14T03:28:27.133 回答
0 
  <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>
于 2019-11-30T01:33:59.807 回答
0

这有效

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

和 CSS

.video-box{
 background-image: 'some image';
 background-size: cover;
}
于 2019-10-28T16:11:04.590 回答
0 
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;
于 2016-12-24T05:57:43.360 回答