使HTML5video海报与video本身尺寸相同
有谁知道如何调整HTML5video海报的大小，使其适合video本身的确切尺寸？
这里是一个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; }
请注意，橙色矩形不会缩放到video的红色边框。
另外，只是添加下面的CSS不起作用，因为它随着海报重新调整video：
video[poster]{ height:100%; width:100%; }
你可以使用一个透明的海报图像结合CSS背景图像来实现这个（ 例子 ）; 但是，要将背景拉伸到video的高度和宽度，则必须使用绝对定位的<img>标记 （ 示例 ）。
也可以在支持background-size浏览器 （ 例如 ） 中将background-size设置为100% 100% 。
根据你定位的浏览器，你可以去找对象适合的属性来解决这个问题：
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>
我正在玩这个，并尝试了所有的解决scheme，最终我的解决scheme是从谷歌浏览器的督察的build议。 如果你把这个添加到你的CSS，它为我工作：
video{ object-fit: inherit; }
我的解决scheme结合了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>
我想出了这个想法，它完美的作品。 好吧，所以基本上我们想摆脱显示器的video第一帧，然后调整海报的video实际大小。 如果我们然后设定尺寸，我们已经完成了这些任务之一。 那么只剩下一个。 所以现在，我知道摆脱第一帧的唯一方法是实际定义一张海报。 但是，我们要给video一个伪造的，一个不存在的。 这将导致背景透明的空白显示。 即我们的父母div的背景将是可见的。
简单易用，但是如果你想把div背景的大小调整到video的尺寸，那么它可能不适用于所有的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); }
我有一个类似的问题，只是通过创build一个具有与我的video（16：9）相同的长宽比的图像来修复它。 我的宽度设置为100％的video标签，现在图像（320×180）完全适合。 希望有所帮助！
生成拇指后可以调整图像大小
exec("ffmpeg -i $video_image_dir/out.png -vf scale=320:240 {$video_image_dir}/resize.png",$out2, $return2);
您可以使用海报在移动设备上显示图像而不是video（或不支持video自动播放function的设备）。 由于移动设备不支持video自动播放function。
<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>
现在，您可以通过媒体查询来设置移动设备video标签内的海报属性。
#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 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*/ }
请注意，video控制是在我们的形象 ，所以我们的形象并没有完整的显示。 如果您使用的是物体贴合封面，请在视觉应用程序上将图像编辑为photoshop，然后添加底边内容。
