Html 使 HTML5 视频海报与视频本身大小相同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10826784/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make HTML5 video poster be same size as video itself
提问by tim peterson
Does anyone know how to resize the HTML5 video poster such that it fits the exact dimensions of the video itself?
有谁知道如何调整 HTML5 视频海报的大小，使其适合视频本身的确切尺寸？
here's a jsfiddle which shows the problem: http://jsfiddle.net/zPacg/7/
这是一个显示问题的 jsfiddle：http: //jsfiddle.net/zPacg/7/
here's that code:
这是代码：
HTML:
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:
CSS：
video{
border:1px solid red;
}?
Notice that the orange rectangle doesn't scale to the red border of the video.
请注意，橙色矩形不会缩放到视频的红色边框。
Also, just adding the CSS below doesn't work either as it rescales the video along with the poster:
此外，仅添加下面的 CSS 也不起作用，因为它会与海报一起重新缩放视频：
video[poster]{
height:100%;
width:100%;
}
采纳答案by user2428118
You can use a transparent poster image in combination with a CSS background image to achieve this (example); however, to have a background stretched to the height and the width of a video, you'll have to use an absolutely positioned <img>tag(example).
您可以将透明海报图像与 CSS 背景图像结合使用来实现此目的（示例）；但是，要将背景拉伸到视频的高度和宽度，您必须使用绝对定位的<img>标签（示例）。
It is also possible to set background-sizeto 100% 100%in browsers that support background-size(example).
也可以在支持（示例）的浏览器中设置background-size为100% 100%。
background-size
Update
更新
A better way to do this would be to use the object-fitCSS property as @Lars Ericsson suggests.
更好的方法是使用object-fit@Lars Ericsson 建议的CSS 属性。
Use
用
object-fit: cover;
if you don't want to display those parts of the image that don't fit the video's aspect ratio, and
如果您不想显示那些不符合视频纵横比的图像部分，以及
object-fit: fill;
to stretch the image to fit your video's aspect ratio
拉伸图像以适应视频的纵横比
回答by Lars Ericsson
Depending on what browsers you're targeting, you could go for the object-fitproperty to solve this:
根据您的目标浏览器，您可以使用object-fit属性来解决这个问题：
object-fit: cover;
or maybe fillis what you're looking for. Still under consideration for IE.
或者也许fill是你正在寻找的。仍在考虑 IE。
回答by patrick
I was playing around with this and tried all solutions, eventually the solution I went with was a suggestion from Google Chrome's Inspector. If you add this to your CSS it worked for me:
我正在玩这个并尝试了所有解决方案，最终我采用的解决方案是来自 Google Chrome Inspector 的建议。如果你把它添加到你的 CSS 中，它对我有用：
video{
object-fit: inherit;
}
回答by Veiko J??ger
Or you can use simply preload="none"attribute to make VIDEO background visible. And you can use background-size: cover;here.
或者您可以使用简单的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>
回答by Jamie G
My solution combines user2428118 and Veiko J??ger's answers, allowing for preloading but without requiring a separate transparent image. We use a base64 encoded 1px transparent image instead.
我的解决方案结合了 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>
回答by Jonathan J
I came up with this idea and it works perfectly. Okay so basically we want to get rid of the videos first frame from the display and then resize the poster to the videos actual size. If we then set the dimensions we have completed one of these tasks. Then only one remains. So now, the only way I know to get rid of the first frame is to actually define a poster. However we are going to give the video a faked one, one that doesn't exist. This will result in a blank display with the background transparent. I.e. our parent div's background will be visible.
我想出了这个主意，而且效果很好。好的，所以基本上我们想从显示器中删除视频的第一帧，然后将海报的大小调整为视频的实际大小。如果我们然后设置维度，我们就完成了这些任务之一。然后就只剩下一个了。所以现在，我知道摆脱第一帧的唯一方法是实际定义海报。然而，我们将给视频一个伪造的，一个不存在的。这将导致背景透明的空白显示。即我们的父 div 的背景将是可见的。
Simple to use, however it might not work with all web browsers if you want to resize the dimension of the background of the div to the dimension of the video since my code is using "background-size".
使用简单，但是如果您想将 div 背景的尺寸调整为视频的尺寸，它可能不适用于所有网络浏览器，因为我的代码使用“背景尺寸”。
HTML/HTML5:
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:
CSS：
video{
width:694px;
height:390px;
}
.video_poster{
width:694px;
height:390px;
background-size:694px 390px;
background-image:url(images/myvideo_poster.jpg);
}
回答by Daniel Eduardo Delgado Diaz
<video src="videofile.webm" poster="posterimage.jpg" controls preload="metadata">
Sorry, your browser doesn't support embedded videos.
</video>
Cover
覆盖
video{
object-fit: cover; /*to cover all the box*/
}
Fill
填
video{
object-fit: fill; /*to add black content at top and bottom*/
object-position: 0 -14px; /* to center our image*/
}
Note that the video controls are over our image, so our image is not completly showed. If you are using object-fit cover, edit your image on a visual app as photoshop and add a margin bottom content.
请注意，视频控件位于我们的图像之上，因此我们的图像并未完全显示。如果您使用的是适合对象的封面，请在视觉应用程序（如 Photoshop）上编辑您的图像并添加页边距底部内容。
回答by Motilal Soni
You can resize image size after generating thumb
您可以在生成拇指后调整图像大小
exec("ffmpeg -i $video_image_dir/out.png -vf scale=320:240 {$video_image_dir}/resize.png",$out2, $return2);
回答by deebs
I had a similar issue and just fixed it by creating an image with the same aspect ratio as my video (16:9). My width is set to 100% on the video tag and now the image (320 x 180) fits perfectly. Hope that helps!
我有一个类似的问题，只是通过创建一个与我的视频 (16:9) 具有相同纵横比的图像来解决它。我的视频标签的宽度设置为 100%，现在图像 (320 x 180) 非常适合。希望有帮助！
回答by gopal sharma
You can use poster to show image instead of video on mobile device(or devices which doesn't support the video autoplay functionality). Because mobile devices not support video autoplay functionality.
您可以使用海报在移动设备（或不支持视频自动播放功能的设备）上显示图像而不是视频。因为移动设备不支持视频自动播放功能。
<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>
Now you can just style the poster attribute which is inside the video tag for mobile device via media-query.
现在，您可以通过媒体查询为移动设备的视频标签内的海报属性设置样式。
#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;
}
}
