Question

我在通过YouTubeIframeAPIReady加载iframe播放器时遇到了麻烦。我制作了一个视频轮播。我在onYouTubeIframeAPIReady（）中调用ajax之后创建了播放器对象。我通过ajax从数据库中获取所有视频ID并构建iframe。

现在问题是有时iframe没有加载。当用户点击轮播图像时，视频未播放，因为没有生成iframe。这种情况发生在生产和舞台环境中。

这是我的代码

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
  jQuery.ajax({
  type: "POST",
  async: false,
  url: "load-carousel-videos",
  success: function(rtn){
    var player_obj = Array();
    if(rtn !='false'){
     var keyVar = jQuery.parseJSON(rtn);
      jQuery.each(keyVar, function(key, val) {

        player[key] = new YT.Player('vidContainer'+key, {
          height: '370',
          width: '654',
          videoId: val,
          playerVars: {'wmode':'transparent','controls':1,'modestbranding':0,'autoplay':autoplay_status,'showinfo':1,'rel':0},
          events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
          }
        });

      }); 
    }
  }
 });
}

以下iframe是有时加载的，有时不在HTML正文下

<iframe width="654" height="370" title="YouTube video player" class="video_container"  id="vidContainer21" src="https://www.youtube.com/embed/zOPip3r8G80?wmode=transparent&amp;controls=1&amp;modestbranding=0&amp;autoplay=1&amp;showinfo=1&amp;rel=0&amp;enablejsapi=1&amp;origin=http%3A%2F%2F148-177-29-187.itrinno.com" frameborder="0" allowfullscreen="1" style="display: none;" type="text/html"></iframe>

在ajax调用之后，Youtube iframe api没有创建onYouTubeIframeAPIReady

0 个答案: