Youtube Iframe API with RequireJS

Question

私はRequire JSで定義されたモジュールの中でYoutube Iframe APIを使用しようとしています。このAPIが非同期に読み込まれ、一度関数が呼び出されると、以前はgoogle maps apiで動作していた「async」というrequireJSプラグインを使用しました。

ただし、今回は何かが動作していません。私のモジュールは、この方法を開始します。 define(['text!fmwk/widgets/video/video.html','fmwk/utils/browser','async!http://www.youtube.com/iframe_api'], function (videoTpl,root) { ... });

とクロームコンソール火災、このエラー： Uncaught Error: Load timeout for modules: async!http://www.youtube.com/iframe_api_unnormalized3,async!http://www.youtube.com/iframe_api http://requirejs.org/docs/errors.html#timeout

私は、オブジェクトYTまたはその機能がundefindedされているプラ​​グインの非同期を使用していない、と私はダウンロードした場合、同じ問題が発生した場合APIコード。 HTMLタグのheadタグにscriptタグを置くとAPIが読み込まれることがあります。これはすべて期待されていますが、非同期プラグインが失敗するため、わかりません。

はあなたの注意と助けてくれてありがとう:)

Answer 1

を私はasync requireJSプラグインに慣れていないんだけど、ここでは名前のrequireJSモジュール内から非同期のiframe APIをロードする（YouTube Direct Liteから取られた）いくつかのサンプルコードがありますplayer。しかし、実際のライブラリの読み込みを行うために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; 
}); 

Answer 2

外部のjavascriptをロードするために必要なもう1つのオプションは、javascriptがロードされたときのコンテキストでjQuery約束のコールバックを発行します。

this.initVideo = function emebdvideo(){ 
     //Have we already loaded the youtube iframe API? 
     if(typeof YT === 'undefined' || typeof YT.Player == 'undefined'){ 
      var loaded = this.loadYTapi(); 
      loaded.done(this.embedVideo); 
     }else{ 
      this.embedVideo(); 
     } 

}; 

this.loadYTapi = function loadYTapi(){ 

     var dfd = $.Deferred(), 
     context = this; 

     //Load youtube js with require 
     require(['https://www.youtube.com/iframe_api'], function(){ 
      window.onYouTubeIframeAPIReady = function() { 

       //Resolve with context 
       dfd.resolveWith(context); 
      }; 
     }); 

     return dfd; 
}; 

this.embedVideo = function embedVideo(){ 

     var youtubeId = 'youtube-id'; 
     var player = new YT.Player('player', { 
      height: '390', 
      width: '640', 
      videoId: youtubeId, 
      events: { 
      'onReady': this.onPlayerReady, 
      'onStateChange': this.onPlayerStateChange 
      } 
     }); 
}; 

Answer 3

設定は、私は、余分な綿毛なく、この正確な場合、プラスの可能な他の人のためにこれを解決した、いくつかの研究の後

require.config({ 
    paths: { 
     // Notice the ?noext query parameter. It is added to prevent from requirejs to add .js extension 
     youTubeIFrame: 'https://www.youtube.com/iframe_api?noext' 
    }, 
    shim: { 
     youTubeIFrame: { 
      // Now requirejs expects a YT global variable to be initialized 
      // http://requirejs.org/docs/api.html#config-shim 
      exports: 'YT' 
     } 
    } 
}); 

使用

require(['youTubeIFrame'], function(YT) { 
    // Here YT will be already available because requirejs waited for this global variable to be initialized. 
    // No need to define a global function onYouTubeIframeAPIReady 
    new YT.Player({...}); 
}); 

Answer 4

をrequirejsし、他の回答でunstatisfiedされています、要求非同期を拡張することによって！プラグインは名前付きコールバックをサポートし、APIが完全にロードされた後にのみモジュールコードが実行されるようにします。

YouTube Iframe APIでは、コールバックの名前を設定することはできませんが、非同期プラグインへの小さなアップグレードが解決する「onYouTubeIframeAPIReady」と指定されているようです。この解決策はまだグローバルウィンドウYTを使用しますが、jQueryなしで動作します。

require(
    ['async!//www.youtube.com/iframe_api!undefined:onYouTubeIframeAPIReady'], 
    function() { 

     // this codes executes your code once YouTube Iframe API is loaded and ready 
     player = new YT.Player({ ... }); 

    } 
); 

また、インラインで動作するには、呼び出しを必要とします。

define([], function() { 
    // .. some of your other code here 

    require(['async!//www.youtube.com/iframe_api!undefined:onYouTubeIframeAPIReady'],  function() { 

     // this codes executes your code once YouTube Iframe API is loaded and ready 
     player = new YT.Player({ ... }); 

    }); 
}); 

コードは、私の意見でははるかにきれいにまで見たどれよりもです。また、最後の瞬間にAPIを読み込むことによるパフォーマンスの向上は、特に数十人のプレイヤーで使用された場合に大量でした。もちろん、APIは一度だけロードされ、いつものようにキャッシュされます。 ！！アップグレード非同期プラグインの https://github.com/mhrisse/requirejs-plugins/blob/master/src/async.js

プルリクエスト： https://github.com/millermedeiros/requirejs-plugins/pull/39

最初のプラグインとしてこのかなり醜い未定義であり、なぜアップグレードは完全な下位互換性がある必要があり、それは だ非同期プラグインアップグレード

パラメータ。これをより美しくてシンプルにするためのアイデアは大歓迎です。

Answer 5

ステップ1：ウィンドウオブジェクトにonYouTubeIframeAPIReady機能を取り付け

var player; 
 
window.onYouTubeIframeAPIReady = function(){ 
 
    player = new YT.Player('player', { 
 
    height: '390', 
 
    width: '640', 
 
    videoId: 'M7lc1UVf-VE', 
 
    }); 
 
};

：extenson

require.config({ 
 
    ... 
 
    youtube: '//www.youtube.com/iframe_api?noext', 
 
    ... 
 
})

ステップ2せずにYouTubeに必要

ステップ3：非同期-LYスクリプトを読み込む

require(['youtube']);

これはあなたのonYouTubeIframeAPIReady機能をトリガされますし、これは完璧に動作するビジネス