0

my question is related to this question this question. This is my fiddle I have four videos on my page and I want each video to play only when the user scroll down to it. I set the videos on my page at autoplay. So, they all start playing at the same time. Is there a way, they play only when I scroll to that part of the page. This is my page

HTML

<div id="tv_container">
<video width="245" height="240" autoplay loop id="vid1">
<source src="../snapchat/wp-content/uploads/2016/02/Snapchat%20Video%20main.mp4" type="video/mp4">
 Your browser does not support the video tag.
</video>
</div>

CSS

 #tv_container {
    width: 360px; 
    height: 800px; 
    position: relative;
}
#tv_container:after{
    content: '';
    display: block;
  background: url('http://mediacentral.ie/snapchat/wp-content/uploads/2016/02/Cell.jpg') no-repeat;
    width: 100%;
    height: 100%;
    left: 0px;

JS

var bindScroll = function(ele, evt, fcn) {
        ele[window.addEventListener ? 'addEventListener' : 'attachEvent']( window.addEventListener ? evt : 'on' + evt, fcn, false);
    }
var scrollPos = function() {
        var doc = document.documentElement;
        return {
            'left': (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0), 
            'top': (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0)
        };
    }    
var playerOffset = document.getElementById('vid1').offsetTop;
var scrollPlayed = false;
var playerInView = function() {
        var diff = playerOffset - scrollPos().top;
        var adjust = window.innerHeight > (480/2) ? window.innerHeight : 100;
        return diff > -100 && diff < adjust;        
    }
    var checker = null;

bindScroll(window, 'scroll', function(e) {
    clearTimeout(checker);
    if(!scrollPlayed && playerInView()) {
        checker = setTimeout(function() {
            vid1.play(true);
            scrollPlayed = true;            
        }, 100);
    }    
});
Community
  • 1
  • 1
Nauman Tanwir
  • 41
  • 2
  • 10

1 Answers1

0

Update

This demo can clearly show that each of the 4 videos will start playing once scrolled into view. The best way to test it is to wait for about 10 seconds to pass before you scroll on to the next one and you'll see the time lag (which you wouldn't see if the videos were playing simultaneously.

My multiple video version JS was too slow, fortunately I found one a jQuery solution that was astonishingly 10 times faster (first time I've seen a JQ have a significant speed advantage over JS). It wasn't just my JS, but a couple of others I've tried as well.

Snippet

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>35486236</title>
<style>
.tv_container { width: 360px; height: 800px; position: relative; margin-bottom: 200px; }
.tv_container:after { content: ''; display: block; background: url('http://mediacentral.ie/snapchat/wp-content/uploads/2016/02/Cell.jpg') no-repeat; width: 100%; height: 100%; }
.tv_container video { position: absolute; left: 40px; z-index: 5; }
video { width: 240px; height: 600px; }
</style>
</head>

<body>
<section id="zone0">
  <div class="tv_container">
    <video width="245" height="240" loop id="vid0" class="vid">
      <source src="https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4" type="video/mp4">
    </video>
  </div>
</section>
<section id="zone1">
  <div class="tv_container">
    <video width="245" height="240" loop id="vid1" class="vid">
      <source src="https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4" type="video/mp4">
    </video>
  </div>
</section>
<section id="zone2">
  <div class="tv_container">
    <video width="245" height="240" loop id="vid2" class="vid">
      <source src="https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4" type="video/mp4">
    </video>
  </div>
</section>
<section id="zone3">
  <div class="tv_container">
    <video width="245" height="240" loop id="vid3" class="vid">
      <source src="https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4" type="video/mp4">
    </video>
  </div>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
// https://stackoverflow.com/a/26508106/2813224
<script>
     $(document).ready(function() {

            var media = $('video').not("[autoplay='autoplay']");
            var tolerancePixel = 40;

            function checkMedia(){

                var scrollTop = $(window).scrollTop() + tolerancePixel;
                var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;

                media.each(function(index, el) {
                    var yTopMedia = $(this).offset().top;
                    var yBottomMedia = $(this).height() + yTopMedia;

                    if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){
                        $(this).get(0).play();
                    } else {
                        $(this).get(0).pause();
                    }
                });

            }
            $(document).on('scroll', checkMedia);
        });
