logo标签列表

在一个div中居中并最大化显示视频标签

htmlcsshtml5-video
18

我想在一个固定的div中使用video html5标签来展示视频。我使用min-height和max-height来实现视频最大化，但同时我也希望它居中显示。

<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的大小如何，它始终显示视频的上部或左部分。最好总是显示中心部位。

更新：现在视频标签已经居中了，jbutler483做得很好，但是视频大小取决于框架div或视频比例或大小存在问题。 视频没有覆盖整个区域或居中失败。这里是一个适合400x400框的代码片段，但在1000x200时失败。http://jsfiddle.net/cremers/7Lgfyg1d/6/

更新：在非IE浏览器中找到了可行的解决方案：object-fit：cover；object-position：center；但我想要一个完整的工作解决方案。

更新：Polyfill应该提供所需的功能，我将在这几天测试视频标签，感谢Philip Dernovoy。 更新：对不起，但我没有使其工作。

你能创建一个演示吗？ - G.L.P
下面是演示。 - Daniel
1
更新2：有一个polyfill适用于object-fit。 - Philip Dernovoy
1
我搜索并找到了一个堆栈溢出的链接。请查看http://stackoverflow.com/questions/18090595/center-fullscreen-background-video - Ahmad Saad
@AhmadSaad 这是jQuery，但是一个很好且简单的解决方案来比较div和video标签的比例，并设置高度或宽度属性为100％。我会处理这个问题。 - Daniel
显示剩余6条评论
7个回答
9
您可以使用定位和平移的组合来实现这一点： 

.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，如此展示在这里。在这些浏览器中，视频将显示在固定宽高元素的左上角（但仍然可正常使用）。

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

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

为了完全覆盖并拉伸到相对定位的div父元素。
好的，我对这个解决方案有一个问题：如果视频宽度为800像素，而div较小，比如400像素，那么视频将会比宽度更大，不会缩小到400像素宽度。我知道这是我的min-css的问题，有没有什么解决方法？ - Daniel
http://jsfiddle.net/cremers/7Lgfyg1d/4/ 无法使该代码片段正常工作，它看起来比我本地的项目还糟糕。将最大宽度设置为100％会导致高度不可变。 - Daniel
@Daniel：我希望你足够“爱我”，不要使用内联样式，而是使用类：你能解释一下这里的问题吗？ - 你也想让高度成为全高吗？ - jbutler483
@jbutler483 这个视频应该涵盖 div 元素。 - Daniel
@PavelGatnar 请点击“运行”并查看结果。 - Daniel
显示剩余4条评论
5

我不确定我理解你想要的内容。对于视频标签，我曾经使用object-contain和object-position来处理大部分布局要求。 针对您提供的jsfiddle，请尝试将“child”类更改为：

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

这将使视频根据宽高比填充到完整宽度或完整高度。如果您想要视频填充整个div，但部分内容溢出，只需将object-fit更改为cover即可。

希望这能帮到您。

抱歉，根据5月7日的更新，object-fit仅在非IE浏览器中有效。但是您的object-position尚未知晓，谢谢！ - Daniel
也许这只适用于Chrome，但无论如何都是一个绝妙的解决方案！ - Stepan Yakovenko
0

将此样式添加到视频中：

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/

抱歉，视频标签没有效果。 - Daniel
0

我认为这就是你在寻找的东西。

    .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/

周围的 div 没有固定的高度或宽度。如果您更改它，您会发现高度不会被填充，也不会居中。 - Daniel
0

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;

}
0

我觉得这个会对你有帮助..: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。但是你做得很好，也许有人会需要这种定位方式。 - Daniel
我已经编辑了代码，也许这次能帮到你。 - adarsh mohan
0
我认为'flex'属性是最适合这种情况的。以下是代码： 

document.querySelector('body').onload = function() {
  document.querySelector('body').style.height = window.innerHeight + 'px';
  window.onresize = function () {
    document.querySelector('body').style.height = window.innerHeight + 'px';
  }
}
body {
  margin: 0;
  min-height: 100%;
}

.fixed-width-height {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
}

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

你是在说这个吗？（它可能不完全是纯HTML/CSS，但我认为它仍然有效。）

抱歉，您的解决方案未填满整个 div。 - Daniel
@Daniel 我认为比例取决于文件。你尝试过其他比例的文件吗？ - Star Light
我想在不同的div大小中播放不同比例和尺寸的视频。视频应适合div，使其完全填充div，保持其比例，并隐藏因此产生的溢出。视频的显示部分应垂直和水平居中。 - Daniel
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接