如何當滾動到視圖

播放視頻文件

所以我試着去激活視頻時，他們滾動到視口中，只是叫他們不同的ID，但它不工作，無可否認我是很新（JS/jQuery的）和我不是100％關於正在發生什麼，所以任何幫助都會很大。如何當滾動到視圖

只是要清楚我試着讓每當他們滾動到視圖中的每個視頻單獨玩，我第一次視頻工作，但滾動時在沒有其他後續的視頻播放。

我創造了這個以幫助看到的我試着去完成http://jsfiddle.net/8TpN5/

更新：好了，所以這就是我想要的工作http://jsfiddle.net/8TpN5/1/，但我怎麼能得到它的工作，而不是重複的代碼？

var videoId = document.getElementById("video","videoTwo"); 
var playVideo = videoId, 
fraction = 0.9; 

function checkScroll() { 
var x = playVideo.offsetLeft, 
    y = playVideo.offsetTop, 
    w = playVideo.offsetWidth, 
    h = playVideo.offsetHeight, 
    r = x + w, //right 
    b = y + h, //bottom 
    visibleX, 
    visibleY, 
    visible; 

if (window.pageXOffset >= r || window.pageYOffset >= b || window.pageXOffset + window.innerWidth < x || window.pageYOffset + window.innerHeight < y) { 
    return; 
} 

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) { 
    playVideo.play(); 
} else { 
    playVideo.pause(); 
} 
} 

checkScroll(); 
window.addEventListener('scroll', checkScroll, false); 
window.addEventListener('resize', checkScroll, false);

來源

2014-04-01 user3097640

這不會得到兩個元素，只有第一： 'VAR視頻ID =的document.getElementById（「視頻」，「videoTwo」）;' 所以你在那裏做的實際上只是獲取第一個元素「視頻」。 – Colandus

對不起，我在看到您的評論之前正在寫作。 – Diego

感謝您的幫助，但我怎麼會去，所以我不需要我要添加其他視頻每次重複自己的JS的所有類似的部件組合。我更新了jsfiddle，它現在以我想要的方式工作，但我希望儘可能優化它。 – user3097640

只是改變的getElementById到的getElementsByTagName。

希望這有助於：

http://jsfiddle.net/jAsDJ/

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

來源

2014-04-03 08:18:55 RXMESH

非常感謝，我想在一個更令人費解的方式來解決這個問題。 for循環非常有意義。 – user3097640

這條線：

var videoId = document.getElementById("video","videoTwo");

應該是：

var videoOne = document.getElementById("video"), 
    videoTwo = document.getElementById("videoTwo");

getElementById只需要一個id作爲參數並返回一個對象。

來源

2014-04-01 22:32:38 Diego

如何當滾動到視圖

回答

相關問題