Question

我尝试过这里找到的答案，但仍然无法理解如何在html5视频上叠加图像和文字。无论我尝试什么，元素只是叠加在彼此之上或之下。代码如下：

HTML：

<html>
<body>
  <div id="wrap_video">
    <div id="video_box">
      <div id="video_overlays">
         <img src="img/overlay.png"</img>
         <a> TEXT </a>
      </div>         
    <div>
     <video id="player" src="mov/movie.mp4" type="video/mp4" autoplay="autoplay" loop>">Your browser does not support this streaming content.</video>
  </div>   
</div>
</div>

</body>
</html>

CSS：

html, body {
margin: 0px;
}
#video_box {
  position: absolute;
  top: 0;
  left: 0;
  width: 960px;
  height: 720px;
}
#video_overlays {
  position: absolute;
  top: 0;
  left: 0;
  width: 960px;
  height: 720px;
  z-index: 100;
}
video#player {
  position: absolute;
  top: 0;
  left: 0;
  width: 960px;
  height: 720px;
  z-index: 99;
}
#wrap_video {
  position: absolute;
  top: 0;
  left: 0;
  width: 960px;
  height: 720px;
}

Answer 1

 <div id="wrap_video">             
<video id="player" width="960px" height="720px" loop="loop">
    <source src="mov/movie.mp4" type="video/mp4"/>
    <source src="movie.ogg" type="video/ogg" />
  Your browser does not support this streaming content.
</video>
     <div id="video_overlays">
          <img src="http://images.apple.com/v/ios/carplay/a/images/carplay_icon.png"/>
         <a href="#"> TEXT </a>
      </div>
</div>

CSS

html, body {
margin: 0px;
}
#wrap_video {
  position: absolute;
  top: 0;
  left: 0;
}
#video_overlays {
  position: absolute;
  top: 0;
  left: 0;
  width: 960px;
  height: 720px;
  z-index: 100;
  background-color: rgba(255,255,255,.4);
}
#player{
    background: purple;
}

如何在html5视频上叠加叠加层

1 个答案: