Question

我正在使用带有以下代码的iFrame Youtube API。我使用Ajax调用此视图来呈现它并将其附加到我页面中的div.yt-player中。它在我第一次调用视图时工作，但在我关闭视频（它清空div.yt-player）并点击另一个调用我的视图的链接后，视频根本没有加载（空白）。我一直在努力，但仍然不明白为什么会发生这种情况，特别是它第一次运作。任何形式的帮助将非常感谢..谢谢。

PS：html和javascript都是由视图呈现的。

Html
<div id="player"></div>

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

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '486',
      width: '864',
      videoId: '#{@media['youtube_url']}',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      },
      playerVars: {
        'showinfo': 0,
        'iv_load_policy': 3,
        'color': 'white',
        'fs': 1,
        'autoplay': 1,
        'vq': 'hd720'
      }
    });
  }

  function onPlayerReady(event) {
    event.target.playVideo();
  }

  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      setTimeout(stopVideo, 6000);
      done = true;
    }
  }
  function stopVideo() {
    player.stopVideo();
  }

Answer 1

只需检查脚本是否已定义。

if(document.getElementById('iframe_api') === null){
            var tag = document.createElement('script');
            tag.src = "https://www.youtube.com/iframe_api";
            tag.id = "iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        }
else
    runPlayer();

function runPlayer(){
            var player;
            player = new YT.Player(element.children()[0], {
                playerVars: {
                    autoplay: 1,
                    html5: 1,
                    controls: 1,
                    showsearch: 0,
                    showinfo: 0
                },
                height: scope.height,
                width: scope.width,
                videoId: scope.videoid,
                events: {
                    onStateChange: function (event) {
                        if (event.data == YT.PlayerState.ENDED) {
                            scope.$emit('VideoEnded');
                        }
                    }
                }
            });
        }
$window.onYouTubeIframeAPIReady = function () {
    runPlayer();
};

Answer 2

我调试了这个问题。 onYouTubeIframeAPIReady（）仅在第一次加载YouTube API时被调用（例如，当用户刷新页面并单击指向视图的链接时），并且因为我在Ajax中调用我的视图，所以它没有被解雇以下时间。

所以我将第一个代码块换成了条件：

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

和

if (typeof youtube_api_init != 'undefined') {
  onYouTubeIframeAPIReady();
}

在脚本结束时，我为浏览器设置了youtube_api_init，以便记住YouTube API已加载：

var youtube_api_init = 1;

PS：我第一次尝试时，我调用了我的变量yt_api_init而不是youtube_api_init，但它没有用，因为它发生了YouTube已经在其api中使用的名称......

Youtube iFrame（使用javascript API）第一次加载，但不加载第二次。为什么？

2 个答案: