HTML5视频中心源

Question

我有一个视频，我将主要在人像屏幕上显示，我希望视频是屏幕的整个高度，但居中，以便视频的中心是屏幕的中心。我在下面有我当前的CSS和HTML。这将显示100％高度的视频，但实际源（视频）是从其自身的左侧播放，而不是从中心播放。反正有没有做我要问的事情？此外，视频可能会显示横向，并且需要相同的结果。

这张图片的左边是我得到的，正确的是我想要的

.videoContainer 
{
    position:absolute;
    height:100%;
    width:100%;
    overflow: hidden;
}

.videoContainer video 
{
    width: auto;
    height: 100%
}

  <div class="videoContainer">
    <video width="944" height="532" controls preload="auto" poster="posterimg.jpg">
        <source src="test.mp4" type="video/mp4" />
        <source src="test.webm" type="video/webm">
        <source src="test.ogv" type="video/ogg" type='video/ogg; codecs="theora, vorbis"'>
    </video>
  </div>

Answer 1

你可能意味着CSS中的object-fit属性。这将缩放视频以填充视频容器元素，保持其比例不变。

您可以在下面的代码段中更改视频的高度。您会注意到视频会将自身缩放到其容器的确切高度。

使用object-fit: cover;

＆＃13;

＆＃13;

body, html {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

＆＃13;

<video controls> 
  <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
  <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
  <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
  <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>

＆＃13;

＆＃13;

＆＃13;

没有object-fit: cover;

＆＃13;

＆＃13;

body, html {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

video {
  height: 100%;
  width: 100%;
}

＆＃13;

<video controls> 
  <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
  <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
  <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
  <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>

＆＃13;

＆＃13;

＆＃13;

您可以使用此属性制作漂亮的全宽视频。它将用视频填充整个容器。而不是有这些顶部和底部的条。这是由于自动缩放到正确的比例而引起的。

Answer 2

试试这个：

video {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   text-align:center;
   height:100%;
   width:100%;
   object-fit:cover;
}

<div class="videoContainer">
	<video controls> 
	  <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
	  <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
	  <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
	  <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
	</video>
</div>

Answer 3

＆＃13;

＆＃13;

video {
    display: block;
    margin: 0 auto;
}

＆＃13;

<video width="320" height="240" controls>
    <source src="http://static.videezy.com/system/resources/previews/000/000/328/original/bokeh2.mp4" type="video/mp4" />
</video>

＆＃13;

＆＃13;

＆＃13;