如何在视频标签上实现叠加

Question

你好，我有一个允许图像和视频的滑块，

我正在尝试在滑块上修复我的视频上的叠加层 但是当我尝试它的时候，视频就会停止播放，就像一个带有叠加层的图像 链接到我的页面，其中存在滑块

http://whitechapelandpartners.com/flex/

幻灯片的屏幕截图

这就是我正在尝试的，这给了我这个结果 信用：http://codepen.io/icutpeople/pen/whueK

 .video-container {
  position: relative;
}
video {
  height: auto;
  vertical-align: middle;
  width: 100%;
}


.overlay-desc {
  background: rgba(255, 0, 0, 0.37);
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

 <?php if($type == 'video'){?>
  <div class="video-container">
    <video  width="320" height="240" controls>
  <source src="<?php echo $row_slide['path']; ?>" type="video/mp4">

Your browser does not support the video tag.

</video> 
<div class="overlay-desc">
        <h1>Waynes World</h1>
     </div>

    </div>

      <?php }?>

为什么我的视频停止播放的任何帮助

Answer 1

发布作为答案，因为我还无法添加评论。

z-index : # //any number

这决定了元素在z线上的定位。 可以把它想象成代数中的图形，其中＆＃39; x＆＃39;将是左右的位置，＆＃39; y＆＃39;将是上下位置，＆＃39; z＆＃39;是高于或低于多少，元素将出现。

默认的z-index设置为auto，这意味着它采用了它的父级的z-index。如果你想在它上面放置一些东西，那么只需将z-index设置为大于父级。您可以在开发人员工具中轻松尝试这一点，并继续增加z-index，直到您想要的为止。

或者你可以去：

z-index: 9999999;

Answer 2

通过在视频代码中使用属性自动播放来解决问题的第一种正确方法，就像下面的例子一样

<video width="320" height="240" controls autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

或者使用jquery / javascript方法强行播放如下。

$( window ).load(function() { $('video').get(0).play() });