如何在视频标签上实现覆盖

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 线上的位置。 将其视为代数中的图形，其中“x”表示左右位置，“y”表示上下位置，“z”表示元素将出现的上下位置。

默认 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() });