Pause non-visible videos

Question

Pause non-visible videos

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

How are you? I need help to pause the videos that come out of the view when scrolling.

I have already advanced a lot and my code is light, I attach it in case someone serves.

Where I am stuck is in the part of the height, that is, the video starts playing just when it touches the top of the screen but I need it to play about 130px below.

The code I use is:

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>

To give you an idea I leave the link that I'm working on, they asked me for something very, very, very similar to FB.

** * EYE: it is not spam, as soon as we find the solution, I will remove it. **

URL: link

That's why I need to reproduce a few pixels below so that the blue bar does not cover it.

I have not been able to move forward for 2 days: (

Greetings and in advance Thank you.

javascript videojs video

asked by Cesar Ortiz ElPatox 22.11.2017 в 02:36

source

2 answers

0

Hi, check if this jQuery plugin helps you, link

the code should look something like this:

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

answered by 22.11.2017 в 07:10

MySQL Consult several data of the same field How to capture a video screen with angularjs?

score 0 · Accepted Answer

Explained in the same code, I hope it serves you ..

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>