javascript - 使用 RequireJS 加载 Youtube Iframe API

Question

我正在尝试在使用 Require JS 定义的模块中使用 Youtube Iframe API。由于这个 API 是异步加载的，一旦加载就调用一个函数，我使用了一个名为“async”的 requireJS 插件，它之前可以与 google maps api 一起使用。

但是，这次有些东西不工作了。我的模块以这种方式开始:define(['text!fmwk/widgets/video/video.html','fmwk/utils/browser','async!http://www.youtube.com/iframe_api'],函数(videoTpl,root ) { ... });

并且 chrome 控制台会触发此错误: Uncaught Error :模块加载超时:async!http://www.youtube.com/iframe_api_unnormalized3,async!http://www.youtube.com/iframe_api
http://requirejs.org/docs/errors.html#timeout

如果我不使用异步插件，对象 YT 或其功能是未定义的，如果我下载 API 代码，也会发生同样的情况。如果我将脚本标记放在 html 文件的 head 标记中，有时会加载 API。所有这些都是预料之中的，但我不明白，因为异步插件失败。

感谢您的关注和帮助:)

Answer 1

我不熟悉 async requireJS 插件，但这里有一些示例代码(取自 YouTube Direct Lite )从名为 player< 的 requireJS 模块中异步加载 iframe API/。不过，它使用 jQuery 来执行实际的库加载。

define(['jquery'], function($) {
  var player = {
    playVideo: function(container, videoId) {
      if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') {
        window.onYouTubeIframeAPIReady = function() {
          player.loadPlayer(container, videoId);
        };

        $.getScript('//www.youtube.com/iframe_api');
      } else {
        player.loadPlayer(container, videoId);
      }
    },

    loadPlayer: function(container, videoId) {
      new YT.Player(container, {
        videoId: videoId,
        width: 356,
        height: 200,
        // For a list of all parameters, see:
        // https://developers.google.com/youtube/player_parameters
        playerVars: {
          autoplay: 1,
          controls: 0,
          modestbranding: 1,
          rel: 0,
          showinfo: 0
        }
      });
    }
  };

  return player;
});