</script>
</body>
</html>
Here's a demo I got and adapted from a JWPlayer demo. works by binding an event listener to scroll event. It'll measure the player's offset from window and compare it vs. scroll position. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Scroll Video in View</title>
    
<style>
#vid1 { margin: 20px auto; display: block; }
</style>  
</head>
<body>

    <main class="container">

        <h2>Scroll into video viewport</h2>
 
            <section>
    
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis enim non lorem eleifend condimentum. Praesent quis fermentum orci, eu vestibulum dolor. Vestibulum nec tempor purus, at hendrerit quam. Donec ex quam, fermentum eu dui at, varius convallis justo. Sed dictum laoreet dui, id congue nisl fermentum quis. Sed egestas tincidunt egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam nec venenatis ligula, ac suscipit diam. Ut nec odio diam. Integer vitae arcu hendrerit, venenatis ex nec, fermentum massa. Duis iaculis nulla ut lorem porta vehicula. Cras venenatis arcu a neque vestibulum mollis in eget neque. Mauris egestas felis sed augue lacinia placerat. Morbi vel enim at justo ultrices cursus ut vitae tortor. Sed scelerisque massa a elit accumsan, eget aliquam ante imperdiet. Proin ac magna tempor, fringilla ante mattis, bibendum justo.</p>

    <p>
    Sed laoreet ex hendrerit, pellentesque massa non, porta velit. Pellentesque eleifend nunc eget aliquam vehicula. Donec libero neque, rhoncus non imperdiet ac, ornare eu velit. Nullam fringilla venenatis nulla, non faucibus nisl vulputate id. Integer sit amet lacinia eros. Donec eros tortor, blandit non tempor at, commodo non turpis. Sed accumsan sed lacus ac sagittis. Donec eget feugiat tortor. Vestibulum vulputate turpis vel augue tincidunt facilisis. Nullam lectus leo, laoreet ut consectetur sit amet, vestibulum bibendum lectus. Sed sed ipsum sed urna malesuada finibus. Ut egestas ullamcorper molestie. Aenean ultricies mi felis, non fringilla augue luctus quis. Suspendisse odio metus, semper sit amet ullamcorper vitae, pellentesque eu diam.</p>

    <p>
    In luctus augue at aliquam suscipit. Aliquam a gravida massa. Sed rhoncus lacus ac mattis efficitur. Pellentesque sit amet ipsum sit amet eros venenatis consectetur non vel ex. Sed vitae rhoncus augue. Proin molestie mattis nibh, sed tincidunt orci viverra ut. Curabitur finibus tempus blandit. Donec vitae sagittis urna, in condimentum turpis. Cras elit odio, tempor sed pretium sit amet, posuere at arcu. Integer urna mi, pulvinar ut risus id, iaculis rhoncus turpis. Nam faucibus, enim nec faucibus pellentesque, sem lectus luctus purus, vitae ultricies dolor magna eu ex. In hac habitasse platea dictumst.</p>

    <p>
    Duis sollicitudin accumsan quam, eget ultricies metus consectetur vel. Sed sollicitudin elementum felis. Sed laoreet vehicula massa sed ultrices. Nullam hendrerit elit ac egestas bibendum. Mauris eleifend posuere vulputate. Nullam in arcu eu dui rutrum scelerisque id mattis urna. Aliquam ut tellus urna. Ut sit amet tellus ut justo hendrerit scelerisque eget at leo. Nullam facilisis scelerisque ultrices.</p>

    <p>
    Etiam egestas tincidunt eros, eu dictum odio molestie quis. Curabitur rhoncus lacinia felis, eu imperdiet risus consequat ut. Nulla egestas massa vulputate justo molestie, a ultricies ex euismod. Curabitur eleifend congue turpis non ornare. Fusce lacinia blandit ligula, tristique dapibus tellus sodales consectetur. Cras dolor nisl, condimentum ac nisl non, hendrerit venenatis dui. Donec sed libero in ante auctor aliquam eu posuere tellus. Vestibulum eget laoreet ipsum. Suspendisse dictum, sapien sed semper scelerisque, tellus massa lobortis ante, in luctus enim sapien ac diam.</p>

    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis enim non lorem eleifend condimentum. Praesent quis fermentum orci, eu vestibulum dolor. Vestibulum nec tempor purus, at hendrerit quam. Donec ex quam, fermentum eu dui at, varius convallis justo. Sed dictum laoreet dui, id congue nisl fermentum quis. Sed egestas tincidunt egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam nec venenatis ligula, ac suscipit diam. Ut nec odio diam. Integer vitae arcu hendrerit, venenatis ex nec, fermentum massa. Duis iaculis nulla ut lorem porta vehicula. Cras venenatis arcu a neque vestibulum mollis in eget neque. Mauris egestas felis sed augue lacinia placerat. Morbi vel enim at justo ultrices cursus ut vitae tortor. Sed scelerisque massa a elit accumsan, eget aliquam ante imperdiet. Proin ac magna tempor, fringilla ante mattis, bibendum justo.</p>

    <p>
    Sed laoreet ex hendrerit, pellentesque massa non, porta velit. Pellentesque eleifend nunc eget aliquam vehicula. Donec libero neque, rhoncus non imperdiet ac, ornare eu velit. Nullam fringilla venenatis nulla, non faucibus nisl vulputate id. Integer sit amet lacinia eros. Donec eros tortor, blandit non tempor at, commodo non turpis. Sed accumsan sed lacus ac sagittis. Donec eget feugiat tortor. Vestibulum vulputate turpis vel augue tincidunt facilisis. Nullam lectus leo, laoreet ut consectetur sit amet, vestibulum bibendum lectus. Sed sed ipsum sed urna malesuada finibus. Ut egestas ullamcorper molestie. Aenean ultricies mi felis, non fringilla augue luctus quis. Suspendisse odio metus, semper sit amet ullamcorper vitae, pellentesque eu diam.</p>

    <p>
    In luctus augue at aliquam suscipit. Aliquam a gravida massa. Sed rhoncus lacus ac mattis efficitur. Pellentesque sit amet ipsum sit amet eros venenatis consectetur non vel ex. Sed vitae rhoncus augue. Proin molestie mattis nibh, sed tincidunt orci viverra ut. Curabitur finibus tempus blandit. Donec vitae sagittis urna, in condimentum turpis. Cras elit odio, tempor sed pretium sit amet, posuere at arcu. Integer urna mi, pulvinar ut risus id, iaculis rhoncus turpis. Nam faucibus, enim nec faucibus pellentesque, sem lectus luctus purus, vitae ultricies dolor magna eu ex. In hac habitasse platea dictumst.</p>

    <p>
    Duis sollicitudin accumsan quam, eget ultricies metus consectetur vel. Sed sollicitudin elementum felis. Sed laoreet vehicula massa sed ultrices. Nullam hendrerit elit ac egestas bibendum. Mauris eleifend posuere vulputate. Nullam in arcu eu dui rutrum scelerisque id mattis urna. Aliquam ut tellus urna. Ut sit amet tellus ut justo hendrerit scelerisque eget at leo. Nullam facilisis scelerisque ultrices.</p>

    <p>
    Etiam egestas tincidunt eros, eu dictum odio molestie quis. Curabitur rhoncus lacinia felis, eu imperdiet risus consequat ut. Nulla egestas massa vulputate justo molestie, a ultricies ex euismod. Curabitur eleifend congue turpis non ornare. Fusce lacinia blandit ligula, tristique dapibus tellus sodales consectetur. Cras dolor nisl, condimentum ac nisl non, hendrerit venenatis dui. Donec sed libero in ante auctor aliquam eu posuere tellus. Vestibulum eget laoreet ipsum. Suspendisse dictum, sapien sed semper scelerisque, tellus massa lobortis ante, in luctus enim sapien ac diam.</p>

    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis enim non lorem eleifend condimentum. Praesent quis fermentum orci, eu vestibulum dolor. Vestibulum nec tempor purus, at hendrerit quam. Donec ex quam, fermentum eu dui at, varius convallis justo. Sed dictum laoreet dui, id congue nisl fermentum quis. Sed egestas tincidunt egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam nec venenatis ligula, ac suscipit diam. Ut nec odio diam. Integer vitae arcu hendrerit, venenatis ex nec, fermentum massa. Duis iaculis nulla ut lorem porta vehicula. Cras venenatis arcu a neque vestibulum mollis in eget neque. Mauris egestas felis sed augue lacinia placerat. Morbi vel enim at justo ultrices cursus ut vitae tortor. Sed scelerisque massa a elit accumsan, eget aliquam ante imperdiet. Proin ac magna tempor, fringilla ante mattis, bibendum justo.</p>

    <p>
    Sed laoreet ex hendrerit, pellentesque massa non, porta velit. Pellentesque eleifend nunc eget aliquam vehicula. Donec libero neque, rhoncus non imperdiet ac, ornare eu velit. Nullam fringilla venenatis nulla, non faucibus nisl vulputate id. Integer sit amet lacinia eros. Donec eros tortor, blandit non tempor at, commodo non turpis. Sed accumsan sed lacus ac sagittis. Donec eget feugiat tortor. Vestibulum vulputate turpis vel augue tincidunt facilisis. Nullam lectus leo, laoreet ut consectetur sit amet, vestibulum bibendum lectus. Sed sed ipsum sed urna malesuada finibus. Ut egestas ullamcorper molestie. Aenean ultricies mi felis, non fringilla augue luctus quis. Suspendisse odio metus, semper sit amet ullamcorper vitae, pellentesque eu diam.</p>

    <p>
    In luctus augue at aliquam suscipit. Aliquam a gravida massa. Sed rhoncus lacus ac mattis efficitur. Pellentesque sit amet ipsum sit amet eros venenatis consectetur non vel ex. Sed vitae rhoncus augue. Proin molestie mattis nibh, sed tincidunt orci viverra ut. Curabitur finibus tempus blandit. Donec vitae sagittis urna, in condimentum turpis. Cras elit odio, tempor sed pretium sit amet, posuere at arcu. Integer urna mi, pulvinar ut risus id, iaculis rhoncus turpis. Nam faucibus, enim nec faucibus pellentesque, sem lectus luctus purus, vitae ultricies dolor magna eu ex. In hac habitasse platea dictumst.</p>

    <p>
    Duis sollicitudin accumsan quam, eget ultricies metus consectetur vel. Sed sollicitudin elementum felis. Sed laoreet vehicula massa sed ultrices. Nullam hendrerit elit ac egestas bibendum. Mauris eleifend posuere vulputate. Nullam in arcu eu dui rutrum scelerisque id mattis urna. Aliquam ut tellus urna. Ut sit amet tellus ut justo hendrerit scelerisque eget at leo. Nullam facilisis scelerisque ultrices.</p>

    <p>
    Etiam egestas tincidunt eros, eu dictum odio molestie quis. Curabitur rhoncus lacinia felis, eu imperdiet risus consequat ut. Nulla egestas massa vulputate justo molestie, a ultricies ex euismod. Curabitur eleifend congue turpis non ornare. Fusce lacinia blandit ligula, tristique dapibus tellus sodales consectetur. Cras dolor nisl, condimentum ac nisl non, hendrerit venenatis dui. Donec sed libero in ante auctor aliquam eu posuere tellus. Vestibulum eget laoreet ipsum. Suspendisse dictum, sapien sed semper scelerisque, tellus massa lobortis ante, in luctus enim sapien ac diam.</p>

    <video id="vid1" src="https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4" controls width="640" height="auto"></video>
        
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis enim non lorem eleifend condimentum. Praesent quis fermentum orci, eu vestibulum dolor. Vestibulum nec tempor purus, at hendrerit quam. Donec ex quam, fermentum eu dui at, varius convallis justo. Sed dictum laoreet dui, id congue nisl fermentum quis. Sed egestas tincidunt egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam nec venenatis ligula, ac suscipit diam. Ut nec odio diam. Integer vitae arcu hendrerit, venenatis ex nec, fermentum massa. Duis iaculis nulla ut lorem porta vehicula. Cras venenatis arcu a neque vestibulum mollis in eget neque. Mauris egestas felis sed augue lacinia placerat. Morbi vel enim at justo ultrices cursus ut vitae tortor. Sed scelerisque massa a elit accumsan, eget aliquam ante imperdiet. Proin ac magna tempor, fringilla ante mattis, bibendum justo.</p>

    <p>
    Sed laoreet ex hendrerit, pellentesque massa non, porta velit. Pellentesque eleifend nunc eget aliquam vehicula. Donec libero neque, rhoncus non imperdiet ac, ornare eu velit. Nullam fringilla venenatis nulla, non faucibus nisl vulputate id. Integer sit amet lacinia eros. Donec eros tortor, blandit non tempor at, commodo non turpis. Sed accumsan sed lacus ac sagittis. Donec eget feugiat tortor. Vestibulum vulputate turpis vel augue tincidunt facilisis. Nullam lectus leo, laoreet ut consectetur sit amet, vestibulum bibendum lectus. Sed sed ipsum sed urna malesuada finibus. Ut egestas ullamcorper molestie. Aenean ultricies mi felis, non fringilla augue luctus quis. Suspendisse odio metus, semper sit amet ullamcorper vitae, pellentesque eu diam.</p>

    <p>
    In luctus augue at aliquam suscipit. Aliquam a gravida massa. Sed rhoncus lacus ac mattis efficitur. Pellentesque sit amet ipsum sit amet eros venenatis consectetur non vel ex. Sed vitae rhoncus augue. Proin molestie mattis nibh, sed tincidunt orci viverra ut. Curabitur finibus tempus blandit. Donec vitae sagittis urna, in condimentum turpis. Cras elit odio, tempor sed pretium sit amet, posuere at arcu. Integer urna mi, pulvinar ut risus id, iaculis rhoncus turpis. Nam faucibus, enim nec faucibus pellentesque, sem lectus luctus purus, vitae ultricies dolor magna eu ex. In hac habitasse platea dictumst.</p>

    <p>
    Duis sollicitudin accumsan quam, eget ultricies metus consectetur vel. Sed sollicitudin elementum felis. Sed laoreet vehicula massa sed ultrices. Nullam hendrerit elit ac egestas bibendum. Mauris eleifend posuere vulputate. Nullam in arcu eu dui rutrum scelerisque id mattis urna. Aliquam ut tellus urna. Ut sit amet tellus ut justo hendrerit scelerisque eget at leo. Nullam facilisis scelerisque ultrices.</p>

    <p>
    Etiam egestas tincidunt eros, eu dictum odio molestie quis. Curabitur rhoncus lacinia felis, eu imperdiet risus consequat ut. Nulla egestas massa vulputate justo molestie, a ultricies ex euismod. Curabitur eleifend congue turpis non ornare. Fusce lacinia blandit ligula, tristique dapibus tellus sodales consectetur. Cras dolor nisl, condimentum ac nisl non, hendrerit venenatis dui. Donec sed libero in ante auctor aliquam eu posuere tellus. Vestibulum eget laoreet ipsum. Suspendisse dictum, sapien sed semper scelerisque, tellus massa lobortis ante, in luctus enim sapien ac diam.</p>

    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis enim non lorem eleifend condimentum. Praesent quis fermentum orci, eu vestibulum dolor. Vestibulum nec tempor purus, at hendrerit quam. Donec ex quam, fermentum eu dui at, varius convallis justo. Sed dictum laoreet dui, id congue nisl fermentum quis. Sed egestas tincidunt egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam nec venenatis ligula, ac suscipit diam. Ut nec odio diam. Integer vitae arcu hendrerit, venenatis ex nec, fermentum massa. Duis iaculis nulla ut lorem porta vehicula. Cras venenatis arcu a neque vestibulum mollis in eget neque. Mauris egestas felis sed augue lacinia placerat. Morbi vel enim at justo ultrices cursus ut vitae tortor. Sed scelerisque massa a elit accumsan, eget aliquam ante imperdiet. Proin ac magna tempor, fringilla ante mattis, bibendum justo.</p>

    <p>
    Sed laoreet ex hendrerit, pellentesque massa non, porta velit. Pellentesque eleifend nunc eget aliquam vehicula. Donec libero neque, rhoncus non imperdiet ac, ornare eu velit. Nullam fringilla venenatis nulla, non faucibus nisl vulputate id. Integer sit amet lacinia eros. Donec eros tortor, blandit non tempor at, commodo non turpis. Sed accumsan sed lacus ac sagittis. Donec eget feugiat tortor. Vestibulum vulputate turpis vel augue tincidunt facilisis. Nullam lectus leo, laoreet ut consectetur sit amet, vestibulum bibendum lectus. Sed sed ipsum sed urna malesuada finibus. Ut egestas ullamcorper molestie. Aenean ultricies mi felis, non fringilla augue luctus quis. Suspendisse odio metus, semper sit amet ullamcorper vitae, pellentesque eu diam.</p>

    <p>
    In luctus augue at aliquam suscipit. Aliquam a gravida massa. Sed rhoncus lacus ac mattis efficitur. Pellentesque sit amet ipsum sit amet eros venenatis consectetur non vel ex. Sed vitae rhoncus augue. Proin molestie mattis nibh, sed tincidunt orci viverra ut. Curabitur finibus tempus blandit. Donec vitae sagittis urna, in condimentum turpis. Cras elit odio, tempor sed pretium sit amet, posuere at arcu. Integer urna mi, pulvinar ut risus id, iaculis rhoncus turpis. Nam faucibus, enim nec faucibus pellentesque, sem lectus luctus purus, vitae ultricies dolor magna eu ex. In hac habitasse platea dictumst.</p>

    <p>
    Duis sollicitudin accumsan quam, eget ultricies metus consectetur vel. Sed sollicitudin elementum felis. Sed laoreet vehicula massa sed ultrices. Nullam hendrerit elit ac egestas bibendum. Mauris eleifend posuere vulputate. Nullam in arcu eu dui rutrum scelerisque id mattis urna. Aliquam ut tellus urna. Ut sit amet tellus ut justo hendrerit scelerisque eget at leo. Nullam facilisis scelerisque ultrices.</p>

    <p>
    Etiam egestas tincidunt eros, eu dictum odio molestie quis. Curabitur rhoncus lacinia felis, eu imperdiet risus consequat ut. Nulla egestas massa vulputate justo molestie, a ultricies ex euismod. Curabitur eleifend congue turpis non ornare. Fusce lacinia blandit ligula, tristique dapibus tellus sodales consectetur. Cras dolor nisl, condimentum ac nisl non, hendrerit venenatis dui. Donec sed libero in ante auctor aliquam eu posuere tellus. Vestibulum eget laoreet ipsum. Suspendisse dictum, sapien sed semper scelerisque, tellus massa lobortis ante, in luctus enim sapien ac diam.</p>

