CODEWITHSUNDEEP
javascripthtmlhtml5-video
Oracio
Oracio

Reputation: 123

HTML5 Video run when completely visible

the two DIV would be page content

when the video appears perform automatic

var boom = function(e) {
  e.target.play();
};

var _video = document.querySelector('video');
_video.addEventListener('???', boom, false);
div {
  background: silver;
  width: 100%;
  height: 100vh;
}
video {
  margin: 15px;
  width: 500px;
}
<div></div>
<video>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
<div></div>

use EventListener, changing '???' in code

Do not work

Upvotes: 2

Views: 2089

Answers (2)

Tom Yates
Tom Yates

Reputation: 931

You can add an event listener to the window "scroll" event. There you can check whether the _video element is "in view" by passing it to the isScrolledIntoView function. If it is, play() the _video, else pause(). Example here.

JS

var _video = document.querySelector('video');

function isScrolledIntoView( element ) {
    var elementTop    = element.getBoundingClientRect().top,
        elementBottom = element.getBoundingClientRect().bottom;

    return elementTop >= 0 && elementBottom <= window.innerHeight;
}

window.addEventListener("scroll", function(){
  if (isScrolledIntoView(_video)) {
    _video.play();
  }
  else {
    _video.pause()
  }
})

HTML

<div></div>
<video>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
<div></div>

Upvotes: 4

Chris Magnussen
Chris Magnussen

Reputation: 1527

Try using the loadstart event-listener, or use the window onload event. For all video-element events, see http://www.w3.org/2010/05/video/mediaevents.html

Upvotes: 1

Related Questions