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
    }

youtube iframe api可显示多个视频

1 个答案: