1

Qué tal. Necesito ayuda para pausar los videos que salen de la vista al dar scroll.

Ya eh avanzado bastante y mi código es ligero, lo adjunto por si a alguien le sirve.

Donde me encuentro atorado es en la parte de la altura, es decir el video comienza a reproducirse justo cuando toca la parte superior de la pantalla pero requiero que se reproduzca unos 130px más abajo.

El código que utilizo es:

var vids = document.getElementsByClassName('_makina'); 

for (var i = vids.length - 1; i >= 0; i--) {
	//pause all the videos by default
	vids[i].pause();
}

window.onscroll = autoplay;

function autoplay(){
    for (var i = vids.length - 1; i >= 0; i--) {
        var currentYpos = window.pageYOffset || document.documentElement.scrollTop;
		if ( currentYpos >= vids[i].offsetTop && currentYpos <= vids[i].offsetTop + vids[i].offsetHeight ) {
			vids[i].play();
		}else{
			vids[i].pause();
		}
	}
}
.space {
  height: 750px;
  background-color:#252525;
  color: #fff;
  text-align:center;
}

.space2 {
  height: 750px;
  background-color:#151515;
  color: #fff;
  text-align:center;
}

.space3 {
  height: 750px;
  background-color:#dc0031;
  color: #fff;
  text-align:center;
}
<div class="space"><h3><br><br><br>Desplazate hacia abajo</h3></div>

<video id="myVid" width="100%" autoplay preload class="_makina">
  <source type="video/mp4" src="https://makina.com.mx/videos/847692459.mp4" >
</video>

<div class="space2"><br><br><br><h3>Sigue más abajo</h3></div>

<video id="myVid" width="100%" autoplay preload class="_makina">
  <source type="video/mp4" src="http://makina.com.mx/videos/847692459.mp4" >
</video>

<div class="space3"><br><br><br><h3>Aquí acabamos</h3></div>

Para que se den una idea les dejo el link en el que estoy trabajando, me pidieron algo muy, muy , muy parecido a FB.

** *OJO: no es spam, en cuanto encontremos la solución lo quitaré. **

URL: https://makina.com.mx/new2/

Por eso necesito que se reproduzca unos cuantos pixeles más abajo para que la barra azul no lo tape.

Llevo 2 días sin poder avanzar :(

Saludos y de antemano Gracias.

2 respuestas 2

0

Explicado en el mismo código, espero te sirva..

window.addEventListener("DOMContentLoaded", finder);

function finder(){
 var vid = document.getElementById("midiv"),
     text = document.getElementById("status");
  document.addEventListener("scroll", analyzer);
 
  function analyzer(){
     var w = vid.offsetWidth,
     scrolled = vid.getBoundingClientRect(),
     eq = w - Math.abs(scrolled.top); // Con esto podrás saber que porción del div se está viendo, ya que, se le resta al tamaño total del div INCLUYENDO BORDES con offsetWidth, y getBoundingClientRect me devuelve la position relativa del elemento, con relación a lo VISIBLE, osea si moviste 30 px hacia abajo , este mostrará -30, por eso también el uso de Math.abs ( valor absoluto ) y por qué -30 ? porque las coordenadas comienzan en (0,0) , en el borde superior izquierdo, por eso también al body lo puse con un margin y un padding de 0( en el css), para que no altere esto. 

     
     if(eq === w)  text.innerHTML =                 "Reproduciendose"; // 
     else  text.innerHTML = "Pausado..";
  }
}

// Esto es sólo para generar <br> y así tener la barra, NO TOMAR EN CUENTA.-
for(var i = 0 ; i < 20 ; i++ ) {
var e = document.createElement("br"); document.body.appendChild(e);
}
#midiv {
width: 200px;height:200px;border:2px solid black;
}
body, html {margin: 0; padding: 0;}

#status {
 position: relative; 
 top: 45%;
 left: 23%;
 color: blue;
}
<div id="midiv">
<i id="status">Reproduciendose</i>
</div>

0

Buenas, fijate si te sirve este plugin de jquery, https://github.com/zeusdeux/isInViewport

el codigo te deberia quedar algo asi:

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.