Question

我想显示带有内容的HTML5视频。像背景图片一样。整个div / HTML5视频的高度必须为400px。我不想将视频用作整页背景，而是在指定的高度上使用。

    <div style="height: 400px">
     <video controls poster="{{item.media_pic}}">
    <source src="{{item.image_path}}" type="video/webm" />
    <source src="{{item.image_path}}" type="video/mp4">
    <source src="{{item.image_path}}" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
  <ion-row>
    <ion-col col-4>
      some text
    </ion-col>
    <ion-col col-8>
    button         
    </ion-col>
  </ion-row>
</div>

Answer 1

使用以下代码：

<div style="height: 400px;position:relative;background:#000">
     <video controls poster="{{item.media_pic}}" style="position:absolute;height:100%;">
    <source src="{{item.image_path}}" type="video/webm" />
    <source src="http://www.papytane.com/mp4/accrobra.mp4" type="video/mp4">
    <source src="{{item.image_path}}" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
  <ion-row style="position:relative;z-index:9">
    <ion-col col-4>
      some text
    </ion-col>
    <ion-col col-8>
    button         
    </ion-col>
  </ion-row>
</div>

在视频代码中添加“ position：absolute”，并添加100％的高度以适合其父div的高度。

在视频标签的父div上添加“ position：relative”，以将视频保存在内部，因为我们对其应用了绝对位置。

Answer 2

HTML

<div class="image_box">
    <video controls poster="{{item.media_pic}}">
        <source src="{{item.image_path}}" type="video/webm" />
        <source src="{{item.image_path}}" type="video/mp4">
        <source src="{{item.image_path}}" type="video/ogg">
        Your browser does not support HTML5 video.
    </video>
    <ion-row>
        <ion-col col-4>some text</ion-col>
        <ion-col col-8>button</ion-col>
    </ion-row>
</div>

CSS：

.image_box{
    width:100% !important;;
    height:400px !important;;
}

Answer 3

在孩子上使用object-fit: cover;，position absolute,然后在父母上使用position relative可以帮助您达到预期的效果。

不要忘记在父元素上添加overflow: hidden：

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0
}
figure{
  width: 100vw;
  height: 400px;
  position: relative;
  background-color: red; 
  overflow: hidden
}
video{
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
figcaption{
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 28vh;
  font-size: 3vw;
  font-weight: 900;
  text-transform: uppercase;
  z-index: 2;
}

<figure>
  <video controls >
 

      <source src="https://www.w3schools.com/html/mov_bbb.mp4"
              type="video/mp4">

      Sorry, your browser doesn't support embedded videos.
  </video>
  <figcaption>My Nice video</figcaption>
</figure>

将HTML5 <视频>设置为背景的指定高度div

3 个答案: