HTML5 et Javascript pour lire des vidéos uniquement lorsqu'elles sont visibles

À l'aide de la isInViewport plugin et jQueryvoici mon code pour la tâche

$('video').each(function(){
if ($(this).is(":in-viewport")) {
$(this)[0].play();
} else {
$(this)[0].pause();
}
})

Rien de ce qui précède semblait fonctionner pour moi, mais j'ai finalement trouvé une solution: vous aurez besoin de le visible pluginet ce petit morceau de code ici:

$(window).scroll(function() {
$('video').each(function() {
if ($(this).visible(true)) {
$(this)[0].play();
} else {
$(this)[0].pause();
}
})
});

Cela permettra à n'importe quelle vidéo pour jouer seulement quand il passe dans la fenêtre d'affichage. En remplaçant visible( true ) par visible()
vous pouvez le mettre en jeu que lorsque la totalité de la vidéo, de l'élément DOM est dans la fenêtre d'affichage.

Vieille question, mais je voulais juste ajouter mon grain de sel, j'ai d'abord commencé avec le jQuery, le code ci-dessus, mais a rencontré quelques problèmes avec la mise en œuvre. Cette solution doit travailler avec plusieurs vidéos, et empêche également un problème où l'utilisateur mise en pause de la vidéo et tente de défilement et elle commence de nouveau:

<script>
var videoList = [];
var scrollPauseList = [];
var clickedPauseList = [];
</script>
<script>    
var myScrollFunc = function() {
$(".video-js").each(function(){ 
var inView = $(this).is(":in-viewport");
var isPaused = $(this)[0].player.paused();
var playerIdx = videoList.indexOf(this.id);
var scrollPaused = scrollPauseList[playerIdx];
var clickPaused = clickedPauseList[playerIdx];
if (inView) {                       
var hasEnded = $(this)[0].player.ended();
var curTime = $(this)[0].player.currentTime();
var hasStarted = curTime > 0;
if(hasStarted && !hasEnded && !clickPaused)
{
scrollPauseList[playerIdx] = false;
$(this)[0].player.play();
}
} else if(!isPaused) {                      
scrollPauseList[playerIdx] = true;
$(this)[0].player.pause();
}
});
};      
$(window).scroll(myScrollFunc);     
</script>   
<video  
class="video-js" controls></video>
<script>
$(".video-js").each(function(){ 
videoList[videoList.length] = this.id;
scrollPauseList[scrollPauseList.length] = false;
clickedPauseList[scrollPauseList.length] = false;
}); 
for(var i = 0; i < videoList.length; i++)
{
var playerID = videoList[i];
var player = videojs(playerID);
player.on('pause', function() {
var pID = videoList.indexOf(this.id());
if(!scrollPauseList[pID])
{
clickedPauseList[pID] = true;
scrollPauseList[pID] = false;
}
else
{
clickedPauseList[pID] = false;
scrollPauseList[pID] = false;
}
});
}       
</script>

Je l'ai nettoyée certaines choses, et je suis en utilisant la vidéo-js, vous devrez peut-être modifier un peu pour obtenir votre mise en oeuvre de travailler.

À l'aide de jQuery, isInViewportet Coffeescript, la solution complète pour moi ressemblait à ceci:

$(window).scroll ->
$('video:in-viewport').each -> $(@)[0].play()
$('video:not(:in-viewport)').each -> $(@)[0].pause()

Au cas où quelqu'un d'autre s'exécute dans cette question, j'ai été incapable d'utiliser Saike de la solution sur mon site WordPress en raison de la façon dont les vidéos ont été automatique intégré (MediaElement joueur). Cependant, qwazix la solution travaillé avec quelques modifications. Voici le code jQuery qui fonctionne avec le IsInView plugin. Voici mes inclure des scripts (placé à la fin de footer.php dans mon dossier du thème).

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/isInViewport.min.js" type="text/javascript"></script>
<script src="js/scrollview.min.js" type="text/javascript"></script>

Et le code jQuery (modifier 400 à votre tolérance au goût)

  $(function() {
$(window).scroll(function() {
$('.wp-video-shortcode').each(function() {
var str = $(this).attr('id');
var arr = str.split('_');
typecheck = arr[0];
if ($(this).is(":in-viewport( 400 )") && typecheck == "mep") {
mejs.players[$(this).attr('id')].media.play();
} else if (typecheck == "mep") {
mejs.players[$(this).attr('id')].media.pause();
}
});
});
});

Seul problème que j'ai avec ce code c'est qu'il ne redémarrer un clip vidéo sur faites défiler jusqu'même si en pause par l'utilisateur. N'était pas de rupture problème sur mon site. Voici le code en action: Ultrasoundoftheweek.com