主干、require.js和Youtube Javascript API

我正在使用require.js youtube api模块将多个youtube视频加载到我的网站上，我在使用api控制网站上的上述视频时遇到了一些问题。基本上，我似乎找不到一种方法来引用创建的“player”变量，然后使用所有方法，如.pauseVideo（），.playVideo（）等

我想做的是做一个检查，以确保当用户单击按钮时，页面上的所有视频都已停止。然而，我在思考如何做到这一点时遇到了困难

这是我的密码：

Youtube require.js模块

define(['jquery'], function($) {
    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 = {
        loadPlayer: function(container, videoId, width, height) {
            new YT.Player(container, {
                videoId: videoId,
                width: width,
                height: height,
                playerVars: {
                    autoplay: 0,
                    controls: 1,
                    modestbranding: 1,
                    rel: 0,
                    showInfo: 0
                }
            });
        }
    };

    return player;
});

这个模块（我把它命名为YouTubeAPI）被称为四个或五个，或者需要多少次，这取决于页面上视频的数量。我基本上检查dom中有多少youtube容器，每个容器上都有一个数据对象，其中包含剪辑的youtube id，通过使用youtube require模块的for循环运行所有这些。根本不确定这是最好的方法，所以建议是非常感谢的

youTubePlayer: function(){
    var self = this;

    if ($('.slidevideo').length){
        _.each($('.slidevideo'), function(el){
            var YTid = $(el).data('videoid');
            youTubeAPI.loadPlayer('Player-'+YTid, YTid, self.span8width, self.window_height-150);
        });
    }
},

---

如果您定义一个模块并将Google的YT加载程序放入其中，然后将

YT

返回到任何“继承”模块，那么它应该可以工作

这是我刚才做的

define([
  'underscore',
  'backbone'
], function(_, Backbone){
  if (!window['YT']) {
      var YT = window['YT'] = { loading: 0, loaded: 0 };
  }
  if (!window['YTConfig']) {
      var YTConfig = window['YTConfig'] = {};
  }
  if (!YT.loading) {
      YT.loading = 1;
      (function(){
          var l = [];
          YT.ready = function(f) {
              if (YT.loaded) {
                  f();
              } 
              else {
                  l.push(f);
              }
          };
          window.onYTReady = function() {
              YT.loaded = 1;
              for (var i = 0; i < l.length; i++) {
                  try { l[i](); } catch (e) { }
              }
          };
          YT.setConfig = function(c) {
              for (var k in c) {
                  if (c.hasOwnProperty(k)) {
                      YTConfig[k] = c[k];
                  }
              }
          };
          var a = document.createElement('script');
          a.src = 'http:' + '//s.ytimg.com/yts/jsbin/www-widgetapi-vflAfnlMi.js';
          a.async = true;
          var b = document.getElementsByTagName('script')[0];
          b.parentNode.insertBefore(a, b);
      })();
  }
  return YT;
});

值得注意的是，我必须使用

窗口

引用作为内部require.js对象的副本，以便它能够无错误地加载

---

此外，加载程序中脚本的URL可能会更改。。。可能的替代方法是使用本地副本。

我认为您应该使用RequireJS垫片导入YouTube API。当我尝试此操作时，我得到一个未捕获的类型错误：undefined不是new YT.Player（“”，{}）的函数。因此，我删除了新关键字，因为它是导致问题的原因，然后我得到了未捕获的TypeError:Object#没有方法“Player”。当我console.log YT时，我得到了对象{loading:1，loaded:0，ready:function，setConfig:function}，这表明我在进一步检查时得到了一个对象，我意识到该对象包含一个Player:function，那么为什么这不起作用呢？如果没有看到您的代码，很难说。。。如果你提出一个新问题并粘贴代码，然后将链接发送到这里，我会尽力帮助你。

define([
  'underscore',
  'backbone',
  'helpers/youtube-loader'
], function(_, Backbone, YT){
  var id = 'W8MLqYNGKdI'
  // uses global scope to use this reference in a YouTube API event listener
  var player = window['player'] = new YT.Player('yt-player', {
        height: '400',
        width: '730',
        videoId: id
    });
});