読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

続・YouTube Player APIをつかう

JavaScript YouTube

自分用に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");
});

demo