【问题标题】：Make HTML5 video poster be same size as video itself使 HTML5 视频海报与视频本身大小相同
【发布时间】：2012-06-05 07:23:26
【问题描述】：

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

【问题讨论】：

我认为你不能在属性中使用“%”；但是将其更改为 100 并不能解决问题。我会打赌它的-webkit 媒体风格。随意挑选他们trac.webkit.org/browser/trunk/Source/WebCore/css/…
@albert，谢谢我在您发送的链接中没有看到对poster 的引用。你能告诉我你所说的CSS是什么样的吗，即“-webkit media style”？谢谢
嗯，这就是我所说的“挑选”；这些是特定于 chrome 的媒体样式；我只是模糊地熟悉它们，更不用说它们声明的伪选择器了；没有起点：我会寻找带有填充等的声明。

标签： css html attributes html5-video

【解决方案1】：

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

object-fit: cover;

或者fill 是您正在寻找的。还是under consideration for IE。

【讨论】：

这绝对是答案。
+1 链接到object-fit 属性，使用object-fit: initial 为我做了。
"object-fit:fill" 成功了！就像“object-fit: initial”一样（奇怪的是，因为我在 developer.mozilla.org/en-US/docs/Web/CSS/object-fit 的规范中没有看到“初始”值）。 “cover”和“contain”都扭曲了android 5.1.1下三星原生浏览器中播放的海报。而且不影响IE！
你们针对对象匹配规则的目标是什么 css 选择器？由于无法定位海报图片，我假设您使用了video{object-fit: cover;}?
@zıəs uɐɟəʇs 在我的 css 中是... video[poster]{object-fit:fill}

【解决方案2】：

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

也可以在browsers that support background-size (example) 中使用set background-size to 100% 100%。

更新

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

使用

object-fit: cover;

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

object-fit: fill;

拉伸图像以适应视频的宽高比

Example

【讨论】：

-@user1419007，您的示例重复了背景图像。既然您认为这不是最好的方法，您介意提供一个 jsfiddle 来演示如何实施您的第二个策略吗？
我已经no-repeated 背景图片。至于其他解决方案，请给我一点时间来解决这个问题。
编辑：为第二个提议的解决方案添加了示例。
.. 第二个例子在 chrome 中不起作用？你确实需要给外部 div 一个像 jsfiddle.net/xh8er 这样的位置；然后就可以了。
使用此解决方案可在全屏模式下拉伸视频，打破宽高比。

【解决方案3】：

或者您可以简单地使用preload="none" 属性来使视频背景可见。你可以在这里使用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>

【讨论】：

更好的答案。不会破坏任何东西，并且不预加载视频并不会真正伤害您的页面，除非它是以视频为中心的网站。 +1。
我在手机上调整了播放背景大小。从这里的其他问题/答案（例如stackoverflow.com/questions/18229974/…）看来问题是图像重复（播放器css背景和视频元素海报）。此修复有效。
Hmm... 在 Chrome 中工作，但在原生 Android 浏览器中创建了一个新问题。见：stackoverflow.com/questions/39546792/…
最终修复 - 请参阅下面的 Lars Ericsson 答案

【解决方案4】：

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

video{
   object-fit: inherit;
}

【讨论】：

谢谢！这是我正在寻找的解决方法，以消除顶部和底部的视频间隙

【解决方案5】：

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

【讨论】：

是图片名还是完整路径？
在我的三星上的 android 原生浏览器（浏览器被命名为“Internet”）中，海报调整了大小......灾难性地在播放。这个解决方案 - 一个透明 gif 作为海报，“海报”作为背景 - 解决了这个问题，但是，.. 现在海报不在 IE-9、10 或 11 中显示。
解决方案是放弃透明 gif 和海报作为背景，并使用（参见上面的 Lars Ericsson 回答）视频[海报] {object-fit：fill}。解决了 android 5.1.1 下三星原生浏览器的问题。和IE显示海报没有问题
这种方法更适合移动设备。 object-fit 无法防止在内容仍在加载时在 Android 上发生的 poster 的大小扭曲。

【解决方案6】：

我想出了这个想法，并且效果很好。好的，所以基本上我们想从显示器中删除视频的第一帧，然后将海报调整为视频的实际大小。如果我们随后设置维度，我们就完成了其中一项任务。然后只剩下一个。所以现在，我知道摆脱第一帧的唯一方法是实际定义一张海报。然而，我们将给视频一个伪造的，一个不存在的。这将导致背景透明的空白显示。 IE。我们的父 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);
}

【讨论】：

这很聪明，我试了一下。这并不完美，但到达那里...jsfiddle.net/trpeters1/NJtc9
是的，你是对的。通过查看您的 jsfiddle，我现在意识到视频的尺寸也必须正确，而不仅仅是视频元素。我想当我在我的页面上尝试它时我很幸运。

【解决方案7】：

<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 等视觉应用程序上编辑您的图像并添加页边距底部内容。

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

生成拇指后可以调整图片大小

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

【讨论】：

【解决方案10】：

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

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

【讨论】：

其实iOS 10+ 支持playsinline 属性的视频自动播放功能。
如何指定该属性？

【解决方案11】：

不需要额外的 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 */

【讨论】：

【解决方案12】：

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;

【讨论】：

【解决方案13】：

这行得通

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

还有 CSS

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

【讨论】：

【解决方案14】：

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

【讨论】：