自分用にYouTube Playerをつくるクラスをつくってみました。
EventDispatcherを継承しており、onYouTubeIframeAPIReadyでイベントを発火してくれるので、playerにしたいDOMのidと再生したいビデオのidを渡すだけでプレイヤーをつくってくれます。
ソース
(function(win, doc) { "use strict"; function EventDispatcher() { this._events = {}; } EventDispatcher.prototype.hasEventListener = function(eventName) { return !!this._events[eventName]; }; EventDispatcher.prototype.addEventListener = function(eventName, callback) { if (this.hasEventListener(eventName)) { var events = this._events[eventName], length = events.length, i = 0; for (; i < length; i++) { if (events[i] === callback) { return; } } events.push(callback); } else { this._events[eventName] = [callback]; } }; EventDispatcher.prototype.removeEventListener = function(eventName, callback) { if (!this.hasEventListener(eventName)) { return; } else { var events = this._events[eventName], i = events.length, index; while (i--) { if (events[i] === callback) { index = i; } } events.splice(index, 1); } }; EventDispatcher.prototype.fireEvent = function(eventName, opt_this, opt_arg) { if (!this.hasEventListener(eventName)) { return; } else { var events = this._events[eventName], copyEvents = _copyArray(events), arg = _copyArray(arguments), length = events.length, i = 0; // eventNameとopt_thisを削除 arg.splice(0, 2); for (; i < length; i++) { copyEvents[i].apply(opt_this || this, arg); } } function _copyArray(array) { var newArray = [], i = 0; try { newArray = [].slice.call(array); } catch(e) { for (; i < array.length; i++) { newArray.push(array[i]); } } return newArray; } }; function YouTube() { var that = this, _players = []; EventDispatcher.call(this); _init(); function _init() { var tag = doc.createElement("script"), firstScriptTag = doc.getElementsByTagName("script")[0]; tag.src = "https://www.youtube.com/iframe_api"; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); function onYouTubeIframeAPIReady() { that.fireEvent("YOUTUBE_READY"); } // export win.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady; } function _onPlayerReady(evt) { // 動画再生準備完了時イベント var player = this.target; player.playVideo(); // 動画再生 } function _onPlayerStateChange(evt) { // 動画再生状態変更時イベント if (this.data === 0) { // 動画停止時 that.fireEvent("WATCHED_VIDEO", this.target, evt); } } function build(id, videoId, width, height) { var player = new YT.Player(id, { width : width || 640, // 動画幅 height : height || 480, // 動画高さ videoId : videoId, // 動画ID events : { onReady : function(player) { _onPlayerReady.call(player, id); }, onStateChange : function(player) { _onPlayerStateChange.call(player, id); } }, playerVars: { rel : 0, // 関連動画 showinfo : 0, // 動画情報 controls : 1, // コントローラー wmode : "transparent" // z-indexを有効にする } }); _players.push({id: id, player: player}); } this.build = build; } YouTube.originalConstructor = YouTube.prototype.constructor; YouTube.prototype = new EventDispatcher(); YouTube.prototype.constructor = YouTube.originalConstructor; YouTube.getInstance = function() { if (!YouTube.instance) { YouTube.instance = new YouTube(); } return YouTube.instance; }; })(this, document);
つかいかた
var youTube = YouTube.getInstance(); // YOUTUBE_READEYイベントにコールバックを渡してつかいます。 youTube.addEventListener("YOUTUBE_READY", function() { youTube.build("player", "1g0ebPju_eE"); });