HTML5和Javascript仅在可见时播放视频

我有兴趣设置包含多个视频片段的HTML页面，以便每个视频片段仅在可见时播放，然后在视线之外时暂停播放。我发现this great example如何用一个剪辑实现，但我一直无法修改代码以使用多个剪辑。也许我需要将此代码转换为易于重用的函数？这是我到目前为止（上面链接的JS Bin为2个剪辑而不是1个剪辑）。此代码似乎只适用于两个剪辑中的一个。HTML5和Javascript仅在可见时播放视频

<!DOCTYPE html> 
<html> 
    <!-- Created using jsbin.com Source can be edited via http://jsbin.com/ocupor/1/edit 
    --> 
    <head> 
     <meta charset=utf-8 /> 
     <title>JS Bin</title> 
     <style> 
      #right { 
       position: absolute; 
       top: 2000px; 
      } 
      #video1 { 
       position: absolute; 
       left: 2000px; 
       top: 2000px; 
      } 
      #video2 { 
       position: absolute; 
       left: 2000px; 
       top: 3000px; 
      } 

     </style> 

     <style id="jsbin-css"> 
     </style> 
    </head> 
    # 
    <body style="width: 4000px; height: 4000px;"> 
     <div id="info"></div> 
     <div id="down"> 
      scroll down please... 
     </div> 
     <div id="right"> 
      scroll right please... 
     </div> 
     <video id="video1"> 
      <source src="http://video-js.zencoder.com/oceans-clip.mp4"/> 

     </video> 
     <script> 
      var video = document.getElementById('video1'), fraction = 0.8; 

      function checkScroll() { 
       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(); 
       } 
      } 

      checkScroll(); 
      window.addEventListener('scroll', checkScroll, false); 
      window.addEventListener('resize', checkScroll, false); 
     </script> 

     <video id="video2"> 
      <source src="http://video-js.zencoder.com/oceans-clip.mp4"/> 

     </video> 
     <script> 
      var video = document.getElementById('video2'), fraction = 0.8; 

      function checkScroll() { 
       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(); 
       } 
      } checkScroll(); 
      window.addEventListener('scroll', checkScroll, false); 
      window.addEventListener('resize', checkScroll, false); 

     </script> 

    </body> 
</html>

来源

2014-01-16 UltrasoundJelly

使用isInViewport插件和jQuery，这是我的任务

$('video').each(function(){ 
    if ($(this).is(":in-viewport")) { 
     $(this)[0].play(); 
    } else { 
     $(this)[0].pause(); 
    } 
})

来源

2014-11-27 10:43:44 qwazix

我想让这个代码为我工作，这是更简单。不过，我遇到了麻烦。由于我已切换到基于WordPress的网站，因此我的视频遵循以下示例格式：'class =“wp-video-shortcode”id =“video-1115-1”' – UltrasoundJelly

任何将[0]修改为与此工作是'video-XXXX-X'格式？ – UltrasoundJelly

我们可以向Vimeo申请它是否在iframe下运行？如何？ – wpcoder

OK，我想，一定是这样的：

var videos = document.getElementsByTagName("video"); 

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

来源

2014-01-16 14:27:27 saike

我得到的ReferenceError一 “未定义分数”，但工作完全一旦予加回到定义：分数= 0.8; – UltrasoundJelly

是的，分数只是需要定义的地方 - 伟大的答案虽然:) – alidrongo

旧代码有问题，但只是想增加我的两分钱，我最初开始使用上面的jQuery代码，但遇到了一些实现问题。这个解决方案应该包含多个视频工作，也可以防止在用户暂停视频，并试图滚动离开的一个问题，它只是重新开始：

<script> 
    var videoList = []; 
    var scrollPauseList = []; 
    var clickedPauseList = []; 
</script> 
<script>  
    var myScrollFunc = function() { 

     $(".video-js").each(function(){ 

      var inView = $(this).is(":in-viewport"); 
      var isPaused = $(this)[0].player.paused(); 
      var playerIdx = videoList.indexOf(this.id); 
      var scrollPaused = scrollPauseList[playerIdx]; 
      var clickPaused = clickedPauseList[playerIdx]; 

      if (inView) {      
       var hasEnded = $(this)[0].player.ended(); 
       var curTime = $(this)[0].player.currentTime(); 
       var hasStarted = curTime > 0; 
       if(hasStarted && !hasEnded && !clickPaused) 
       { 
        scrollPauseList[playerIdx] = false; 
        $(this)[0].player.play(); 
       } 
      } else if(!isPaused) {      
       scrollPauseList[playerIdx] = true; 
       $(this)[0].player.pause(); 
      } 
     }); 
    };  

    $(window).scroll(myScrollFunc);  
</script> 

<video 
    class="video-js" controls></video> 

