logo标签列表

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

csshtmlattributeshtml5-video
119

有人知道如何调整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%;
}
1
我认为你不能在属性中使用“％”符号；但是将其更改为100并不能解决问题。我敢打赌这是一个-webkit媒体样式。请随意查看它们http://trac.webkit.org/browser/trunk/Source/WebCore/css/mediaControls.css - albert
@albert，谢谢。我在你发的链接中没有看到任何关于“poster”的参考。你能给我展示一下你所说的CSS是什么样子的吗？比如，“-webkit media style”。谢谢。 - tim peterson
这就是我所说的“挑选”的意思；那些是Chrome特定的媒体样式；我只有一点点了解它们，更不用说它们声明的伪选择器了；没有起点：我会查找具有填充等声明的内容。 - albert
15个回答
1
我曾遇到类似问题，通过创建与我的视频相同长宽比的图像（16:9），问题得以解决。我的视频标签宽度设为100%，现在图像（320 x 180）完美适配。希望能对你有所帮助！
1

在生成缩略图之后，您可以调整图像大小

exec("ffmpeg -i $video_image_dir/out.png -vf scale=320:240 {$video_image_dir}/resize.png",$out2, $return2);
1
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;
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;
}
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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接