</section>
</main>

<script>

var bindScroll = function(ele, evt, fcn) {
        ele[window.addEventListener ? 'addEventListener' : 'attachEvent']( window.addEventListener ? evt : 'on' + evt, fcn, false);
    }
var scrollPos = function() {
        var doc = document.documentElement;
        return {
            'left': (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0), 
            'top': (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0)
        };
    }    
var playerOffset = document.getElementById('vid1').offsetTop;
var scrollPlayed = false;
var playerInView = function() {
        var diff = playerOffset - scrollPos().top;
        var adjust = window.innerHeight > (480/2) ? window.innerHeight : 100;
        return diff > -100 && diff < adjust;        
    }
    var checker = null;
 
bindScroll(window, 'scroll', function(e) {
    clearTimeout(checker);
    if(!scrollPlayed && playerInView()) {
        checker = setTimeout(function() {
            vid1.play(true);
            scrollPlayed = true;            
        }, 100);
    }    
});

</script>   

</body>
</html>
Community
  • 1
  • 1
zer00ne
  • 41,936
  • 6
  • 41
  • 68
  • sounds a perfect solution. but it didn't on my page. – Nauman Tanwir Feb 18 '16 at 16:11
  • Place as much is as relevant HTML, CSS, and JS/JQ here as a snippet and/or fiddle, plunker, etc.. This question will be flagged soon if it doesn't. – zer00ne Feb 18 '16 at 16:20
  • This is my fiddle (https://jsfiddle.net/rp3nkjmp/) I have four videos on my page and I want each video to play only when the user scroll down to it. This is my page (http://mediacentral.ie/snapchat/) – Nauman Tanwir Feb 18 '16 at 16:28
  • OK, see your question? That's what'll get you more people to answer for you. Anyways gimme a min. – zer00ne Feb 18 '16 at 17:04
  • @NaumanTanwir just got back from work, I'm going to see if `.each()`can help us. – zer00ne Feb 18 '16 at 22:36
  • @NaumanTanwir, I finished yesterday, check it out, it works great. – zer00ne Feb 19 '16 at 16:28