Comment puis-je PAUSE une vidéo html5 quand il quitte la fenêtre d'affichage?

Question

Je me suis retrouvé dans le pétrin en ce moment avec un site Web en une page qui contient une section 'intro' (#intro) comme première section contenant une 'vidéo'.

la vidéo est une vidéo html5, sur la boucle et la lecture automatique et est logé à l'intérieur d'un conteneur div appelé « -tête d'introduction » (à l'origine de cette figure une tête de h1 mais son été omises et remplacées par un contenu vidéo heh)

Je devrais préciser, le conteneur div nommé intro-heading, qui héberge la vidéo avec l'ID # intro-vidéo, a la classe «growIn» appliquée à elle, oui les gens que j'utilise Animate.css 'primé' de Daniel Eden bibliothèque lol

donc comme, voici mon code jusqu'ici:

<script> 
    $(document).ready(function(){ 
    $(window).scroll(function(){ 
    var x = $(document).scrollTop(); 
    console.log(x); /* just for observing how far from the top i am..*/ 

    if ($(document).scrollTop() > 750) { 

     $('#intro-video').pause(); 

     } 
    }); 
    }); 
    </script> 

cela ne fonctionne pas. D'ailleurs si je remplace le $ ('# intro-video) .pause(); ligne avec:

$('#intro-video').css("display","none"); 

alors la vidéo disparaît bien sûr, mais je peux encore entendre la musique :))

alors clairement, ce n'est pas ce que je suis Gunning pour. Tout ce que je veux, c'est que la vidéo soit en PAUSE (je présume avec ça, nous n'entendons aucun son exactement ce dont j'ai besoin) si et quand la vidéo quitte la fenêtre, ET RESUME (rejoue) quand on fait défiler entre dans la fenêtre.

le code ci-dessus ne fonctionne pas, mais quand j'ai utilisé quelque chose d'autre comme la ligne d'affichage css, cela fonctionne. Il ya quelque chose d'autre que je voudrais demander, pardonnez-moi si je suis un million de kilomètres de résoudre cela en vous demandant cela - mais y at-il une bibliothèque connue comme isInViewport.js, qui peut rendre cela facile à réaliser? pause vid lorsque vous êtes à l'extérieur de la fenêtre d'affichage - jouez la vidéo quand vous êtes de retour à l'intérieur!

ce plugin me permettrait-il de réaliser ce que je suis après ou non?

toute aide à ce stade serait des gens immensément appréciés. Merci. :-)

Answer 1

Okay WhiteHat, merci mon pote tu m'as indiqué dans la bonne direction. Il semble que j'ai réussi à réaliser ce que j'étais après. Comme si:

<script> 
$(document).ready(function(){ 
$(window).scroll(function(){ 
    var x = $(document).scrollTop(); 
    console.log(x); 

    if ($(document).scrollTop() > 750) { 

     $('#intro-video').get(0).pause(); 

     } 

     else if ($(document).scrollTop() < 650) { 

      $('#intro-video').get(0).play(); 

     } 
    }); 
}); 
</script> 

Cela fait le travail tout à fait bien merci :)