Creo que
esto es lo que buscas. También hay un plugin en jQuery de nombre
Lazy Load que permite hacer lo mismo.
En el primer enlace, se retrasa la carga de imágenes en un documento hasta que la barra de desplazamiento se encuentre a la altura de las mismas, recién en ese momento se cargan y muestran. En tu caso, harías algo similar, con la diferencia que para reproducir y pausar el vídeo, utilizarías los métodos
play y
pause.
Saludos
Edito:
Como me interesó el tema, decidí hacer mi algoritmo:
Código Javascript
:
Ver originalvar video = document.getElementsByTagName("video")[0];
window.addEventListener("scroll", function(){
if (this.scrollY >= (video.offsetTop - document.documentElement.clientHeight))
video.play();
else
video.pause();
}, false);
Cuando hago scroll (desplazarnos con la barra de desplazamiento vertical), verifico lo siguiente; si la cantidad de píxeles que me he desplazado es mayor o igual a la diferencia de la distancia que hay entre el elemento
<video> y el cuerpo del documento (el tope) menos la altura del elemento raíz del documento, ejecuto el método
play(), caso contrario, ejecuto el método
pause().
Métodos utilizados:
-
scrollY
-
offsetTop
-
clientHeight
-
documentElement (propiedad)
Lo he probado localmente y va de maravilla.
