Question

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

<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的大小。最好总是显示中心。

更新：视频标记现在处于中心位置， jbutler483 非常出色，但视频大小存在问题，具体取决于取景div或视频比率或大小。视频不覆盖整个区域或中心失败。这是一个符合400x400盒子需求的剪切，但在1000x200时失败。 http://jsfiddle.net/cremers/7Lgfyg1d/6/

更新：找到非IE的工作解决方案：object-fit: cover; object-position:center;但我希望有一个完整的解决方案。

更新： Polyfill应该提供所需的功能，我会在今天的视频标签上对此进行测试，而不是 Philip Dernovoy 。更新：我很抱歉，但我没有做到这一点。

Answer 1

您可以使用定位和翻译的组合来实现此目的：

.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＆gt; =或Opera Mini如图所示here在这些浏览器中，视频将显示在fixed-width-height元素的左上角（尽管将仍然是功能性的。）

如果你想“覆盖”整个div，你可以使用：

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

为了完全覆盖+拉伸到相对定位的div父级。

Answer 2

我不确定我是否理解你想要的东西。对于视频标签，我曾经使用对象包含和对象位置来处理大多数布局要求。使用您提供的jsfiddle，尝试将'child'类更改为：

.child{
    position: relative;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
}

这将使视频填充到全宽或全高，具体取决于h / w比。如果您希望视频填充所有div，其中某些部分溢出，只需将object-fit更改为cover。我希望这有帮助。

Answer 3

将此风格添加到视频中：

position: absolute;
min-height: 50%;
min-width: 50%; 
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

这个样式到div容器：position:relative;

http://jsfiddle.net/4k0bpek4/2/

Answer 4

我认为这就是你要找的......

    .fixed-width-height {
        margin: 3px 0px 8px 10px;
        position: relative;
        width: 100%;
    }
    .child {
        width: 100%;
        height: 100%;
        position: relative;
        border: 1px #ef7f1b solid;
        padding: 6px;
    }

<div class="fixed-width-height">
<video class="child" controls="" autoplay="">
    <source src="http://beginwithsoftware.com/free-hd-720p-1080p-mp4-video-downloads/video/I_LOVE_YOU_H264_720P_23.976_BeginWithSoftware.com.mp4" type="video/mp4">Your browser does not support the video tag.</video>

http://jsfiddle.net/4cbnj0tc/

Answer 5

<强> HTML

<html>
<head>
 <link rel="stylesheet" href="style1.css" type="text/css" /> 
</head>
<div class="fixed-width-height">
  <video style="min-width:100%; min-height:100%;" controls autoplay>
    <source src="video.mp4" type="video/mp4">
      Browser Not Supported
  </video>
</div>
</body>
</html>

<强> CSS

.fixed-width-height {
  position: relative;
}
.fixed-width-height video {  
    position: relative;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;

}

Answer 6

认为这个会帮助你..：D

#myplayer {
	position:fixed;
	top:25%;
	left:25%;
	bottom:25%;
	right:25%;
	display:block;
	background:#000;
}
#defaultplayer {
	position:absolute;
	height:99%;
	width:99%;
	background:#000;
}

<div id="myplayer"><video id="defaultplayer" src="your url" controls></video></div>

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

6 个答案: