多個Youtube播放器嵌入問題使用Youtube API

Question

我需要在每個.player div內有多個YouTube播放器，但是這裏只有一個播放器正在載入我的代碼。 所以任何人都可以請幫我找到問題在哪裏？

$(document).ready(function(){ 
 
var iframeCount = $('.player'); 
 
iframeCount.each(function (index) { 
 
    $(this).attr('id', 'player-'+index); 
 
}); 
 

 
var player, pId, playerText; 
 
$('.start-video').on('click', function (index) {  
 
    onPlayerStateChange = function (event) { 
 
     if (event.data == YT.PlayerState.ENDED) { 
 
     event.target.destroy(); 
 
     } 
 
    } 
 
    playerText = $(this).siblings('.player').text(); 
 
    pId = $(this).siblings('.player').attr('id');   
 
    
 
    var tag = document.createElement('script'); 
 
    tag.src = "https://www.youtube.com/iframe_api"; 
 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
 
    
 
    onYouTubeIframeAPIReady = function() { 
 
     player = new YT.Player(pId, { 
 
      height: '244', 
 
      width: '434', 
 
      videoId: playerText, // youtube video id 
 
      playerVars: { 
 
       'autoplay': 1, 
 
       'rel': 0, 
 
       'showinfo': 0 
 
      }, 
 
      events: { 
 
       'onStateChange': onPlayerStateChange 
 
      } 
 
     }); 
 
    } 
 
    $(this).parent().find('.start-video').fadeOut(); 
 
}); 
 
});

