HTML5 e Javascript per riprodurre i video solo quando visibili

Sono interessato a configurare una pagina HTML con più video clip in modo che ogni clip video venga riprodotto solo mentre è visibile e quindi si interrompe quando non è visibile.

Ho trovato questo ottimo esempio di come questo può essere implementato con una clip, ma non sono stato in grado di modificare il codice per lavorare con più clip. Forse ho bisogno di convertire questo codice in una funzione per una facile riutilizzabilità?

Ecco cosa ho fatto finora (JS Bin linkato sopra modificato per 2 clip anziché uno).

Questo codice sembra funzionare solo per una delle due clip.

     JS Bin  #right { position: absolute; top: 2000px; } #video1 { position: absolute; left: 2000px; top: 2000px; } #video2 { position: absolute; left: 2000px; top: 3000px; }     #  
scroll down please...
var video = document.getElementById('video1'), fraction = 0.8; function checkScroll() { var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w, //right b = y + h, //bottom visibleX, visibleY, visible; visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset)); visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset)); visible = visibleX * visibleY / (w * h); if (visible > fraction) { video.play(); } else { video.pause(); } } checkScroll(); window.addEventListener('scroll', checkScroll, false); window.addEventListener('resize', checkScroll, false); var video = document.getElementById('video2'), fraction = 0.8; function checkScroll() { var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w, //right b = y + h, //bottom visibleX, visibleY, visible; visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset)); visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset)); visible = visibleX * visibleY / (w * h); if (visible > fraction) { video.play(); } else { video.pause(); } } checkScroll(); window.addEventListener('scroll', checkScroll, false); window.addEventListener('resize', checkScroll, false);

Utilizzando il plugin isInViewport e jQuery , ecco il mio codice per l’attività

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

OK, penso, deve essere qualcosa del genere:

 var videos = document.getElementsByTagName("video"); function checkScroll() { for(var i = 0; i < videos.length; i++) { var video = videos[i]; var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w, //right b = y + h, //bottom visibleX, visibleY, visible; visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset)); visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset)); visible = visibleX * visibleY / (w * h); if (visible > fraction) { video.play(); } else { video.pause(); } } } window.addEventListener('scroll', checkScroll, false); window.addEventListener('resize', checkScroll, false); 

Nessuno dei precedenti sembrava funzionare per me, ma alla fine ho trovato un modo: avrai bisogno del plugin visible e di questo piccolo pezzo di codice qui:

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

Ciò consentirà a qualsiasi video di essere riprodotto solo quando entra nella finestra. Sostituendo visible( true ) con visible() , puoi impostarlo in modo che venga riprodotto solo quando l’intero elemento video DOM si trova nella finestra.

È necessario verificare se il video è visibile durante lo scorrimento.

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

Vecchia domanda, ma volevo solo aggiungere i miei due centesimi, inizialmente ho iniziato con il codice jQuery sopra, ma ho riscontrato alcuni problemi con l’implementazione. Questa soluzione dovrebbe funzionare con più video, e impedisce anche un problema in cui l’utente mette in pausa un video e prova a scorrere via e ricomincia semplicemente:

     

Ho ripulito alcune cose e sto usando video-js, quindi potrebbe essere necessario modificarlo un po 'per far funzionare la tua implementazione.

Ho provato molte soluzioni, l’unica parzialmente funzionante è quella pubblicata qui sotto. Il problema è che avendo 3 video sulla pagina, il secondo e il terzo sono fondamentalmente controllati dal primo.

Quindi iniziano a giocare quando la pagina viene caricata (mentre dovrebbero essere riprodotti quando sono nella finestra) e vengono messi in pausa quando il primo viene messo in pausa, qualche suggerimento su come farlo funzionare con più video?

Provato usando getElementById ma non ha funzionato, ho provato anche i plugin jquery ma non ci sono risultati positivi.

Qui hai la pagina www dove puoi vedere cosa succede e ovviamente tutto il codice sorgente.

http://185.197.128.183/~monompro/

 window.onload = function() { var videos = document.getElementsByTagName("video"), fraction = 0.8; function checkScroll() { for (var i = 0; i < videos.length; i++) { var video = videos[i]; var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w, //right b = y + h, //bottom visibleX, visibleY, visible; visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset)); visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset)); visible = visibleX * visibleY / (w * h); if (visible > fraction) { video.play(); } else { video.pause(); } } } window.addEventListener('scroll', checkScroll, false); window.addEventListener('resize', checkScroll, false); } 

Usando jQuery, isInViewport e Coffeescript, la soluzione completa per me assomigliava a questa:

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

È così che sono riuscito a riprodurre un video solo quando l’utente lo scorre. Ho usato il plugin IsInViewport. Spero che tu lo trovi utile!

 $(window).scroll(function() { var video = $('.yourvideo'); $(video).each(function(){ if(video.is(':in-viewport')){ video[0].play(); video.removeClass('yourvideo'); //I removed class to stop repeating the action ".play()" when it is scrolled again. } }); }); 

Nel caso in cui qualcun altro si imbattesse in questa domanda, non ero in grado di utilizzare la soluzione di Saike sul mio sito WordPress a causa del modo in cui i video sono stati integrati automaticamente (lettore MediaElement). Tuttavia, la soluzione di qwazix ha funzionato con alcune modifiche. Ecco il codice jQuery che funziona con il plugin IsInView . Ecco i miei script di inclusione (posizionati alla fine di footer.php nella mia cartella dei temi).

    

E il codice jQuery (modifica 400 al tuo gradimento di tolleranza)

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

L’unico problema con questo codice è che riavvia un video clip sullo scorrimento anche se messo in pausa dall’utente. Non è stato un problema di rottura del mio sito. Ecco il codice in azione: Ultrasoundoftheweek.com

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