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

您好，我有一个滑块，可以显示图像和视频

我正在尝试修复滑块上的视频覆盖 但是，每当我尝试它的视频停止播放和行为像一个图像与覆盖目前它 链接到存在滑块的“我的页面”

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 }?>

.video容器{
位置：相对位置；
}
录像带{
高度：自动；
垂直对齐：中间对齐；
宽度：100%；
}
.叠加说明{
背景：rgba（255,0,0,0.37）；
位置：绝对位置；
顶部：0；右侧：0；底部：0；左侧：0；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
作为答案发布，因为我还不能添加评论

z-index : # //any number

这决定了元素在z线上的位置。
把它想象成代数中的一个图形，其中“x”表示左右位置，“y”表示上下位置，“z”表示上下位置和元素出现的程度

默认的z-index设置为auto，这意味着它采用其父级的z-index。如果要在其上放置某个对象，则只需将z索引设置为大于父对象。您可以在开发人员工具中很容易地尝试这一点，只需不断增加z索引，直到您想要的任何内容都在顶部

或者你可以去：

z-index: 9999999;

第一个正确的解决方法是在视频标签中使用属性autoplay，就像下面的exmaple一样

<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>

尝试使用z-index作为覆盖。为什么视频标记中没有
autoplay
属性，它就在您提供的示例中。好的，让我尝试使用此
$（'video'）。获取（0）。播放（）
要播放视频并在此处给出解释，请给出您的建议答案@solanke，以便我将其标记为正确答案，因为iv测试了它，它仍然是sameYeah。仅通过设置z指数，它不起作用。看着html，我注意到它甚至没有经过视频播放器，所以你在overlay desc中所做的任何更改都会显得更高。您需要返回并检查html，确保所有容器都按预期工作。您是尼日利亚人吗？索兰克是我国的约鲁巴人，如果我弄错了，请纠正我
$( window ).load(function() { $('video').get(0).play() });