[SOLUCIONADO] Reproducir video html5 al pasar por esa sección

[raptor00]

Hola, tengo un video en mi web utilizando la etiqueta video de html5 pero estoy buscando algun codigo que me permita reproducir el video cuando el usuario haga scroll y llegue a la seccion donde se encuentra dicho video, que comience a reproducirse de forma automatica y cuando ya pase esa seccion pues que haga stop y asi, cada vez que el usuario se desplace por la pagina y llegue a esa seccion pues que el video empiece a reproducirse de forma automatica o que continue la reproduccion donde se quedó en ese momento, alguna idea de como se puede lograr esto.?? El video inicialmente se encuentra en stop.

[Alexis88]

Necesitas comprobar dos cosas: que la cantidad de píxeles desplazados por la barra sea mayor o igual a la diferencia entre la distancia del tope del elemento hasta la parte superior del documento menos la altura de la parte visible del documento y que la suma de la cantidad de píxeles desplazados por la barra más la altura de la parte visible del documento sea menor o igual que la distancia del tope del elemento hasta la parte superior del documento más la altura del elemento.

Código Javascript:

window.addEventListener("scroll", function(){
    if (this.scrollY >= seccion.offsetTop - document.documentElement.clientHeight && 
        this.scrollY + document.documentElement.clientHeight <= seccion.offsetHeight + seccion.offsetTop){
        video.play();
    }
    else{
        video.pause();
    }
}, false);
 

Un saludo

[raptor00]

ok, como lo adapto a mi html entonces? donde dices seccion seria poner video..???

esta seria mi seccion de video

Código HTML:

<section id="video">               
 
    <div id="insta_title">Video</div>
    <div id="insta_img">
        <video src="video/video.ogv" controls></video>   
    </div>
 
</section>
 

[Alexis88]

La sección sería tu <section> y el vídeo, tu <video>.

[raptor00]

pues lo puse asi y no funciona

Código Javascript:

window.addEventListener("scroll", function(){
        if (this.scvideoCaparollY >= seccion.offsetTop - document.documentElement.clientHeight && 
            this.scrollY + document.documentElement.clientHeight <= videoCapa.offsetHeight + videoCapa.offsetTop){
            video.play();
        }
        else{
            video.pause();
        }
    }, false);
 

Código HTML:

<section id="videoCapa">               
    
    <div id="insta_title">Video</div>
    <div id="insta_img">
        <video src="video/video.ogv" controls></video>   
    </div>
                    
                     
</section>
 

[Alexis88]

Primero tienes que tomar a los elementos, guardarlos en variables y recién podrás trabajar con ellas.

Código Javascript:

var seccion = document.querySelector("#videoCapa"),
    video = document.querySelector("#insta_img video");
 

Necesitas aprender más de JavaScript. Esto te puede ayudar.

Un saludo

[raptor00]

pues muchas gracias, hice varias pruebas y ya me funcionó, tuve que poner el código script despues del html del video, como ya ves no tengo mucha experiencia en javascript, y te agradezco el tutorial, sin duda lo voy a pasar. Aqui te dejo el código de cómo me funcionó, quisás le ayude a alguien más.

Código HTML:

<section id="videoCapa">               
    
    <div id="insta_title">Video</div>
    <div id="insta_img">
        <video id="vi" src="video/video.ogv" controls ></video>   
    </div>
                     
</section>
 

Código Javascript:

<script>
    var seccion = document.querySelector("#vi"),
        video = document.querySelector("#insta_img video");
        
        window.addEventListener("scroll", function(){
        if (this.scrollY >= seccion.offsetTop - document.documentElement.clientHeight && 
            this.scrollY + document.documentElement.clientHeight <= seccion.offsetHeight + seccion.offsetTop  + 250){
            video.play();
        }
        else{
            video.pause();
        }
    }, false);
</script>
 

le hice un aumento de 250 para que tenga un mayor espacio de play(), porque anteriormente el area activa para reproducir el video era muy pequeña y entonces el play solo funcionaba en un lugar especifico, de esta forma mientras vas haciendo el scroll se nota mas el play(), si estoy mal en algo me dices, pero a mi me funciona.

saludos!!