0

我正在使用 require.js youtube api 模块将多个 youtube 视频加载到我的网站上，但我在使用 API 来控制网站上的上述视频时遇到了一些麻烦。基本上，我似乎无法找到一种方法来引用创建的“播放器”变量，然后使用 .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);
        });
    }
},
4

1 回答 1

2

如果您定义一个模块并将 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 可能会更改......可能的替代方法是使用本地副本。

于 2013-08-06T21:47:16.160 回答