youtube iframe api显示多个视频

Question

我有一个局部视图，剃须刀引擎看起来像这样

@model Tool.MVC.Areas.Widget.Models.VideoWidgetModel
@{
var baseUrl = ConfigurationManager.AppSettings["BaseUrl"];
var youTubeUrl=Model.ModalExitUrl;
var videoId="video_widget_"+Model.UniqueVideoId;
}
<div class="@videoId">
<div id="@videoId"></div>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.   
</script>
<script type="text/javascript" src="@baseUrl/Content/Scripts/jquery-ui.js"></script>
<script type="text/javascript">

 var youTubeUrlRegex = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
  var ytUrl = '@youTubeUrl';
 var ytUrlId = (ytUrl.match(youTubeUrlRegex)) ? RegExp.$1 : false;


//Load player api asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";

var firstScriptTag = document.getElementsByTagName('script')[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
console.log(tag);

var player;
function onYouTubeIframeAPIReady() {

    player = new YT.Player('@videoId', {
      height: '290',
      width: '220',
      videoId: ytUrlId,
      events: {

      }
    });
}
</script>
</div>

VideoId 正在生成一个 Guid，以便每次我在我的页面上有一个部分时都有一个 div 的不同 id。 但是当我渲染页面时，在我的页面中我有两个部分，每个部分都有一个视频，所以两次会加载这个页面，但只有最后一个是在 Youtube 播放器中显示视频，另一个只是说 YT.player 未定义，所以我认为没有加载 IframeApi。 我怎样才能多次加载这个 Youtube 播放器及其 Api 以显示尽可能多的视频。

非常感谢您的回答， 谢谢

Answer 1

api 脚本只需要加载一次。但是每个玩家都需要一个独特的参考。 这是一个工作示例的代码链接： Setting video start time with the YouTube API - "start" playerVars option used to work, but now does not? 但是示例代码不是基于模型的。

可能是这样的：

    var players = Array(); // Should be a global var for reference to all the players

    function onYouTubeIframeAPIReady() {
        var player; // not usable for reference
        player = new YT.Player('@videoId', {
                     height: '290',
                     width: '220',
                     videoId: ytUrlId,
                     events: {

                             }
                  });
        players.push(player); // Saving player reference in a global var
    }