Reproducir video solo cuando este en pantalla

[insyse]

Hola, he visto algunas paginas que cargan videos en HTML5, y que solo se reproducen cuando la pantalla del visitante (scroll) muestra el contenedor del video, si se baja o sube el scroll el video se pausa.

Como se hace eso?

Tengo una pagina que de acuerdo al menú seleccionado sube o baja el scroll y quiero un colocarle un video autoreproducible, pero que solo se reproduzca cuando el scroll llegue al div que contiene el video.

[Alexis88]

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:

var 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.

[insyse]

Hola Alexis,

Gracias por tu respuesta, la voy a probar y te cuento, pero de antemano te digo que me gusta mucho la explicación de la misma. No siempre explican el código y no todos somos programadores para entenderlo.