視頻播放時暗淡的背景

我現在使用的html5視頻元素更多。當用戶按下播放視頻時，我想調暗我的頁面背景。當他們按暫停或視頻結束時，我希望屏幕關閉昏暗。視頻播放時暗淡的背景

我在我的頁面上設置了這個div，設置爲display: none它在加載時在頁面上不可見，但我對JavaScript不熟悉，無法使用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>

來源

2016-07-25 user3786102

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

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

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

或許真的像什麼在上面概括？

來源

2016-07-25 19:22:26

首先，您需要確定您需要的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或更新的瀏覽器，所有現代瀏覽器都支持此功能。

來源

2016-07-25 19:27:33 Tracker1

你可以測試：

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

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

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

但是你必須添加一個背景色爲#overlay暗淡的背景。 Morover你可以設置一個Z-指數比視頻更低，以確保視頻始終在頂部覆蓋：

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

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

來源

2016-07-25 19:29:18 mxlse

視頻播放時暗淡的背景

回答

相關問題