Youtube API帶有活動的多個視頻

Question

尊敬的社區！

我想在我的網站上顯示多個視頻。揚聲器應該被默認關閉（我使用靜音（） - 功能）。

當用戶滾動並且視頻進入瀏覽器視口時，視頻應該開始自動播放。

我用一個單一的視頻建造這個像魅力一樣工作。但不能與多個視頻在一個網站上。

請幫我在我的代碼中錯過什麼？

這IST HTML的部分：

<div class="video-container"> 
<div data-id="olBOo_S5AHY"></div> 
</div> 

<div class="video-container"> 
<div data-id="3IXKIVZ9T-U"></div> 
</div> 

<div class="video-container"> 
<div data-id="LAQDcnwwspQ"></div> 
</div> 

此北京時間的JS-部分：

function onYouTubePlayerAPIReady() { 

var players = document.querySelectorAll('.video-container div') 

for (var i = 0; i < players.length; i++) { 
    new YT.Player(players[i], { 
     width: 600, 
     height: 400, 
     videoId: players[i].dataset.id, 
     events: { 
     onReady: initialize 
     } 


    }); 
} 
} 

function initialize(){ 

players[i].mute(); // I know that players[i] is wrong.. 

var waypoints = jQuery('.video-container').waypoint(function() { 


    if(players[i]) { // I know that players[i] is wrong.. 
     var fn = function(){ 
     players[i].playVideo(); // I know that players[i] is wrong.. 
     } 
     setTimeout(fn, 1000); 
    } 

}, { 
    offset: '50%' 
}) 
} 

所以影片會顯示在我的網站上，但我沒有一個想法如何添加這些事件到每個單個視頻？我在做什麼錯

（很多我猜;（....）

謝謝

梅拉妮

Answer 1

HEJ Milenoi，

您players變量是一個節點列表！你所查詢的divs並不包含可尋址的YouTube元素 你必須將這些youtube播放器對象分配給某個地方來解決它們（或者可能有其他的魔法來找到它們）

看看我的垃圾箱：http://jsbin.com/hozaluzaho 這是一個工作設置 - 當您向下滾動時，您將觸發其他玩家。 你可以看看我如何創建所需的對象等。

// get .player nodes 
var playerDivs = document.querySelectorAll(".player"); 

// nodelist to array to use forEach(); 
var playerDivsArr = [].slice.call(playerDivs); 

var players = new Array(playerDivsArr.length); 
var waypoints = new Array(playerDivsArr.length); 

// when youtube stuff is ready 
function onYouTubeIframeAPIReady() { 

    // create yt players 
    playerDivsArr.forEach(function(e, i) { // forEach ... 
    players[i] = new YT.Player(e.id, { 
     height: '390', 
     width: '640', 
     videoId: 'M7lc1UVf-VE', 
     events: { /* no events set */ } 
    }) 
    }) 

    // create waypoints 
    $(".player").each(function(i, e) { 
    waypoints[i] = new Waypoint({ 
     element: e, 
     handler: function() { 
     players[i].playVideo(); 
     } 
    }) 
    }); 

} 

編輯此外：

HEJ再次，

不用擔心， 初始化函數需要迭代與許多YouTube播放器對象在陣列上，你只是在說一個player變量你的初始化函數（當你遵循我的代碼時甚至可能不會被設置）？ 看看上面說create yt players的地方。您會看到陣列players[]的每個插槽都被玩家對象填滿。然後你必須再次與他們說話，告訴他們.mute()。 在forEach循環中，數組中的當前對象被移交給yt變量。

function initialize() { 
    players.forEach(function(yt, i) { 
    yt.mute(); 
    }); 
} 

另一二進制位： http://jsbin.com/ficoyo/edit?html,output

喝彩！