Javascript HTML/CSS视频结束事件问题

我目前正在设计一个网站。我已经做了所有的事情，但我不知道最后一步是什么

交易如下：

我想播放一个视频，但我想它的z-索引是在整个网站索引页面。由于视频不是全屏的，我希望网站的其余部分是黑色的。因此，在某种程度上，你可以说我想要一个完全黑但有一个视频在中间播放的id id，这个子id应该在整个索引页面上。p> 播放完视频后（可能5秒），我希望它消失，这样我们就可以回到索引页。我不想改变我的网站链接，并让它重定向到一个新的页面我

这能做到吗？如果你不明白，请询问，我会澄清

非常感谢

-下面的解决方案隐藏了一个覆盖，该覆盖在除视频之外的所有内容上都是z索引的。下面的代码使用

的结束事件添加

显示：无到覆盖层

video#watchMe {
    z-index: 9999;
    position:relative;
}

HTML

<video id="watchMe" autoplay="true">
    <source src="video.mp4" type="video/mp4">
</video>       

<div id="overlay"></div>

叠加的z索引<代码>需要高于每个元素，但低于视频

#overlay {
    z-index: 9998;
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;
    left:0;
    background: rgba(0, 0, 0, 0.85);
}



Javascript

视频结束时隐藏覆盖

var video = document.getElementById('watchMe');
var overlay = document.getElementById('overlay');

video.addEventListener('ended', function(){
    overlay.style.display = 'none'; 
}, false);

注意：IE 9之前的版本不能很好地使用
addEventListener（）
-



Jquery备选方案

如果您更喜欢使用jQuery而不是原始Javascript，那么这是一个选项

$('video').on('ended', function(){
    $('#overlay').fadeOut();
});


-下面的解决方案隐藏了一个覆盖，该覆盖在除视频之外的所有内容上都是z索引的。下面的代码使用
的结束事件添加
显示：无到覆盖层

video#watchMe {
    z-index: 9999;
    position:relative;
}

HTML

<video id="watchMe" autoplay="true">
    <source src="video.mp4" type="video/mp4">
</video>       

<div id="overlay"></div>

叠加的z索引<代码>需要高于每个元素，但低于视频

#overlay {
    z-index: 9998;
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;
    left:0;
    background: rgba(0, 0, 0, 0.85);
}



Javascript

视频结束时隐藏覆盖

var video = document.getElementById('watchMe');
var overlay = document.getElementById('overlay');

video.addEventListener('ended', function(){
    overlay.style.display = 'none'; 
}, false);

注意：IE 9之前的版本不能很好地使用
addEventListener（）
-



Jquery备选方案

如果您更喜欢使用jQuery而不是原始Javascript，那么这是一个选项

$('video').on('ended', function(){
    $('#overlay').fadeOut();
});


使用模式对话框小部件。bootstrap有一个，jQuery有一百万个，vanilla有，我来看看。谢谢还有CSS:video{border:5000px纯黑；z-index:999；position:relative；…}但是当视频播放完毕后，我如何使其消失？这对您有用吗？问题：视频什么时候开始？是否应该通过单击或其他方式触发覆盖，或是立即触发覆盖？使用模式对话框小部件。bootstrap有一个，jQuery有一百万个，vanilla有，我来看看。谢谢还有CSS:video{border:5000px纯黑；z-index:999；position:relative；…}但是当视频播放完毕后，我如何使其消失？这对您有用吗？问题：视频什么时候开始？该覆盖是由点击触发还是立即触发？这太棒了！非常感谢！re:“在指定的时间量、视频长度后隐藏覆盖元素”：如果用户在重要部分暂停视频以便盆，该怎么办？使用事件，而不是计时器。这只是一个5秒钟的视频：p如果他们想再次看到它，他们可以刷新，等待出现问题。如何使视频自动播放？这非常有用。非常感谢布莱恩！这太棒了！非常感谢！re:“在指定的时间量、视频长度后隐藏覆盖元素”：如果用户在重要部分暂停视频以便盆，该怎么办？使用事件，而不是计时器。这只是一个5秒钟的视频：p如果他们想再次看到它，他们可以刷新，等待出现问题。如何使视频自动播放？这非常有用。非常感谢布莱恩！