0

Hi there I am trying to make a video on my site pause when I scroll away to another part of the site.

I am using HTML5 video

 <video id="video_background" preload="auto" volume="5" autoplay="1"><!--or turn on loop="loop"-->
        <source src="videos/trailer.webm" type="video/webm">
        <source src="videos/trailer.mp4" type="video/mp4">
        <source src="videos/trailer.ogv" type="video/ogg ogv">
 </video>

I tried using the following code from someone else on stackoverflow but that doesnt do anything to my site

var videos = document.getElementsByTagName("video_background"), fraction = 0.8;

function checkScroll() {

for(var i = 0; i < videos.length; i++) {

    var video = videos[i];

    var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w, //right
        b = y + h, //bottom
        visibleX, visibleY, visible;

        visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
        visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

        visible = visibleX * visibleY / (w * h);

        if (visible > fraction) {
            video.play();
        } else {
            video.pause();
        }

}

}

window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);
new_frontenddev
  • 173
  • 3
  • 6
  • 20
  • 2
    getElementsByTagName gets (as the name says) an element by its TAGNAME. getElementById("video_background") is correct for your code – mador Jun 11 '14 at 20:20
  • OMG! I think i am just a little too flustered with my deadline I totally missed that. Sorry my bad. Thanks! – new_frontenddev Jun 11 '14 at 20:28
  • try this http://stackoverflow.com/questions/15395920/play-html5-video-when-scrolled-to/15396941#15396941 – brianchirls Jun 12 '14 at 03:06

0 Answers0