コピペで使うとバグるかもしれません
前回の記事でバグあるかもって書きましたが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);