9

我正在使用带有以下代码的 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();
  }
4

2 回答 2

8

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

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();
};
于 2015-12-30T05:30:36.937 回答
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 中使用的名称......

于 2013-04-11T11:35:38.450 回答