<script> 
$(".video-js").each(function(){ 
     videoList[videoList.length] = this.id; 
     scrollPauseList[scrollPauseList.length] = false; 
     clickedPauseList[scrollPauseList.length] = false; 
    }); 

for(var i = 0; i < videoList.length; i++) 
{ 
    var playerID = videoList[i]; 
    var player = videojs(playerID); 

    player.on('pause', function() { 
     var pID = videoList.indexOf(this.id()); 

     if(!scrollPauseList[pID]) 
     { 
      clickedPauseList[pID] = true; 
      scrollPauseList[pID] = false; 
     } 
     else 
     { 
      clickedPauseList[pID] = false; 
      scrollPauseList[pID] = false; 
     } 
    }); 
}  
</script>

我擦洗了一些东西，我使用视频-js，因此您可能需要对其进行一些修改才能使您的实施工作正常进行。

来源

2014-12-04 16:22:43 doveiya

如果有人遇到这个问题，我无法在我的WordPress网站上使用Saike的解决方案，因为视频自动嵌入的方式（MediaElement player）。但是，qwazix的解决方案进行了一些修改。这里是与IsInView plugin一起使用的jQuery代码。这里是我的包含脚本（放在我的主题文件夹中的末尾footer.php）。

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="js/isInViewport.min.js" type="text/javascript"></script> 
<script src="js/scrollview.min.js" type="text/javascript"></script>

而jQuery代码（修改400到你的宽容喜欢）

$(function() { 
     $(window).scroll(function() { 
      $('.wp-video-shortcode').each(function() { 
       var str = $(this).attr('id'); 
       var arr = str.split('_'); 
       typecheck = arr[0]; 
       if ($(this).is(":in-viewport(400)") && typecheck == "mep") { 
        mejs.players[$(this).attr('id')].media.play(); 
       } else if (typecheck == "mep") { 
        mejs.players[$(this).attr('id')].media.pause(); 
       } 
      }); 
     }); 
    });

唯一的问题我有这个代码是它确实，即使暂停由重新上滚动的视频剪辑用户。在我的网站上不是一个破坏交易的问题。这里是代码行动：Ultrasoundoftheweek.com

来源

2014-12-05 18:24:35 UltrasoundJelly

需要检查在滚动期间视频是否可见。

$(window).scroll(function() { 
    $('video').each(function(){ 
     if ($(this).is(":in-viewport")) { 
      $(this)[0].play(); 
     } else { 
      $(this)[0].pause(); 
     } 
    }) 
});

来源

2015-12-07 22:33:58

使用jQuery，isInViewport和CoffeeScript的，对我来说，完整的解决方案是这样的：

$(window).scroll -> 
    $('video:in-viewport').each -> $(@)[0].play() 
    $('video:not(:in-viewport)').each -> $(@)[0].pause()

来源

2016-02-20 16:36:25 pdobb

以上都不似乎为我工作，但我终于找到了一个办法：你”会需要the visible plugin，这一小段代码就在这里：

$(window).scroll(function() { 
$('video').each(function(){ 
    if ($(this).visible(true)) { 
     $(this)[0].play(); 
    } else { 
     $(this)[0].pause(); 
    } 
}) 
});

这将允许任何视频播放，只有当它进入口中。通过将visible(true)替换为visible() ，可以将其设置为仅在整个视频DOM元素处于视口中时才播放。

来源

2016-07-25 10:46:55

感谢您的支持！ –

这就是我只有在用户滚动时才设法播放视频的方式。我使用了IsInViewport插件。希望你觉得它有用！

$(window).scroll(function() { 

    var video = $('.yourvideo'); 

    $(video).each(function(){ 

     if(video.is(':in-viewport')){ 

      video[0].play(); 

      video.removeClass('yourvideo'); 
      //I removed class to stop repeating the action ".play()" when it is scrolled again. 
     } 
    }); 
});

来源

2016-10-13 02:52:28

$('video').each(function(){ 
    if ($(this).is(":in-viewport")) { 
     $(this)[0].play(); 
    } else { 
     $(this)[0].pause(); 
    } 
})

来源

2017-02-27 11:14:08

试了很多解决方案，唯一的一个部分的工作是一个贴在下面。问题是在页面上有3个视频，第二个和第三个视频基本上由第一个视频控制。所以他们在页面加载的时候开始播放（当他们应该在视口中播放时），并且他们在第一次暂停时暂停，任何关于使用多个视频的建议？尝试使用getElementById，但没有工作，也尝试jquery插件，但没有好的结果。在这里你有www页面，你可以看到发生了什么，当然所有的源代码。

http://185.197.128.183/~monompro/

window.onload=function(){ 

var videos = document.getElementsByTagName("video"), 
    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); 
}

来源

2017-08-30 10:21:27

HTML5和Javascript仅在可见时播放视频

回答

相关问题