在拐角处,我会告诉你我有什么。
我想通过视频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%; }
以便完全覆盖相对定位的父母的伸展。