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

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

2 个答案: