Question

我正在使用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）被称为四或五，或者需要多次，具体取决于页面上的视频数量。我基本上检查了有多少youtube容器的dom，每个容器上都有一个包含剪辑的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);
        });
    }
},

Answer 1

如果您定义了一个模块并将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;
});

然后您在视图中引用此模块，或者在处理视频播放器的任何模块中引用此模块。如果我将上面的模块保存到helpers/youtube-loader，我可以通过require文件加载器来引用，如下所示：

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
    });
});

值得注意的是，我必须使用window引用作为内部require.js对象的副本，以便加载错误。

此外，加载程序中脚本的URL可能会发生变化......可能的替代方法是使用本地副本。

Backbone，require.js和Youtube Javascript API

1 个答案: