Dim Hintergrund, wenn Video gespielt wird

Question

Ich benutze das html5 Video Element jetzt viel mehr. Ich möchte den Hintergrund meiner Seite abblenden, wenn der Benutzer auf das Video drückt. Wenn sie Pause oder Video beenden, möchte ich den Bildschirm ausschalten.

Ich habe dieses div auf meiner Seite, die auf display: none gesetzt wird Es ist nicht auf der Seite sichtbar, wenn es lädt, aber ich bin nicht genug vertraut mit Javascript, um es zu tun, was ich will.

Hier ist das div auf meiner Seite, die die dim setzt.

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

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

Vielleicht so etwas wie, was oben beschrieben ist?

Answer 2

Zuerst müssen Sie die media events identifizieren, die Sie benötigen. Es scheint, dass playing und suspend sind, was Sie suchen.

Zweitens während der Wiedergabe, werden Sie Ihren Hintergrund entsprechend einstellen wollen ... Sie nur unter der Annahme sind, um den Hintergrund für den Körper zu setzen:

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

Von hier aus können Sie Ereignis-Listener erstellen für den Media Player auf Ihrer Seite ...

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

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

---

HINWEIS: Dies funktioniert nur für modernen Browser arbeiten, um das <video> Element verwendet. Ältere Browser unterstützen dies nicht und die Ereignisse sind für Fallback-Player unterschiedlich. addEventListener erfordert IE9 oder neuere Browser, alle modernen Browser unterstützen dies.

Answer 3

Sie können Test:

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

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

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

Aber Sie haben eine Hintergrundfarbe für die #overlay hinzufügen, um den Hintergrund zu dimmen. Morover können Sie einen Z-Index für das Overlay eingestellt, die niedriger ist als das Video ist sicher sein das Video immer oben ist:

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

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