https://esu.lol/index.php?action=history&feed=atom&title=Widget%3ABilibiliVideo
Widget:BilibiliVideo - 版本历史
2026-06-17T03:15:57Z
本wiki上该页面的版本历史
MediaWiki 1.43.1
https://esu.lol/index.php?title=Widget:BilibiliVideo&diff=85757&oldid=prev
Amulet：创建页面，内容为“</noinclude><includeonly><!--{if !isset($wgBilibili) || !$wgBilibili}--><!--{assign var="wgBilibili" value=true scope="global"}--><style> .bilibili-video-container { border: 1px solid rgba(170,170,170,0.37); max-width: 100%; } .bilibili-video-container.exec { display: table; } .bilibili-iframe-container, .bilibili-video-container { display: none; } .bilibili-video-container, .bilibili-video-container .bilibili-widescreen, .bilibili-video-contain…”
2026-06-16T15:06:51Z
<p>创建页面，内容为“</noinclude><includeonly><!--{if !isset($wgBilibili) || !$wgBilibili}--><!--{assign var="wgBilibili" value=true scope="global"}--><style> .bilibili-video-container { border: 1px solid rgba(170,170,170,0.37); max-width: 100%; } .bilibili-video-container.exec { display: table; } .bilibili-iframe-container, .bilibili-video-container { display: none; } .bilibili-video-container, .bilibili-video-container .bilibili-widescreen, .bilibili-video-contain…”</p>
<p><b>新页面</b></p><div></noinclude><includeonly><!--{if !isset($wgBilibili) || !$wgBilibili}--><!--{assign var="wgBilibili" value=true scope="global"}--><style><br />
.bilibili-video-container {<br />
border: 1px solid rgba(170,170,170,0.37);<br />
max-width: 100%;<br />
}<br />
.bilibili-video-container.exec {<br />
display: table;<br />
}<br />
.bilibili-iframe-container,<br />
.bilibili-video-container {<br />
display: none;<br />
}<br />
.bilibili-video-container,<br />
.bilibili-video-container .bilibili-widescreen,<br />
.bilibili-video-container iframe {<br />
max-width: 100%;<br />
background-color: #fff!important;<br />
}<br />
.bilibili-title {<br />
padding: .2em 6.5em .2em 1em;<br />
position: relative;<br />
}<br />
.bilibili-title a {<br />
word-break: break-word;<br />
}<br />
.bilibili-widescreen {<br />
position: absolute;<br />
display: none;<br />
width: 1em;<br />
right: calc(-2rem - 1px);<br />
border: 1px solid rgba(170,170,170,0.37);<br />
padding: .25rem .5rem;<br />
line-height: 1.5em;<br />
top: -2px;<br />
user-select: none;<br />
cursor: pointer;<br />
}<br />
.onshow .bilibili-widescreen{<br />
display: block;<br />
}<br />
.bilibili-toggle {<br />
position: absolute;<br />
top: calc(50% - .5em);<br />
right: .7em;<br />
line-height: 1em;<br />
cursor: pointer;<br />
padding-left: 1em;<br />
background-image: url(/skins/Vector/images/search-ltr.png?39f97);<br />
background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2212%22%20height=%2213%22%3E%20%3Cg%20fill=%22none%22%20stroke=%22%2354595d%22%20stroke-width=%222%22%3E%20%3Cpath%20d=%22M11.29%2011.71l-4-4%22/%3E%20%3Ccircle%20cx=%225%22%20cy=%225%22%20r=%224%22/%3E%20%3C/g%3E%20%3C/svg%3E);<br />
background-position: left center;<br />
background-repeat: no-repeat;<br />
}<br />
.bilibili-toggle:hover {<br />
color: #36b;<br />
}<br />
.bilibili-video-button,<br />
.bilibili-video-button:visited {<br />
display: inline-block;<br />
margin: 4px 5px;<br />
padding: 10px 25px;<br />
font-size: 14px;<br />
text-align: center;<br />
color: #fff;<br />
background: #de698c;<br />
border-radius: 4px;<br />
}<br />
.bilibili-iframe-container {<br />
padding: 6px;<br />
position: relative;<br />
border: 0 solid rgba(170,170,170,0.37);<br />
border-top-width: 1px;<br />
}<br />
.bilibili-video-container:not([data-max-width]) .bilibili-iframe-container {<br />
max-width: calc(100% - 12px)!important;<br />
}<br />
.bilibili-video-container:not([data-max-width]).onshow .bilibili-iframe-container {<br />
max-height: calc(100% - 27px)!important;<br />
}<br />
.bilibili-video-container textarea {<br />
background: white;<br />
color: black;<br />
width: 80%;<br />
margin: auto;<br />
}<br />
.bilibili-iframe-overlay {<br />
width: 0;<br />
height: 0;<br />
padding-top: 30%;<br />
text-align: center;<br />
box-sizing: border-box;<br />
background: rgb(167, 215, 249);<br />
position: absolute;<br />
top: 3px;<br />
left: 6px;<br />
z-index: 2;<br />
}<br />
.bilibili-iframe-retry-link {<br />
position: absolute;<br />
top: 10px;<br />
right: 10px;<br />
display: none;<br />
background: white;<br />
padding: 0 0.5em;<br />
}<br />
html > body > .navpopup .bilibili-video-container > * {<br />
display: none !important;<br />
}<br />
html > body > .navpopup .bilibili-video-container::before {<br />
content: "请不要在注释里使用 BilibiliVideo 模板";<br />
font-style: italic;<br />
}<br />
</style><script><br />
"use strict";<br />
(window.RLQ ||= []).push([<br />
[<br />
"mediawiki.base",<br />
"jquery",<br />
],<br />
async () => {<br />
const errMsg = {<br />
id: '此处填写的id有误，请参考<a href="/Template:BilibiliVideo#firstHeading" target="_blank">模板文档</a>修正……',<br />
error: "执行出现问题，请复制以下内容并在提问求助区处粘贴寻求帮助：$$$",<br />
attr: '下方填写的参数 $$$ 有误，请参考<a href="/Template:BilibiliVideo#firstHeading" target="_blank">模板文档</a>修正……',<br />
};<br />
await $.ready;<br />
const ifNamespaceAllow = [0, 4, 10, 12].includes(mw.config.get("wgNamespaceNumber"));<br />
const sanNode = $(`<${"span/"}>`);<br />
const genErr = (type, msg = "") => Reflect.has(errMsg, type) ? `<${"div"} style="font-style: italic; border: 1px dashed red;">BilibiliVideo模板：${errMsg[type].replace("$$$", sanNode.text(msg).html())}<${"/div"}>` : "";<br />
const injectErrMsgBefore = ($ele, type, msg = "") => $ele.before(genErr(type, msg));<br />
const getErrorType = (code) => {<br />
switch (code) {<br />
case 62003: {<br />
return false;<br />
}<br />
case -403: {<br />
return "forbidden";<br />
}<br />
default: {<br />
return "failed";<br />
}<br />
}<br />
};<br />
/**<br />
* @param { string } id<br />
*/<br />
const idCorrector = (id) => {<br />
let type = false;<br />
// 1. 有明确的 av 前缀且符合 aid 规则<br />
if (/^av[1-9]\d*$/i.test(id)) {<br />
type = "av";<br />
}<br />
// 2. 有明确的 bv 前缀且符合 bvid 规则<br />
else if (/^[bB][vV]1[FcwAPNKTMug3GV5Lj7EJnHpWsx4tb8haYeviqBz6rkCy12mUSDQX9RdoZf]{9}$/.test(id)) {<br />
type = "bv";<br />
}<br />
// 3. 没有明确的前缀，但符合 aid 规则<br />
else if (/^[1-9]\d*$/.test(id)) {<br />
type = "av";<br />
}<br />
// 4. 没有明确的前缀，但符合 bvid 规则且不符合 aid 规则<br />
else if (/^1?[FcwAPNKTMug3GV5Lj7EJnHpWsx4tb8haYeviqBz6rkCy12mUSDQX9RdoZf]{9}$/.test(id)) {<br />
type = "bv";<br />
}<br />
// 5. 无法判断<br />
<br />
if (type === "av") {<br />
return {<br />
id: id.replace(/^av/i, ""),<br />
prefix: {<br />
href: "av",<br />
iframe: "aid",<br />
},<br />
};<br />
}<br />
if (type === "bv") {<br />
return {<br />
id: id.replace(/^.*([FcwAPNKTMug3GV5Lj7EJnHpWsx4tb8haYeviqBz6rkCy12mUSDQX9RdoZf]{9})$/i, "1$1"),<br />
prefix: {<br />
href: "BV",<br />
iframe: "bvid",<br />
},<br />
};<br />
}<br />
return false;<br />
};<br />
try {<br />
const isNaN = Number.isNaN || window.isNaN;<br />
const cssLengthUnitValidator = (length, defaultValue, callback, paramName, $ele) => {<br />
if (typeof length !== "string" || length.length === 0) {<br />
callback(false);<br />
return defaultValue;<br />
}<br />
const parsedNumber = parseFloat(length.replace(/[a-z]+/i, ""));<br />
if (isNaN(parsedNumber) || parsedNumber <= 0) {<br />
callback(false);<br />
injectErrMsgBefore($ele, "attr", paramName);<br />
return defaultValue;<br />
}<br />
if (/^(?:\d+|\d*\.\d+)(?:em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|Q|in|pc|pt|px|%)$/.test(length)) {<br />
callback(true);<br />
return length;<br />
}<br />
if (/^(?:\d+|\d*\.\d+)$/.test(length)) {<br />
callback(true);<br />
return `${length}px`;<br />
}<br />
callback(false);<br />
injectErrMsgBefore($ele, "attr", paramName);<br />
return defaultValue;<br />
};<br />
const fixedNumber = (number) => `${+number < 10 ? "0" : ""}${number}`;<br />
const secondsParser = (seconds) => `${Math.floor(+seconds / 60)}:${fixedNumber(+seconds % 60)}`;<br />
const submit = (ids) => {<br />
/* not applicable */<br />
};<br />
const global_element = $("#mw-content-text");<br />
const placeholderToggle = (iframe) => {<br />
if (iframe.data("displayFlag")) {<br />
iframe.data("displayFlag", false);<br />
iframe.data("placeholder").fadeOut(370);<br />
}<br />
};<br />
let lazyLoadObserver;<br />
if (Reflect.has(window, "IntersectionObserver") &&<br />
Reflect.has(window, "IntersectionObserverEntry") &&<br />
Reflect.has(window.IntersectionObserverEntry.prototype, "intersectionRatio") &&<br />
Reflect.has(window.IntersectionObserverEntry.prototype, "isIntersecting")) {<br />
lazyLoadObserver = new IntersectionObserver((entries) => {<br />
entries.forEach((entry) => {<br />
if (entry.isIntersecting) {<br />
entry.target.src = entry.target.dataset.src;<br />
setTimeout(() => {<br />
placeholderToggle($(entry.target));<br />
}, 13070);<br />
lazyLoadObserver.unobserve(entry.target);<br />
}<br />
});<br />
});<br />
} else {<br />
lazyLoadObserver = {<br />
observe: (target) => {<br />
target.src = target.dataset.src;<br />
setTimeout(() => {<br />
placeholderToggle($(target));<br />
}, 13070);<br />
},<br />
};<br />
}<br />
const iframe_href_base = "https://www.bilibili.com/blackboard/newplayer.html?playlist=true&playlist_order=sequential&musth5=1&noEndPanel=1&crossDomain=1&autoplay=0&";<br />
const EPSILON = 2.220446049250313e-16,<br />
rememberWH = (ele) => {<br />
ele.data({ width: ele.width(), height: ele.height() });<br />
},<br />
setTureHeight = (ele) => {<br />
const barHeight = ele.data("height") - ele.data("width") * 9 / 16; //计算标题和播放器控制栏高度<br />
ele.height(ele.width() * 9 / 16 + barHeight);<br />
},<br />
setWH = (ele) => {<br />
ele.css({ width: "100%", height: "100%" });<br />
},<br />
recallWH = (ele) => {<br />
ele.width(ele.data("width")).height(ele.data("height"));<br />
},<br />
setMaxHeight = (container, target) => {<br />
const h = container.outerHeight(true);<br />
let t = 0;<br />
container.children().each((_, ele) => {<br />
t += $(ele).outerHeight(true);<br />
});<br />
target.css("max-height", `calc(100% - ${parseInt(t - h + 2 - (Number.EPSILON || EPSILON))}px)`);<br />
};<br />
const run = () => {<br />
const ids = {<br />
failed: {<br />
aid: new Set(),<br />
bvid: new Set(),<br />
},<br />
forbidden: {<br />
aid: new Set(),<br />
bvid: new Set(),<br />
},<br />
pending: 0,<br />
};<br />
const targets = $(".bilibili-video-container:not(.exec)");<br />
ids.pending = targets.length;<br />
targets.addClass("exec").each((_, ele) => {<br />
const { dataset } = ele;<br />
const _id = dataset.id;<br />
const selfbox = $(ele);<br />
const toggleButton = selfbox.find(".bilibili-toggle");<br />
const widescreenButton = selfbox.find(".bilibili-widescreen");<br />
const validation = idCorrector(_id);<br />
if (!validation) {<br />
ele.outerHTML = genErr("id");<br />
return;<br />
}<br />
const { id, prefix } = validation;<br />
let page = parseInt(+(dataset.page || 1));<br />
if (isNaN(page) || page < 1) {<br />
page = 1;<br />
if (typeof dataset.page === "string" && dataset.page !== "") {<br />
injectErrMsgBefore(selfbox, "attr", "page");<br />
}<br />
}<br />
const { pagename, title } = dataset;<br />
const height = cssLengthUnitValidator(dataset.height, "441px", (isValidated) => isValidated || selfbox.removeAttr("data-height"), "height", selfbox);<br />
const width = cssLengthUnitValidator(dataset.width, "665px", (isValidated) => isValidated || selfbox.removeAttr("data-width"), "width", selfbox);<br />
const maxHeight = cssLengthUnitValidator(dataset.maxHeight, "100vh", (isValidated) => isValidated || selfbox.removeAttr("data-max-height"), "maxHeight", selfbox);<br />
const maxWidth = cssLengthUnitValidator(dataset.maxWidth, "100%", (isValidated) => isValidated || selfbox.removeAttr("data-max-width"), "maxWidth", selfbox);<br />
const subtitle = !!(dataset.subtitle === "true");<br />
const t = parseInt(dataset.t);<br />
const tIsInvalid = isNaN(t) || t <= 0;<br />
const iframeContainer = selfbox.find(".bilibili-iframe-container");<br />
const title_text = $("<a/>").attr("rel", "nofollow noreferrer noopener").addClass("external text").attr({<br />
href: `https://www.bilibili.com/video/${prefix.href}${id}?p=${page}${tIsInvalid ? "" : `&t=${t}`}`,<br />
target: "_blank",<br />
}).prependTo(selfbox.find(".bilibili-title"));<br />
const iframe = $("<iframe/>").attr({<br />
allow: "fullscreen",<br />
allowfullscreen: true,<br />
frameborder: 0,<br />
scrolling: "no",<br />
src: "",<br />
"class": "bilibili-iframe",<br />
}).css({<br />
width: width,<br />
height: height,<br />
"max-width": maxWidth,<br />
"max-height": maxHeight,<br />
});<br />
if (!tIsInvalid) {<br />
selfbox.removeAttr("data-auto-expand");<br />
} else if (typeof dataset.t === "string" && dataset.t !== "") {<br />
injectErrMsgBefore(selfbox, "attr", "t");<br />
}<br />
const time = secondsParser(t);<br />
title_text.text(`${(title || prefix.href + id) + ([0, 1].includes(page) ? "" : ` (P${page})`) + (tIsInvalid ? "" : `[视频从${time}开始播放]`)}【视频信息加载中……】`);<br />
iframeContainer.css({<br />
width: width,<br />
height: height,<br />
"max-width": maxWidth,<br />
"max-height": maxHeight,<br />
});<br />
iframe.appendTo(iframeContainer);<br />
const div = $("<div/>");<br />
div.css({<br />
position: "absolute",<br />
top: "0",<br />
left: "0",<br />
bottom: "0",<br />
right: "0",<br />
"z-index": "99",<br />
display: "flex",<br />
"align-items": "center",<br />
background: "rgba(255, 255, 255, .37)",<br />
});<br />
const text = $("<div/>");<br />
text.css({<br />
"text-align": "center",<br />
width: "100%",<br />
}).text("正在加载中，若长时间空白则说明是网络问题……");<br />
div.append(text).appendTo(iframeContainer);<br />
iframe.data({<br />
placeholder: div,<br />
displayFlag: true,<br />
});<br />
iframe[0].addEventListener("load", () => {<br />
placeholderToggle(iframe);<br />
});<br />
$.ajax({<br />
url: `https://api.bilibili.com/x/web-interface/view?${prefix.iframe}=${id}&jsonp=jsonp`,<br />
type: "GET",<br />
dataType: "jsonp",<br />
timeout: 10000,<br />
success: ({ code, message, data }) => {<br />
if (code !== 0) {<br />
title_text.text((title || prefix.href + id) + ([0, 1].includes(page) ? "" : ` (P${page})`) + (tIsInvalid ? "" : `[视频从${time}开始播放]`));<br />
iframe.attr("data-src", `${iframe_href_base + prefix.iframe}=${id}&page=${page}${tIsInvalid ? "" : `&t=${t}`}`);<br />
lazyLoadObserver.observe(iframe[0]);<br />
console.info("Widget:BilibiliVideo", `${prefix.href}${id}`, code, message);<br />
const errorType = getErrorType(code);<br />
if (errorType) {<br />
ids[errorType][prefix.iframe].add(id);<br />
}<br />
return;<br />
}<br />
const list = data.pages;<br />
let _page = 1;<br />
const name = title || (data.title || prefix.href + id);<br />
let index;<br />
let length;<br />
if (pagename) {<br />
for (index = 0, length = list.length; index < length; index++) {<br />
if (list[index].part !== pagename) { continue; }<br />
_page = list[index].page;<br />
break;<br />
}<br />
} else { _page = page; }<br />
index = _page - 1;<br />
const href = title_text.attr("href");<br />
if (list[index] !== undefined && list[index].cid !== undefined) {<br />
iframe.attr("data-src", `${iframe_href_base}${prefix.iframe}=${id}&cid=${list[index].cid}&page=${_page}${tIsInvalid ? "" : `&t=${t}`}`);<br />
title_text.attr("href", href.replace(new RegExp(`\\?p=${page}`, "g"), `?p=${_page}`));<br />
title_text.text(`${name} [${_page}/${list.length}]${tIsInvalid ? "" : `[视频从${time}开始播放]`}`);<br />
if (subtitle) { title_text.append(`<br>（${_page}、${list[index].part}）`); }<br />
} else {<br />
title_text.text(name + (tIsInvalid ? "" : `[视频从${time}开始播放]`));<br />
iframe.attr("data-src", `${iframe_href_base + prefix.iframe}=${id}&page=${_page}${tIsInvalid ? "" : `&t=${t}`}`);<br />
}<br />
lazyLoadObserver.observe(iframe[0]);<br />
},<br />
error: () => {<br />
title_text.text((title || prefix.href + id) + ([0, 1].includes(page) ? "" : ` (P${page})`) + (tIsInvalid ? "" : `[视频从${time}开始播放]`));<br />
iframe.attr("data-src", `${iframe_href_base + prefix.iframe}=${id}&page=${page}${tIsInvalid ? "" : `&t=${t}`}`);<br />
lazyLoadObserver.observe(iframe[0]);<br />
},<br />
complete: () => {<br />
if (selfbox.is('[data-auto-expand="true"]')) {<br />
selfbox.addClass("onshow");<br />
iframeContainer.show();<br />
toggleButton.text("隐藏视频");<br />
selfbox.removeAttr("style");<br />
}<br />
submit(ids);<br />
},<br />
});<br />
//toggle<br />
toggleButton.on("click", () => {<br />
selfbox.width(iframeContainer.outerWidth(true));<br />
selfbox.toggleClass("onshow");<br />
iframeContainer.toggle();<br />
if (toggleButton.text() === "显示视频") {<br />
toggleButton.text("隐藏视频");<br />
$(window).resize();<br />
} else {<br />
toggleButton.text("显示视频");<br />
selfbox.removeAttr("style");<br />
}<br />
});<br />
widescreenButton.on("click", () => {<br />
if (selfbox.is(":not(.onshow)")) { return; }<br />
if (selfbox.is(".widescreen")) {<br />
selfbox.removeClass("widescreen");<br />
widescreenButton.text("显示宽屏");<br />
recallWH(iframeContainer);<br />
recallWH(iframe);<br />
recallWH(selfbox);<br />
} else {<br />
selfbox.addClass("widescreen");<br />
widescreenButton.text("退出宽屏");<br />
rememberWH(selfbox);<br />
selfbox.css("width", selfbox.parent().width() > Math.min(911, global_element.width()) ? "73%" : "100%"); //可以看见按钮的最小宽度 665 的 1/0.73 倍<br />
setTureHeight(selfbox);<br />
rememberWH(iframe);<br />
rememberWH(iframeContainer);<br />
setWH(iframe);<br />
setWH(iframeContainer);<br />
iframeContainer.height(selfbox.height() - title_text.parent().height());<br />
setMaxHeight(selfbox, iframeContainer);<br />
}<br />
});<br />
});<br />
};<br />
$(run);<br />
mw.hook("wikipage.content").add(run);<br />
$(window).on("load", run);<br />
$(window).on("resize", () => {<br />
$(".bilibili-video-container.onshow.widescreen").each((_, ele) => {<br />
const selfbox = $(ele);<br />
selfbox.css("width", selfbox.parent().width() > Math.min(911, global_element.width()) ? "73%" : "100%");<br />
setTureHeight(selfbox);<br />
setMaxHeight(selfbox, selfbox.find(".bilibili-iframe-container"));<br />
});<br />
});<br />
} catch (e) {<br />
/* eslint-disable */<br />
var msg = genErr("error", navigator.userAgent + " : " + e + " " + e.stack.split("\n")[1].trim());<br />
$(".bilibili-video-container").each(function (_, ele) {<br />
ele.outerHTML = msg;<br />
});<br />
/* eslint-enable */<br />
}<br />
}<br />
]);<br />
</script><!--{/if}--></includeonly></div>
Amulet