Question

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

我在我的页面上设置了这个div display: none它在加载时在页面上不可见但是我对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();
});

也许就像上面概述的那样？

Answer 2

你可以测试：

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

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

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

但你必须为#overlay添加背景颜色以使背景变暗。 Morover你可以为叠加设置一个低于视频的z-index，以确保视频始终位于顶部：

#overlay{
   background-color: #000;
   z-index: 0;
}
#video{
   z-index: 999
}

https://jsfiddle.net/ptvsovw7/3/

Answer 3

首先，您需要确定您需要的media events。似乎playing和suspend正是您所寻找的。

其次，在播放过程中，您需要根据需要设置背景...假设您只需要为身体设置背景：

function dimBackground() {
  //dim background, alternatively, you can add a className
  document.querySelector('body').style.backgroundColor = '#333';
}

function undimBackground() {
  // remove assigned property, fallback to stylesheet
  delete document.querySelector('body').style.backgroundColor;
}

从这里，您可以在页面上为媒体播放器创建事件监听器......

var player = document.getElementById('MyVideoElementId');
// or
var player = document.querySelector('.MyContainer video');

//subscribe to events
player.addEventListener('playing', dimBackground);
player.addEventListener('suspend', undimBackground);

注意：这仅适用于使用<video>元素的现代浏览器。较旧的浏览器不支持此功能，并且后备播放器的事件将有所不同。 addEventListener需要IE9或更新的浏览器，所有现代浏览器都支持此功能。

播放视频时背景暗淡

3 个答案: