只有在網頁上滾動到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視頻？

回答

相關問題