html – 显示最大化并以div为中心的视频标签

前端之家收集整理的这篇文章主要介绍了html – 显示最大化并以div为中心的视频标签前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在拐角处,我会告诉你我有什么。

我想通过视频html5标签在固定的div中显示视频。我通过使用最小高度和最大高度来最大化它。但我也希望它以中心为中心。

<div class="fixed-width-height">
    <video style="min-width:100%; min-height:100%;" controls autoplay>
        <source src="myvid.mpg" type="video/mp4">
        Your browser does not support the video tag
    </video>
</div>

现在,div总是显示视频的上部或左部,具体取决于div的大小。最好总是显示中心。提前Thx!

更新:
视频标签现在居中,jbutler483很好的工作,但是视频大小取决于帧数div或视频比例或大小存在问题。视频不覆盖整个区域或定心失败。这是一个符合400×400盒子需求的剪辑,但是在1000×200下失败。 http://jsfiddle.net/cremers/7Lgfyg1d/6/

更新:
找到了非IE的工作解决方案:object-fit:cover;对象的位置:中心;但我想要一个完整的工作解决方案。

更新:
Polyfill应该提供所需的功能,我将在viedo标签上测试这个日子,thx到Philip Dernovoy。
更新:我很抱歉,但我没有工作。

解决方法

您可以使用定位和翻译的组合来实现:
.fixed-width-height {
  position: relative;
}
.fixed-width-height video {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
<div class="fixed-width-height">
  <video style="min-width:100%; min-height:100%;" controls autoplay>
    <source src="myvid.mpg" type="video/mp4">
      Your browser does not support the video tag
  </video>
</div>

注意:

这将会/应该适用于所有浏览器栏IE8> =和Opera Mini,如图所示here在这些浏览器中,视频将显示在fixed-width-height元素的左上角(尽管仍将起作用)。

如果你想“覆盖”整个div,你可以使用:

.fixed-width-height video{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
}

以便完全覆盖相对定位的父母的伸展。

猜你在找的HTML相关文章