「Widget:BilibiliVideo」の版間の差分
(同じ利用者による、間の5版が非表示) | |||
1行目: | 1行目: | ||
− | <noinclude> | + | <noinclude>{{BilibiliVideo/doc/copyright}} |
− | + | '''このウィジェットは直接利用されることは出来ませんので'''、{{tl|BilibiliVideo}}をご利用してください!</noinclude><includeonly><!--{if !isset($wgBilibili) || !$wgBilibili}--><!--{assign var="wgBilibili" value=true scope="global"}--><style> | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | ''' | ||
− | |||
− | <!--{if !isset($wgBilibili) || !$wgBilibili}--> | ||
− | <!--{assign var="wgBilibili" value=true scope="global"}--> | ||
− | <style> | ||
.bilibili-video-container { | .bilibili-video-container { | ||
border: 1px solid rgba(170,170,170,0.37); | border: 1px solid rgba(170,170,170,0.37); | ||
27行目: | 13行目: | ||
} | } | ||
.bilibili-video-container, | .bilibili-video-container, | ||
− | |||
.bilibili-video-container .bilibili-widescreen, | .bilibili-video-container .bilibili-widescreen, | ||
.bilibili-video-container iframe { | .bilibili-video-container iframe { | ||
44行目: | 29行目: | ||
display: none; | display: none; | ||
width: 1em; | width: 1em; | ||
− | right: -2rem; | + | right: calc(-2rem - 1px); |
border: 1px solid rgba(170,170,170,0.37); | border: 1px solid rgba(170,170,170,0.37); | ||
padding: .25rem .5rem; | padding: .25rem .5rem; | ||
line-height: 1.5em; | line-height: 1.5em; | ||
− | top: - | + | top: -2px; |
user-select: none; | user-select: none; | ||
cursor: pointer; | cursor: pointer; | ||
76行目: | 61行目: | ||
display: inline-block; | display: inline-block; | ||
margin: 4px 5px; | margin: 4px 5px; | ||
− | padding: | + | padding: 10px 25px; |
font-size: 14px; | font-size: 14px; | ||
− | |||
text-align: center; | text-align: center; | ||
color: #fff; | color: #fff; | ||
85行目: | 69行目: | ||
} | } | ||
.bilibili-iframe-container { | .bilibili-iframe-container { | ||
− | padding: 6px | + | padding: 6px; |
position: relative; | position: relative; | ||
border: 0 solid rgba(170,170,170,0.37); | border: 0 solid rgba(170,170,170,0.37); | ||
border-top-width: 1px; | border-top-width: 1px; | ||
+ | } | ||
+ | .bilibili-video-container:not([data-max-width]) .bilibili-iframe-container { | ||
max-width: calc(100% - 12px)!important; | max-width: calc(100% - 12px)!important; | ||
} | } | ||
− | .onshow .bilibili-iframe-container { | + | .bilibili-video-container:not([data-max-width]).onshow .bilibili-iframe-container { |
max-height: calc(100% - 27px)!important; | max-height: calc(100% - 27px)!important; | ||
} | } | ||
121行目: | 107行目: | ||
} | } | ||
</style><script> | </style><script> | ||
− | window.RLQ.push( | + | "use strict"; |
− | + | window.RLQ.push(() => { | |
− | ' | + | const errMsg = { |
− | + | id: 'ここに記入された「id」は間違っています。修正点は<a href="https://ja.moegirl.org.cn/Template:BilibiliVideo#firstHeading" target="_blank">テンプレート文書</a>をご参照ください……', | |
− | + | error: "実装時にエラーが発生したので、次の内容をコピーして審議区で問い合わせてください:$$$", | |
− | + | attr: '次に記入されたパラメータ「$$$」は間違っています。修正点は<a href="https://ja.moegirl.org.cn/Template:BilibiliVideo#firstHeading" target="_blank">テンプレート文書</a>をご参照ください……', | |
− | + | }; | |
− | + | const sanNode = $(`<${"span/"}>`); | |
− | + | const genErr = (type, msg = "") => type in errMsg ? `<${"div"} style="font-style: italic; border: 1px dashed red;">BilibiliVideo模板:${errMsg[type].replace("$$$", sanNode.text(msg).html())}<${"/div"}>` : ""; | |
− | + | const injectErrMsgBefore = ($ele, type, msg = "") => $ele.before(genErr(type, msg)); | |
− | + | try { | |
− | + | const isNaN = Number.isNaN || window.isNaN; | |
− | } | + | const cssLengthUnitValidator = (length, defaultValue, callback, paramName, $ele) => { |
− | + | if (typeof length !== "string" || length.length === 0) { | |
− | + | callback(false); | |
− | + | return defaultValue; | |
− | + | } | |
− | + | const parsedNumber = parseFloat(length.replace(/[a-z]+/i, "")); | |
− | + | if (isNaN(parsedNumber) || parsedNumber <= 0) { | |
− | + | callback(false); | |
− | + | injectErrMsgBefore($ele, "attr", paramName); | |
− | + | return defaultValue; | |
− | + | } | |
− | + | if (/^(?:\d+|\d*\.\d+)(?:em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|Q|in|pc|pt|px|%)$/.test(length)) { | |
− | + | callback(true); | |
− | + | return length; | |
− | + | } | |
− | + | if (/^(?:\d+|\d*\.\d+)$/.test(length)) { | |
− | + | callback(true); | |
+ | return `${length}px`; | ||
+ | } | ||
+ | callback(false); | ||
+ | injectErrMsgBefore($ele, "attr", paramName); | ||
+ | return defaultValue; | ||
+ | }; | ||
+ | const fixedNumber = (number) => `${+number < 10 ? "0" : ""}${number}`; | ||
+ | const secondsParser = (seconds) => `${Math.floor(+seconds / 60)}:${fixedNumber(+seconds % 60)}`; | ||
+ | const idCorrector = (id) => { | ||
+ | if (/^(?:av)?\d{1,9}$/i.test(id)) { | ||
+ | return { | ||
+ | id: id.replace(/^av/i, ""), | ||
+ | prefix: { | ||
+ | href: "av", | ||
+ | iframe: "aid", | ||
+ | }, | ||
+ | }; | ||
+ | } else if (/^(?:(?:[bB][vV])?1)?[fZodR9XQDSUm21yCkr6zBqiveYah8bt4xsWpHnJE7jL5VG3guMTKNPAwcF]{9}$/.test(id) | ||
+ | && /4.1.7..$/.test(id)) { | ||
+ | return { | ||
+ | id: id.replace(/^.*([fZodR9XQDSUm21yCkr6zBqiveYah8bt4xsWpHnJE7jL5VG3guMTKNPAwcF]{9})$/i, "1$1"), | ||
+ | prefix: { | ||
+ | href: "BV", | ||
+ | iframe: "bvid", | ||
}, | }, | ||
− | + | }; | |
− | + | } | |
− | + | return false; | |
− | + | }; | |
− | + | if (mw.config.get("skin") === "minerva") { | |
− | + | $(".bilibili-video-container:not(.bilibili-video-initialized)").each((_, ele) => { | |
− | + | const element = $(ele), | |
− | + | dataset = ele.dataset; | |
+ | element.addClass("bilibili-video-initialized"); | ||
+ | const _id = dataset.id, | ||
+ | title = dataset.title, | ||
+ | pagename = dataset.pagename, | ||
+ | t = parseInt(dataset.t), | ||
+ | tIsInvalid = isNaN(t) || t <= 0, | ||
+ | subtitle = dataset.subtitle === "true" ? true : false; | ||
+ | let page = parseInt(dataset.page); | ||
+ | if (isNaN(page) || page < 1) { | ||
+ | page = 1; | ||
+ | if (typeof dataset.page === "string" && dataset.page !== "") { | ||
+ | injectErrMsgBefore(element, "attr", "page"); | ||
} | } | ||
+ | } | ||
+ | if ((isNaN(t) || t <= 0) && typeof dataset.t === "string" && dataset.t !== "") { | ||
+ | injectErrMsgBefore(element, "attr", "t"); | ||
+ | } | ||
+ | const validation = idCorrector(_id); | ||
+ | let id, | ||
+ | prefix; | ||
+ | if (validation) { | ||
+ | id = validation.id; | ||
+ | prefix = validation.prefix; | ||
+ | } else { | ||
+ | ele.outerHTML = genErr("id"); | ||
+ | return; | ||
+ | } | ||
+ | ele.innerText = "読み込み中、空白の場合は通信エラーです……"; | ||
+ | $.ajax({ | ||
+ | url: `https://api.bilibili.com/x/web-interface/view?${prefix.iframe}=${id}&jsonp=jsonp`, | ||
+ | type: "GET", | ||
+ | dataType: "jsonp", | ||
+ | timeout: 10000, | ||
+ | success: function ({ code, message, data }) { | ||
+ | if (code !== 0) { | ||
+ | element.before($("<a/>").addClass("bilibili-video-button").attr("rel", "nofollow noreferrer noopener").attr("href", `https://www.bilibili.com/video/${prefix.href}${id}?p=${page}${tIsInvalid ? "" : `&t=${t}`}`).text((title || prefix.href + id) + (![0, 1].includes(page) && !isNaN(page) ? ` (P${page})` : ""))).remove(); | ||
+ | console.info("Widget:BilibiliVideo", `${prefix.href}${id}`, code, message); | ||
+ | return; | ||
+ | } | ||
+ | const list = data.pages; | ||
+ | let _page = 1; | ||
+ | const name = title || (data.title ? data.title : prefix.href + id); | ||
+ | let index; | ||
+ | let length; | ||
+ | if (pagename) { | ||
+ | for (index = 0, length = list.length; index < length; index++) { | ||
+ | if (list[index].part !== pagename) { continue; } | ||
+ | _page = list[index].page; | ||
+ | break; | ||
+ | } | ||
+ | } else { _page = page; } | ||
+ | index = _page - 1; | ||
+ | const time = secondsParser(t); | ||
+ | const button = $("<a/>").addClass("bilibili-video-button").attr("rel", "nofollow noreferrer noopener").attr("href", `https://www.bilibili.com/video/${prefix.href}${id}?p=${_page}${tIsInvalid ? "" : `&t=${t}`}`).text(`${name} [${_page}/${secondsParser(list[index].duration)}]${tIsInvalid ? "" : `[跳转至${time}]`}`); | ||
+ | if (list[index] !== undefined && list[index].cid !== undefined && subtitle) { | ||
+ | button.append(`<br>(${_page}、${list[index].part})`); | ||
+ | } | ||
+ | element.before(button).remove(); | ||
+ | }, | ||
+ | error: function () { | ||
+ | element.before($("<a/>").addClass("bilibili-video-button").attr("rel", "nofollow noreferrer noopener").attr("href", `https://www.bilibili.com/video/${prefix.href}${id}?p=${page}${tIsInvalid ? "" : `&t=${t}`}`).text((title || prefix.href + id) + (![0, 1].includes(page) && !isNaN(page) ? ` (P${page})` : ""))).remove(); | ||
+ | }, | ||
+ | }); | ||
+ | }); | ||
+ | } | ||
+ | else { | ||
+ | const global_element = $("#mw-content-text"); | ||
+ | const placeholderToggle = (iframe) => { | ||
+ | if (iframe.data("displayFlag")) { | ||
+ | iframe.data("displayFlag", false); | ||
+ | iframe.data("placeholder").fadeOut(370); | ||
} | } | ||
}; | }; | ||
− | + | let lazyLoadObserver; | |
− | + | if ("IntersectionObserver" in window && | |
+ | "IntersectionObserverEntry" in window && | ||
+ | "intersectionRatio" in window.IntersectionObserverEntry.prototype && | ||
+ | "isIntersecting" in window.IntersectionObserverEntry.prototype) { | ||
+ | lazyLoadObserver = new IntersectionObserver((entries) => { | ||
+ | entries.forEach((entry) => { | ||
+ | if (entry.isIntersecting) { | ||
+ | entry.target.src = entry.target.dataset.src; | ||
+ | setTimeout(() => { | ||
+ | placeholderToggle($(entry.target)); | ||
+ | }, 13070); | ||
+ | lazyLoadObserver.unobserve(entry.target); | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | } else { | ||
+ | lazyLoadObserver = { | ||
+ | observe: (target) => { | ||
+ | target.src = target.dataset.src; | ||
+ | setTimeout(() => { | ||
+ | placeholderToggle($(target)); | ||
+ | }, 13070); | ||
+ | }, | ||
+ | }; | ||
+ | } | ||
+ | const iframe_href_base = "https://www.bilibili.com/blackboard/newplayer.html?playlist=true&playlist_order=sequential&musth5=1&noEndPanel=1&crossDomain=1&autoplay=0&"; | ||
+ | const EPSILON = 2.220446049250313e-16, | ||
+ | rememberWH = function rememberWH(ele) { | ||
ele.data({ width: ele.width(), height: ele.height() }); | ele.data({ width: ele.width(), height: ele.height() }); | ||
}, | }, | ||
setTureHeight = function setTureHeight(ele) { | setTureHeight = function setTureHeight(ele) { | ||
− | + | const barHeight = ele.data("height") - ele.data("width") * 9 / 16; //计算标题和播放器控制栏高度 | |
ele.height(ele.width() * 9 / 16 + barHeight); | ele.height(ele.width() * 9 / 16 + barHeight); | ||
}, | }, | ||
setWH = function setWH(ele) { | setWH = function setWH(ele) { | ||
− | ele.css({ width: | + | ele.css({ width: "100%", height: "100%" }); |
}, | }, | ||
recallWH = function recallWH(ele) { | recallWH = function recallWH(ele) { | ||
− | ele.width(ele.data( | + | ele.width(ele.data("width")).height(ele.data("height")); |
}, | }, | ||
setMaxHeight = function setMaxHeight(container, target) { | setMaxHeight = function setMaxHeight(container, target) { | ||
− | + | const h = container.outerHeight(true); | |
− | + | let t = 0; | |
− | container.children().each( | + | container.children().each((_, ele) => { |
− | t += $( | + | t += $(ele).outerHeight(true); |
}); | }); | ||
− | target.css( | + | target.css("max-height", `calc(100% - ${parseInt(t - h + 2 - (Number.EPSILON || EPSILON))}px)`); |
}; | }; | ||
− | $( | + | const run = () => { |
− | + | $(".bilibili-video-container:not(.exec)").addClass("exec").each((_, ele) => { | |
− | + | const dataset = ele.dataset, | |
− | + | _id = dataset.id, | |
− | + | selfbox = $(ele); | |
− | + | const validation = idCorrector(_id); | |
− | pagename = | + | let id, |
− | title = | + | prefix; |
− | height = | + | if (validation) { |
− | width = | + | id = validation.id; |
− | + | prefix = validation.prefix; | |
− | + | } else { | |
− | t = | + | ele.outerHTML = genErr("id"); |
− | + | return; | |
− | title_text = $( | + | } |
− | href: | + | let page = parseInt(+(dataset.page || 1)); |
− | target: | + | if (isNaN(page) || page < 1) { |
− | }).prependTo( | + | page = 1; |
− | iframe = $( | + | if (typeof dataset.page === "string" && dataset.page !== "") { |
+ | injectErrMsgBefore(selfbox, "attr", "page"); | ||
+ | } | ||
+ | } | ||
+ | const pagename = dataset.pagename; | ||
+ | const title = dataset.title; | ||
+ | const height = cssLengthUnitValidator(dataset.height, "441px", (isValidated) => isValidated || selfbox.removeAttr("data-height"), "height", selfbox); | ||
+ | const width = cssLengthUnitValidator(dataset.width, "665px", (isValidated) => isValidated || selfbox.removeAttr("data-width"), "width", selfbox); | ||
+ | const maxHeight = cssLengthUnitValidator(dataset.maxHeight, "100vh", (isValidated) => isValidated || selfbox.removeAttr("data-max-height"), "maxHeight", selfbox); | ||
+ | const maxWidth = cssLengthUnitValidator(dataset.maxWidth, "100%", (isValidated) => isValidated || selfbox.removeAttr("data-max-width"), "maxWidth", selfbox); | ||
+ | const subtitle = dataset.subtitle === "true" ? true : false; | ||
+ | const t = parseInt(dataset.t); | ||
+ | const tIsInvalid = isNaN(t) || t <= 0; | ||
+ | const iframeContainer = selfbox.find(".bilibili-iframe-container"); | ||
+ | const title_text = $("<a/>").attr("rel", "nofollow noreferrer noopener").addClass("external text").attr({ | ||
+ | href: `https://www.bilibili.com/video/${prefix.href}${id}?p=${page}${tIsInvalid ? "" : `&t=${t}`}`, | ||
+ | target: "_blank", | ||
+ | }).prependTo(selfbox.find(".bilibili-title")); | ||
+ | const iframe = $("<iframe/>").attr({ | ||
+ | allow: "fullscreen", | ||
+ | allowfullscreen: true, | ||
frameborder: 0, | frameborder: 0, | ||
− | scrolling: | + | scrolling: "no", |
− | src: | + | src: "", |
− | + | "class": "bilibili-iframe", | |
}).css({ | }).css({ | ||
width: width, | width: width, | ||
− | height: height | + | height: height, |
+ | "max-width": maxWidth, | ||
+ | "max-height": maxHeight, | ||
}); | }); | ||
− | + | if (!tIsInvalid) { | |
− | + | selfbox.removeAttr("data-auto-expand"); | |
− | + | } else if (typeof dataset.t === "string" && dataset.t !== "") { | |
− | + | injectErrMsgBefore(selfbox, "attr", "t"); | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | const time = secondsParser(t); | |
− | + | title_text.text(`${(title || prefix.href + id) + (![0, 1].includes(page) ? ` (P${page})` : "") + (tIsInvalid ? "" : `[動画は「${time}」から再生を開始します]`)}【動画情報読み込み中……】`); | |
− | + | iframeContainer.css({ | |
− | + | width: width, | |
− | + | height: height, | |
− | + | "max-width": maxWidth, | |
+ | "max-height": maxHeight, | ||
+ | }); | ||
+ | iframe.appendTo(iframeContainer); | ||
+ | const div = $("<div/>"); | ||
+ | div.css({ | ||
+ | position: "absolute", | ||
+ | top: "0", | ||
+ | left: "0", | ||
+ | bottom: "0", | ||
+ | right: "0", | ||
+ | "z-index": "99", | ||
+ | display: "flex", | ||
+ | "align-items": "center", | ||
+ | background: "rgba(255, 255, 255, .37)", | ||
+ | }); | ||
+ | const text = $("<div/>"); | ||
+ | text.css({ | ||
+ | "text-align": "center", | ||
+ | width: "100%", | ||
+ | }).text("読み込み中、空白の場合は通信エラーです……"); | ||
+ | div.append(text).appendTo(iframeContainer); | ||
+ | iframe.data({ | ||
+ | placeholder: div, | ||
+ | displayFlag: true, | ||
+ | }); | ||
+ | iframe[0].addEventListener("load", () => { | ||
+ | placeholderToggle(iframe); | ||
+ | }); | ||
$.ajax({ | $.ajax({ | ||
− | url: | + | url: `https://api.bilibili.com/x/web-interface/view?${prefix.iframe}=${id}&jsonp=jsonp`, |
− | type: | + | type: "GET", |
− | success: function(data) { | + | dataType: "jsonp", |
− | + | timeout: 10000, | |
− | + | success: function ({ code, message, data }) { | |
− | + | if (code !== 0) { | |
− | + | title_text.text((title || prefix.href + id) + (![0, 1].includes(page) ? ` (P${page})` : "") + (tIsInvalid ? "" : `[動画は「${time}」から再生を開始します]`)); | |
− | + | iframe.attr("data-src", `${iframe_href_base + prefix.iframe}=${id}&page=${page}${tIsInvalid ? "" : `&t=${t}`}`); | |
− | + | lazyLoadObserver.observe(iframe[0]); | |
− | + | console.info("Widget:BilibiliVideo", `${prefix.href}${id}`, code, message); | |
− | + | return; | |
− | + | } | |
+ | const list = data.pages; | ||
+ | let _page = 1; | ||
+ | const name = title || (data.title ? data.title : prefix.href + id); | ||
+ | let index; | ||
+ | let length; | ||
if (pagename) { | if (pagename) { | ||
for (index = 0, length = list.length; index < length; index++) { | for (index = 0, length = list.length; index < length; index++) { | ||
− | if (list[index]. | + | if (list[index].part !== pagename) { continue; } |
_page = list[index].page; | _page = list[index].page; | ||
break; | break; | ||
} | } | ||
− | } else _page = page; | + | } else { _page = page; } |
− | + | index = _page - 1; | |
− | + | const href = title_text.attr("href"); | |
− | if (list[index] !== undefined && list[index]. | + | if (list[index] !== undefined && list[index].cid !== undefined) { |
− | iframe.attr( | + | iframe.attr("data-src", `${iframe_href_base}${prefix.iframe}=${id}&cid=${list[index].cid}&page=${_page}${tIsInvalid ? "" : `&t=${t}`}`); |
− | + | title_text.attr("href", href.replace(new RegExp(`\\?p=${page}`, "g"), `?p=${_page}`)); | |
− | + | title_text.text(`${name} [${_page}/${list.length}]${tIsInvalid ? "" : `[動画は「${time}」から再生を開始します]`}`); | |
− | title_text.attr( | + | if (subtitle) { title_text.append(`<br>(${_page}、${list[index].part})`); } |
− | title_text.text(name | ||
− | if (subtitle) title_text.append( | ||
} else { | } else { | ||
− | title_text.text(( | + | title_text.text(name + (tIsInvalid ? "" : `[動画は「${time}」から再生を開始します]`)); |
− | iframe.attr( | + | iframe.attr("data-src", `${iframe_href_base + prefix.iframe}=${id}&page=${_page}${tIsInvalid ? "" : `&t=${t}`}`); |
− | + | } | |
− | + | lazyLoadObserver.observe(iframe[0]); | |
+ | }, | ||
+ | error: function () { | ||
+ | title_text.text((title || prefix.href + id) + (![0, 1].includes(page) ? ` (P${page})` : "") + (tIsInvalid ? "" : `[動画は「${time}」から再生を開始します]`)); | ||
+ | iframe.attr("data-src", `${iframe_href_base + prefix.iframe}=${id}&page=${page}${tIsInvalid ? "" : `&t=${t}`}`); | ||
+ | lazyLoadObserver.observe(iframe[0]); | ||
+ | }, | ||
+ | complete: function () { | ||
+ | if (selfbox.is('[data-auto-expand="true"]')) { | ||
+ | selfbox.addClass("onshow"); | ||
+ | iframeContainer.show(); | ||
+ | selfbox.find(".bilibili-toggle").text("動画を隠す"); | ||
+ | selfbox.removeAttr("style"); | ||
} | } | ||
}, | }, | ||
− | + | }); | |
− | + | //toggle | |
− | + | selfbox.find(".bilibili-toggle").on("click", (_, ele) => { | |
− | + | const self = $(ele); | |
− | + | selfbox.width(iframeContainer.outerWidth(true)); | |
− | + | selfbox.toggleClass("onshow"); | |
+ | iframeContainer.toggle(); | ||
+ | if (self.text() === "動画を表示") { | ||
+ | self.text("動画を隠す"); | ||
+ | $(window).resize(); | ||
+ | } else { | ||
+ | self.text("動画を表示"); | ||
+ | selfbox.removeAttr("style"); | ||
+ | } | ||
+ | }); | ||
+ | selfbox.find(".bilibili-widescreen").on("click", (_, ele) => { | ||
+ | const self = $(ele); | ||
+ | if (selfbox.is(":not(.onshow)")) { return; } | ||
+ | if (selfbox.is(".widescreen")) { | ||
+ | selfbox.removeClass("widescreen"); | ||
+ | self.text("ワイドスクリーン表示"); | ||
+ | recallWH(iframeContainer); | ||
+ | recallWH(iframe); | ||
+ | recallWH(selfbox); | ||
+ | } else { | ||
+ | selfbox.addClass("widescreen"); | ||
+ | self.text("スタンダードに戻るnn"); | ||
+ | rememberWH(selfbox); | ||
+ | selfbox.css("width", selfbox.parent().width() > Math.min(911, global_element.width()) ? "73%" : "100%"); //可以看见按钮的最小宽度 665 的 1/0.73 倍 | ||
+ | setTureHeight(selfbox); | ||
+ | rememberWH(iframe); | ||
+ | rememberWH(iframeContainer); | ||
+ | setWH(iframe); | ||
+ | setWH(iframeContainer); | ||
+ | iframeContainer.height(selfbox.height() - title_text.parent().height()); | ||
+ | setMaxHeight(selfbox, iframeContainer); | ||
} | } | ||
}); | }); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
}); | }); | ||
− | + | }; | |
− | + | $(run); | |
− | + | mw.hook("wikipage.content").add(run); | |
− | + | $(window).on("load", run); | |
− | + | $(window).on("resize", () => { | |
− | + | $(".bilibili-video-container.onshow.widescreen").each((_, ele) => { | |
− | + | const selfbox = $(ele); | |
− | + | selfbox.css("width", selfbox.parent().width() > Math.min(911, global_element.width()) ? "73%" : "100%"); | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | $(window).on( | ||
− | $( | ||
− | |||
− | selfbox.css( | ||
setTureHeight(selfbox); | setTureHeight(selfbox); | ||
− | setMaxHeight(selfbox, selfbox.find( | + | setMaxHeight(selfbox, selfbox.find(".bilibili-iframe-container")); |
}); | }); | ||
}); | }); | ||
} | } | ||
− | }); | + | } catch (e) { |
+ | /* eslint-disable */ | ||
+ | var msg = genErr("error", navigator.userAgent + " : " + e + " " + e.stack.split("\n")[1].trim()); | ||
+ | $(".bilibili-video-container").each(function (_, ele) { | ||
+ | ele.outerHTML = msg; | ||
+ | }); | ||
+ | /* eslint-enable */ | ||
+ | } | ||
}); | }); | ||
− | </script><!--{/if}--> | + | </script><!--{/if}--></includeonly> |
− | </includeonly> |
2021年8月3日 (火) 00:57時点における最新版
名前 | ビリビリ動画ウィジェット |
著者 | 加大号的猫 |
改訂 | Boxsnake |
再改訂 | AnnAngela |
html5で再改訂 | |
新html5でまた改訂 | |
モバイル対応 | XYZ指示物 |
著作権規約 | MIT |
更新履歴 | 2012年6月29日初バージョン公開; |
掲載URL | https://zh.moegirl.org.cn/Widget:BilibiliVideo && https://zh.moegirl.org.cn/Template:BilibiliVideo |
メモ | ご質問は、著者までご連絡ください。 |
このウィジェットは直接利用されることは出来ませんので、{{BilibiliVideo}}をご利用してください!