LoginSignup
1
1

More than 5 years have passed since last update.

ニコニコ動画のプレイヤーをポップアップ表示するjQueryプラグインを作成しました(修正版)

Last updated at Posted at 2018-04-06

コピペで使うとバグるかもしれません
前回の記事でバグあるかもって書きましたがIE11で盛大にバグってました。
動画プレイヤが意図した場所に表示されずに画面の一番下に表示されてしまいます。
原因はdocument.currentScriptがIE11だと使用できない&polyfillもうまくいかないことでした。
polyfill
そんな中でどう修正したかというと、document.currentScriptがnullの場合にniconico動画の読み込みスクリプトへの参照を設定しました。無理やりですね。。。

前置きが長くなりましたが一応改善できたので記事にします。

(function ($, window) {
    var NiconicoDialog = null,
        defaultCss = {},
        methods = {
            //initialize plugin
            init: function (options) {
                options = $.extend({}, $.fn.NiconicoPopup.defaults, options);
                // initialize Niconico Player Dialog
                if (NiconicoDialog === null) {
                    NiconicoDialog = $('<div>').css({
                        display: 'none',
                        padding: 0
                    });
                    $('body').append(NiconicoDialog);
                    NiconicoDialog.dialog({
                        autoOpen: false,
                        resizable: false,
                        draggable: options.draggable,
                        modal: options.modal,
                        dialogClass: options.cssClass,
                        create: function () {
                            defaultCss.backgroundImage = $(".ui-dialog").css('background-image');
                            defaultCss.border = $(".ui-dialog").css('border');
                            defaultCss.backgroundColor = $(".ui-dialog").css('background-color');
                        },
                        close: function () {
                            NiconicoDialog.html('');
                            $(".ui-dialog-titlebar").show();
                            $(".ui-dialog").css({
                                'background-image': defaultCss.backgroundImage,
                                'border': defaultCss.border,
                                'background-color': defaultCss.backgroundColor
                            });
                        }
                    });
                }
                return this.each(function () {
                    var obj = $(this),
                        data = obj.data('Niconico'),
                        niconicoId,
                        NiconicoURL,
                        $titleBar;
                    if (!data) { //check if event is already assigned
                        obj.data('Niconico', {
                            target: obj
                        });
                        $(obj).bind('click.NiconicoPopup', function (event) {
                            niconicoId = options.niconicoId;
                            if ($.trim(niconicoId) === '' || niconicoId === false) {
                                niconicoId = obj.attr(options.idAttribute);
                            }
                            //Format Niconico URL
                            NiconicoURL = '//embed.nicovideo.jp/watch/' + niconicoId + '/script?w=640&h=360';
                            NiconicoDialog.dialog({ //reset width and height
                                width: 'auto',
                                height: 'auto'
                            });
                            NiconicoDialog.dialog({
                                minWidth: options.width,
                                minHeight: options.height
                            });
                            NiconicoDialog.dialog('open');
                            $(".ui-widget-overlay").fadeTo('fast', options.overlayOpacity); //set Overlay opacity
                            $titleBar = $(".ui-dialog-titlebar");
                            if (options.hideTitleBar && options.modal) { //hide Title Bar (only if Modal is enabled)
                                $titleBar.hide(); //hide Title Bar
                                $(".ui-widget-overlay").click(function () { //automatically assign Click event to overlay
                                    NiconicoDialog.dialog("close");
                                });
                            }
                            if (options.clickOutsideClose && options.modal) { //assign clickOutsideClose event only if Modal option is enabled
                                $(".ui-widget-overlay").click(function () {
                                    NiconicoDialog.dialog("close");
                                });
                            }
                            $titleBar.removeClass("ui-corner-all").addClass("ui-corner-top"); //only round the top corners on titlebar
                            if (!options.showBorder) {
                                $(".ui-dialog").css({
                                    'background-image': 'none',
                                    'border': 'none',
                                    'background-color': 'transparent'
                                });
                            }
                            event.preventDefault();
                        });
                    }
                });
            },
            destroy: function () {
                return this.each(function () {
                    $(this).unbind(".NiconicoPopup");
                    $(this).removeData('Niconico');
                });
            }
        };
    function getNiconicoPlayer(URL) {
        var script = document.createElement('script');
        script.setAttribute('type', 'text/javascript');
        script.setAttribute('src', URL);
        if (!document.currentScript) {
            document.currentScript = script
            script.onload = function () {
                document.currentScript = null
                script.onload = null
            }
        }
        return script;
    }
    $.fn.NiconicoPopup = function (method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.NiconicoPopup');
        }
    };
    //default configuration
    $.fn.NiconicoPopup.defaults = {
        'niconicoId': '',
        'title': '',
        'idAttribute': 'rel',
        'cssClass': 'NiconicoDialog',
        'draggable': false,
        'modal': true,
        'width': 640,
        'height': 380,
        'hideTitleBar': true,
        'clickOutsideClose': true,
        'overlayOpacity': 0.5,
        'autohide': 2,
        'autoplay': 1,
        'color': 'red',
        'controls': 1,
        'fs': 1,
        'loop': 0,
        'showinfo': 0,
        'theme': 'light',
        'showBorder': true
    };
})(jQuery, window);
1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1