只有在网页上滚动到html5视频才能播放html5视频？

我的问题是关于这个问题this question。这是my fiddle我在我的页面上有四个视频，我希望每个视频只在用户向下滚动时播放。我在自动播放时在自己的页面上设置了视频。所以，他们都在同一时间开始玩。有没有办法，只有当我滚动到页面的那一部分时才会玩。这是my page 只有在网页上滚动到html5视频才能播放html5视频？

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;

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); 
    }  
});

来源

2016-02-18 Nauman Tanwir

更新

此演示可以清楚地显示，一旦滚动到视图中，4个视频中的每一个都将开始播放。测试它的最好方法是等待大约10秒钟后再滚动到下一个，然后您会看到时间延迟（您不会看到视频是否在同时播放。

我的多个视频版本JS太慢了，幸运的是我发现了一个jQuery solution，它的速度惊人地快了10倍（第一次看到JQ比JS有明显的速度优势），不仅仅是我的JS，夫妇别人我试着为好。

片段

<!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>

这是我从JWPlayer演示中获得并改编的演示。通过绑定事件监听器来滚动事件。它会衡量玩家从窗口的偏移量并将其与滚动位置进行比较。

<!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> 
 
\t 
 
      <section> 
 
\t \t \t \t 
 
\t \t \t \t <p> 
 
\t \t \t \t 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> 
 

 
\t \t \t \t <p> 
 
\t \t \t \t 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> 
 

 
\t \t \t \t <p> 
 
\t \t \t \t 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> 
 

 
\t \t \t \t <p> 
 
\t \t \t \t 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> 
 

 
\t \t \t \t <p> 
 
\t \t \t \t 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> 
 

 
\t \t \t \t <p> 
 
\t \t \t \t 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> 
 

 
\t \t \t \t <p> 
 
\t \t \t \t 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> 
 

 
\t \t \t \t <p> 
 
\t \t \t \t 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> 
 

 
\t \t \t \t <p> 
 
\t \t \t \t 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> 
 

 
\t \t \t \t <p> 
 
\t \t \t \t 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> 
 

 
\t \t \t \t <p> 
 
\t \t \t \t 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> 
 

 
\t \t \t \t <p> 
 
\t \t \t \t 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> 
 

 
\t \t \t \t <p> 
 
\t \t \t \t 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> 
 

 
\t \t \t \t <p> 
 
\t \t \t \t 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> 
 

 
\t \t \t \t <p> 
 
\t \t \t \t 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> 
 

 
\t \t \t \t <video id="vid1" src="https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4" controls width="640" height="auto"></video> 
 
     
 
\t \t \t \t <p> 
 
\t \t \t \t 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> 
 

 
\t \t \t \t <p> 
 
\t \t \t \t 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> 
 

 
\t \t \t \t <p> 
 
\t \t \t \t 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> 
 

 
\t \t \t \t <p> 
 
\t \t \t \t 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> 
 

 
\t \t \t \t <p> 
 
\t \t \t \t 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> 
 

 
\t \t \t \t <p> 
 
\t \t \t \t 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> 
 

 
\t \t \t \t <p> 
 
\t \t \t \t 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> 
 

 
\t \t \t \t <p> 
 
\t \t \t \t 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> 
 

 
\t \t \t \t <p> 
 
\t \t \t \t 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> 
 

 
\t \t \t \t <p> 
 
\t \t \t \t 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>

来源

2016-02-18 16:00:20 zer00ne

听起来完美的解决方案。但它没有在我的页面上。 –

尽可能多地将HTML，CSS和JS/JQ作为代码片段和/或小提琴，plunker等进行放置。如果不是这样，这个问题很快就会被标记出来。 – zer00ne

这是我的小提琴（https://jsfiddle.net/rp3nkjmp/）我在我的页面上有四个视频，我希望每个视频只有在用户向下滚动时才能播放。这是我的网页（http://mediacentral.ie/slogged/） –

只有在网页上滚动到html5视频才能播放html5视频？

回答

相关问题