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僅在可見時播放視頻

回答

相關問題