.y-video{ 
 
     position: relative; 
 
     display: inline-block; 
 
     min-width: 434px; 
 
     min-height: 262px;  
 
    } 
 
    .y-video img{ 
 
    position: absolute; 
 
    width: 434px; 
 
    height: 244px; 
 
    left: 0; 
 
    top: 0; 
 
    } 
 
    .play-icon{ 
 
     display: inline-block;   
 
     position: absolute; 
 
     left: 0; 
 
     right: 0; 
 
     margin: 0 auto; 
 
     top: 42%; 
 
     z-index: 1; 
 
     width: 40px; 
 
     font-size: 26px; 
 
     border: 3px solid #fff; 
 
     border-radius: 50%; 
 
     text-align: center; 
 
     color: #fff; 
 
     padding: 4px 0 4px 5px; 
 
     cursor: pointer; 
 
     background: rgba(0,0,0,.7); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="y-video"> 
 
    <div class="player">gpzuVt_mkKs</div>  
 
    <span class="play-icon start-video">&#9655;</span> 
 
    <img class="start-video" src="http://img.youtube.com/vi/gpzuVt_mkKs/0.jpg"> 
 
    </div> 
 
    
 
    <div class="y-video"> 
 
    <div class="player">Ep6U7vGjFw0</div>  
 
    <span class="play-icon start-video">&#9655;</span> 
 
    <img class="start-video" src="http://img.youtube.com/vi/Ep6U7vGjFw0/0.jpg"> 
 
    </div> 
 
    
 
    <div class="y-video"> 
 
    <div class="player">6lt2JfJdGSY</div> 
 
    <span class="play-icon start-video">&#9655;</span> 
 
    <img class="start-video" src="http://img.youtube.com/vi/6lt2JfJdGSY/0.jpg"> 
 
    </div>

Answer 1

用於以下引用來解決我的問題：http://jsfiddle.net/KtbYR/5/][1]

$(document).ready(function(){ 
 
var iframeCount = $('iframe'); 
 
    iframeCount.each(function (index) { 
 
     $(this).attr('id', 'player-'+index); 
 
    }); 
 
}); 
 
    
 
function getFrameID(id) { 
 
    var elem = document.getElementById(id); 
 
    if (elem) { 
 
     if (/^iframe$/i.test(elem.tagName)) return id; //Frame, OK 
 
     // else: Look for frame 
 
     var elems = elem.getElementsByTagName("iframe"); 
 
     if (!elems.length) return null; //No iframe found, FAILURE 
 
     for (var i = 0; i < elems.length; i++) { 
 
      if (/^https?:\/\/(?:www\.)?youtube(?:-nocookie)?\.com(\/|$)/i.test(elems[i].src)) break; 
 
     } 
 
     elem = elems[i]; //The only, or the best iFrame 
 
     if (elem.id) return elem.id; //Existing ID, return it 
 
     // else: Create a new ID 
 
     do { //Keep postfixing `-frame` until the ID is unique 
 
      id += "-frame"; 
 
     } while (document.getElementById(id)); 
 
     elem.id = id; 
 
     return id; 
 
    } 
 
    // If no element, return null. 
 
    return null; 
 
} 
 

 
// Define YT_ready function. 
 
var YT_ready = (function() { 
 
    var onReady_funcs = [], 
 
     api_isReady = false; 
 
    /* @param func function  Function to execute on ready 
 
    * @param func Boolean  If true, all qeued functions are executed 
 
    * @param b_before Boolean If true, the func will added to the first 
 
    position in the queue*/ 
 
    return function(func, b_before) { 
 
     if (func === true) { 
 
      api_isReady = true; 
 
      for (var i = 0; i < onReady_funcs.length; i++) { 
 
       // Removes the first func from the array, and execute func 
 
       onReady_funcs.shift()(); 
 
      } 
 
     } 
 
     else if (typeof func == "function") { 
 
      if (api_isReady) func(); 
 
      else onReady_funcs[b_before ? "unshift" : "push"](func); 
 
     } 
 
    } 
 
})(); 
 
// This function will be called when the API is fully loaded 
 

 
function onYouTubePlayerAPIReady() { 
 
    YT_ready(true) 
 
} 
 

 
var players = {}; 
 
//Define a player storage object, to enable later function calls, 
 
// without having to create a new class instance again. 
 
YT_ready(function() { 
 
    $(".thumb + iframe[id]").each(function() { 
 
     var identifier = this.id; 
 
     var frameID = getFrameID(identifier); 
 
     if (frameID) { //If the frame exists 
 
      players[frameID] = new YT.Player(frameID, { 
 
       events: { 
 
        "onReady": createYTEvent(frameID, identifier) 
 
       } 
 
      }); 
 
     } 
 
    }); 
 
}); 
 

 
// Returns a function to enable multiple events 
 
function createYTEvent(frameID, identifier) { 
 
    return function (event) { 
 
     var player = players[frameID]; // player object 
 
     var the_div = $('#'+identifier).parent(); 
 
     the_div.children('.thumb').click(function() { 
 
      var $this = $(this); 
 
      $this.fadeOut().next().addClass('play'); 
 
      setTimeout(function(){ 
 
       $this.siblings('.thumb').hide(); 
 
      },150); 
 
      if ($this.next().hasClass('play')) { 
 
       player.playVideo(); 
 
       //player.destroy(); 
 
      } 
 
     }); 
 
    } 
 
} 
 

 
// Load YouTube Frame API 
 
(function(){ //Closure, to not leak to the scope 
 
    var s = document.createElement("script"); 
 
    s.src = "http://www.youtube.com/player_api"; /* Load Player API*/ 
 
    var before = document.getElementsByTagName("script")[0]; 
 
    before.parentNode.insertBefore(s, before); 
 
})();

.y-video{ 
 
    position: relative; 
 
    display: block; 
 
    width: 500px; 
 
    clear: left; 
 
} 
 
.play-icon{ 
 
    display: inline-block; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0 auto; 
 
    top: 42%; 
 
    z-index: 1; 
 
    width: 40px; 
 
    font-size: 26px; 
 
    border: 2px solid #fff; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
    color: rgba(255,255,255,0.4); 
 
    padding: 4px 0 4px 5px; 
 
    cursor: pointer; 
 
    background: rgba(0,0,0,.1); 
 
    -webkit-transition: 0.4s; 
 
    -moz-transition: 0.4s; 
 
    transition: 0.4s; 
 
    } 
 
img.thumb{ 
 
    position: absolute; 
 
    width: 100%; 
 
    height: auto; 
 
    max-height: 281px; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
.y-video:hover .play-icon{ 
 
     border-color: rgba(0,0,0,.1); 
 
     background: rgba(0,0,0,.6); 
 
     color: rgba(255,255,255,0.8); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="y-video"> 
 
\t <span class="thumb play-icon">&#9655;</span> 
 
\t <img class="thumb" src="http://img.youtube.com/vi/gpzuVt_mkKs/0.jpg"> 
 
\t <iframe width="500" height="281" frameborder="0" src="https://www.youtube.com/embed/gpzuVt_mkKs?enablejsapi=1&showinfo=0&rel=0"> 
 
\t </iframe> 
 
</div> 
 

 
<div class="y-video"> 
 
\t <span class="thumb play-icon">&#9655;</span> 
 
\t <img class="thumb" src="http://img.youtube.com/vi/Ep6U7vGjFw0/0.jpg"> 
 
\t <iframe width="500" height="281" frameborder="0" src="https://www.youtube.com/embed/Ep6U7vGjFw0?enablejsapi=1&showinfo=0&rel=0"> 
 
\t </iframe> 
 
</div> 
 

 
<div class="y-video"> 
 
\t <span class="thumb play-icon">&#9655;</span> 
 
\t <img class="thumb" src="http://img.youtube.com/vi/6lt2JfJdGSY/0.jpg"> 
 
\t <iframe width="500" height="281" frameborder="0" src="https://www.youtube.com/embed/6lt2JfJdGSY?enablejsapi=1&showinfo=0&rel=0"> 
 
\t </iframe> 
 
</div>

Answer 2

你需要單獨每個玩家的等級（例如PLAYER1，player2起），這將有助於您的應用程序分隔每個代碼/播放器。從相關SO post

代碼片段：

<div id="ytplayer1"></div> 
<div id="ytplayer2"></div> 

<script> 
    var player; 
    var player2; 
    function onYouTubePlayerAPIReady() { 
    player = new YT.Player('ytplayer1', { 
     height: '390', 
     width: '640', 
     videoId: 'hdy78ehsjdi' 
    }); 
    player2 = new YT.Player('ytplayer2', { 
     height: '390', 
     width: '640', 
     videoId: '81hdjskilct' 
    }); 
    } 
</script> 

還爲playing multiple videos using Youtube API iFrame一個Github的代碼。

希望這會有所幫助。