javascript - 播放视频时背景变暗

Question

我现在更多地使用 html5 视频元素。当用户按下视频上的播放键时，我想调暗页面的背景。当他们按下“暂停”或视频结束时，我希望屏幕关闭变暗。

我的页面上有一个设置为 display: none 的 div，加载时它在页面上不可见，但我对 Javascript 不够熟悉，无法让它执行我的操作想。

这是我页面上设置暗淡的 div。

<div id="overlay" style="display:none;position:fixed;width:100%;height:100%;top:0;left:0;opacity:0.6;"></div>

视频 HTML

<div class="col-md-6">
    <div id="introRight">
        <video poster="img/WhoWeAre.jpg" preload="auto" controls>
        <source src="video/WhoWeAre_HI.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
        <source src="video/WhoWeAre_HI.ogv" type='video/ogg; codecs="theora, vorbis"'>
        <source src="video/WhoWeAre_HI.webm" type='video/webm; codecs="vp8, vorbis"'>
        </video>
    </div> <!-- end introRight -->
</div>

Answer 1

$('video').on('play', function(e) {
   $("#overlay").show();
}, true);

$('video').on('pause', function(e) {
 $("#overlay").hide();
}, true);

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

也许类似于上面概述的内容？