使用 Youtube API 的多个 Youtube 播放器嵌入问题答案

【问题标题】：Multiple Youtube Players embedding issue using Youtube API使用 Youtube API 的多个 Youtube 播放器嵌入问题
【发布时间】：2017-08-04 08:48:26
【问题描述】：

我需要在每个 .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>

【问题讨论】：

您知道您正在创建多个脚本标签，因为您将它们附加到您的.each() 循环$('.y-video').each(function (index) 中。另外，为什么不只有一个播放器来播放视频？您可以根据点击的img 来设置视频的位置...
@NewToJS 谢谢！！！现在编辑我的代码以删除每个功能，现在在图像点击时加载播放器，但它仍然只加载一个首先点击的视频。

标签： javascript youtube-api

【解决方案1】：

您需要分离每个播放器的类（例如 player1、player2 之后），这将有助于您的应用程序分离每个代码/播放器。

来自相关SO post的代码sn-p：

<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 代码。

希望这会有所帮助。

【讨论】：

谢谢，但是每个页面上会有 n 个玩家，所以我无法区分每个玩家的类别（例如 player1、player2 以后）。另一方面，我将尝试 Github 代码，并让您知道它是否适合我。

【解决方案2】：

使用以下参考来解决我的问题：[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">
	<span class="thumb play-icon">&#9655;</span>
	<img class="thumb" src="http://img.youtube.com/vi/gpzuVt_mkKs/0.jpg">
	<iframe width="500" height="281" frameborder="0" src="https://www.youtube.com/embed/gpzuVt_mkKs?enablejsapi=1&showinfo=0&rel=0">
	</iframe>
</div>

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

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

【讨论】：