HTML:Bilibili-video

<style>
.bilibili-video-container {
	border: 1px solid rgba(170,170,170,0.37);
	border-collapse: separate;
	max-width: 100%;
	box-sizing: content-box;
}
.bilibili-video-container.exec {
	display: table;
}
.bilibili-iframe-container,
.bilibili-video-container {
	display: none;
}
.bilibili-video-container,
.bilibili-video-container .bilibili-widescreen,
.bilibili-video-container iframe {
	max-width: 100%;
	background-color: #fff!important;
}
.bilibili-title {
	padding: .2em 6.5em .2em 1em;
	position: relative;
}
.bilibili-title a {
	word-break: break-word;
}
.bilibili-widescreen {
	position: absolute;
	display: none;
	width: 1em;
	right: calc(-2rem - 1px);
	border: 1px solid rgba(170,170,170,0.37);
	padding: .25rem .5rem;
	line-height: 1.5em;
	top: -2px;
	user-select: none;
	cursor: pointer;
}
.onshow .bilibili-widescreen{
	display: block;
}
.skin-citizen .bilibili-title {
	font-size: var(--font-size-small, 0.875rem);
}
.skin-citizen .bilibili-video-container,
.skin-citizen .bilibili-widescreen {
	border-radius: var(--border-radius-medium);
}
.bilibili-toggle {
	position: absolute;
	top: calc(50% - .5em);
	right: .7em;
	line-height: 1em;
	cursor: pointer;
	padding-left: 1em;
	background-image: url(/skins/Vector/images/search-ltr.png?39f97);
	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);
	background-position: left center;
	background-repeat: no-repeat;
}
.bilibili-toggle:hover {
	color: #36b;
}
.bilibili-video-button,
.bilibili-video-button:visited {
	display: inline-block;
	margin: 4px 5px;
	padding: 10px 25px;
	font-size: 14px;
	text-align: center;
	color: #fff;
	background: #de698c;
	border-radius: 4px;
}
.bilibili-iframe-container {
	padding: 6px;
	position: relative;
	border: 0 solid rgba(170,170,170,0.37);
	border-top-width: 1px;
}
.bilibili-video-container:not([data-max-width]) .bilibili-iframe-container {
	max-width: calc(100% - 12px)!important;
}
.bilibili-video-container:not([data-max-width]).onshow .bilibili-iframe-container {
	max-height: calc(100% - 27px)!important;
}
.bilibili-video-container textarea {
	background: white;
	color: black;
	width: 80%;
	margin: auto;
}
.bilibili-iframe-overlay {
	width: 0;
	height: 0;
	padding-top: 30%;
	text-align: center;
	box-sizing: border-box;
	background: rgb(167, 215, 249);
	position: absolute;
	top: 3px;
	left: 6px;
	z-index: 2;
}
.bilibili-iframe-retry-link {
	position: absolute;
	top: 10px;
	right: 10px;
	display: none;
	background: white;
	padding: 0 0.5em;
}
html > body > .navpopup .bilibili-video-container > * {
	display: none !important;
}
html > body > .navpopup .bilibili-video-container::before {
	content: "请不要在注释里使用 BilibiliVideo 模板";
	font-style: italic;
}
</style><script type="module">(window.RLQ??=[]).push([[],async()=>{let e={id:`此处填写的id有误，请参考<a href="/Template:BilibiliVideo#firstHeading" target="_blank">模板文档</a>修正……`,error:`执行出现问题，请复制以下内容并在提问求助区处粘贴寻求帮助：$$$`,attr:`下方填写的参数 $$$ 有误，请参考<a href="/Template:BilibiliVideo#firstHeading" target="_blank">模板文档</a>修正……`};await $.ready;let t=[0,4,10,12].includes(mw.config.get(`wgNamespaceNumber`)),n=$(`<span/>`),r=(t,r=``)=>Reflect.has(e,t)?`<div style="font-style: italic; border: 1px dashed red;">BilibiliVideo模板：${e[t].replace(`$$$`,n.text(r).html())}</div>`:``,i=(e,t,n=``)=>e.before(r(t,n)),a=e=>{switch(e){case 62003:return!1;case-403:return`forbidden`;default:return`failed`}},o=e=>{let t=!1;return/^av[1-9]\d*$/iu.test(e)?t=`av`:/^[bB][vV]1[FcwAPNKTMug3GV5Lj7EJnHpWsx4tb8haYeviqBz6rkCy12mUSDQX9RdoZf]{9}$/u.test(e)?t=`bv`:/^[1-9]\d*$/u.test(e)?t=`av`:/^1?[FcwAPNKTMug3GV5Lj7EJnHpWsx4tb8haYeviqBz6rkCy12mUSDQX9RdoZf]{9}$/u.test(e)&&(t=`bv`),t===`av`?{id:e.replace(/^av/iu,``),prefix:{href:`av`,iframe:`aid`}}:t===`bv`&&{id:e.replace(/^.*([FcwAPNKTMug3GV5Lj7EJnHpWsx4tb8haYeviqBz6rkCy12mUSDQX9RdoZf]{9})$/iu,`1$1`),prefix:{href:`BV`,iframe:`bvid`}}};try{let e=Number.isNaN||window.isNaN,n=(t,n,r,a,o)=>{if(typeof t!=`string`||t.length===0)return r(!1),n;let s=parseFloat(t.replace(/[a-z]+/iu,``));return e(s)||s<=0?(r(!1),i(o,`attr`,a),n):/^(?:\d+|\d*\.\d+)(?:em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|Q|in|pc|pt|px|%)$/u.test(t)?(r(!0),t):/^(?:\d+|\d*\.\d+)$/u.test(t)?(r(!0),`${t}px`):(r(!1),i(o,`attr`,a),n)},s=e=>`${Number(e)<10?`0`:``}${e}`,c=e=>`${Math.floor(Number(e)/60)}:${s(Number(e)%60)}`,l=e=>{if(!t||--e.pending>0)return;let n=!1;if(e.failed.aid.size+e.failed.bvid.size>0&&!mw.config.get(`wgCategories`).includes(`带有失效视频的条目`)&&(n=!0),e.forbidden.aid.size+e.forbidden.bvid.size>0&&!mw.config.get(`wgCategories`).includes(`带有受限视频的条目`)&&(n=!0),e.failed.aid.size+e.failed.bvid.size===0&&mw.config.get(`wgCategories`).includes(`带有失效视频的条目`)&&(n=!0),e.forbidden.aid.size+e.forbidden.bvid.size===0&&mw.config.get(`wgCategories`).includes(`带有受限视频的条目`)&&(n=!0),n){let e=new URL(`https://moegirlpedia.annangela.cn/bilibiliCollector/videoCheck`);e.searchParams.set(`pageid`,String(mw.config.get(`wgArticleId`))),$.get(`${e}`)}},u=$(`#mw-content-text`),d=e=>{e.data(`displayFlag`)&&(e.data(`displayFlag`,!1),e.data(`placeholder`).fadeOut(370))},f;f=Reflect.has(window,`IntersectionObserver`)&&Reflect.has(window,`IntersectionObserverEntry`)&&Reflect.has(window.IntersectionObserverEntry.prototype,`intersectionRatio`)&&Reflect.has(window.IntersectionObserverEntry.prototype,`isIntersecting`)?new IntersectionObserver(e=>{e.forEach(e=>{if(e.isIntersecting){let t=e.target;t.src=t.dataset.src,setTimeout(()=>{d($(t))},13070),f.unobserve(t)}})}):{observe:e=>{e.src=e.dataset.src,setTimeout(()=>{d($(e))},13070)}};let p=`https://player.bilibili.com/player.html?isOutside=true&playlist=true&playlist_order=sequential&musth5=1&noEndPanel=1&crossDomain=1&autoplay=0&`,m=e=>{e.data({width:e.width(),height:e.height()})},h=e=>{let t=e.data(`height`)-e.data(`width`)*9/16;e.height(e.width()*9/16+t)},g=e=>{e.css({width:`100%`,height:`100%`})},_=e=>{e.width(e.data(`width`)).height(e.data(`height`))},v=(e,t)=>{let n=e.outerHeight(!0),r=0;e.children().each((e,t)=>{r+=$(t).outerHeight(!0)}),t.css(`max-height`,`calc(100% - ${parseInt(String(r-n+2-(2**-52||2220446049250313e-31)),10)}px)`)},y=()=>{let t={failed:{aid:/* @__PURE__ */ new Set,bvid:/* @__PURE__ */ new Set},forbidden:{aid:/* @__PURE__ */ new Set,bvid:/* @__PURE__ */ new Set},pending:0},s=$(`.bilibili-video-container:not(.exec)`);t.pending=s.length,s.addClass(`exec`).each((s,y)=>{let{dataset:b}=y,x=b.id,S=$(y),C=S.find(`.bilibili-toggle`),w=S.find(`.bilibili-widescreen`),T=o(x);if(!T){y.outerHTML=r(`id`);return}let{id:E,prefix:D}=T,O=parseInt(String(Number(b.page||1)),10);(e(O)||O<1)&&(O=1,typeof b.page==`string`&&b.page!==``&&i(S,`attr`,`page`));let{pagename:k,title:A}=b,j=n(b.height,`441px`,e=>e||S.removeAttr(`data-height`),`height`,S),M=n(b.width,`665px`,e=>e||S.removeAttr(`data-width`),`width`,S),N=n(b.maxHeight,`100vh`,e=>e||S.removeAttr(`data-max-height`),`maxHeight`,S),P=n(b.maxWidth,`100%`,e=>e||S.removeAttr(`data-max-width`),`maxWidth`,S),F=b.subtitle===`true`,I=parseInt(b.t),L=e(I)||I<=0,R=S.find(`.bilibili-iframe-container`),z=$(`<a/>`).attr(`rel`,`nofollow noreferrer noopener`).addClass(`external text`).attr({href:`https://www.bilibili.com/video/${D.href}${E}?p=${O}${L?``:`&t=${I}`}`,target:`_blank`}).prependTo(S.find(`.bilibili-title`)),B=$(`<iframe/>`).attr({allow:`fullscreen`,allowfullscreen:!0,frameborder:0,scrolling:`no`,src:``,class:`bilibili-iframe`}).css({width:M,height:j,"max-width":P,"max-height":N});L?typeof b.t==`string`&&b.t!==``&&i(S,`attr`,`t`):S.removeAttr(`data-auto-expand`);let V=c(I);z.text(`${(A||D.href+E)+([0,1].includes(O)?``:` (P${O})`)+(L?``:`[视频从${V}开始播放]`)}【视频信息加载中……】`),R.css({width:M,height:j,"max-width":P,"max-height":N}),B.appendTo(R);let H=$(`<div/>`);H.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)`});let U=$(`<div/>`);U.css({"text-align":`center`,width:`100%`}).text(`正在加载中，若长时间空白则说明是网络问题……`),H.append(U).appendTo(R),B.data({placeholder:H,displayFlag:!0}),B[0].addEventListener(`load`,()=>{d(B)}),$.ajax({url:`https://api.bilibili.com/x/web-interface/view?${D.iframe}=${E}&jsonp=jsonp`,type:`GET`,dataType:`jsonp`,timeout:1e4,success:({code:e,message:n,data:r})=>{if(e!==0){z.text((A||D.href+E)+([0,1].includes(O)?``:` (P${O})`)+(L?``:`[视频从${V}开始播放]`)),B.attr(`data-src`,`${p+D.iframe}=${E}&page=${O}${L?``:`&t=${I}`}`),f.observe(B[0]),console.info(`Widget:BilibiliVideo`,`${D.href}${E}`,e,n);let r=a(e);r&&t[r][D.iframe].add(E);return}let i=r.pages,o=1,s=A||r.title||D.href+E,c,l;if(k){for(c=0,l=i.length;c<l;c++)if(i[c].part===k){o=i[c].page;break}}else o=O;c=o-1;let u=z.attr(`href`);i[c]!==void 0&&i[c].cid!==void 0?(B.attr(`data-src`,`${p}${D.iframe}=${E}&cid=${i[c].cid}&page=${o}${L?``:`&t=${I}`}`),z.attr(`href`,u.replace(RegExp(`\\?p=${O}`,`gu`),`?p=${o}`)),z.text(`${s} [${o}/${i.length}]${L?``:`[视频从${V}开始播放]`}`),F&&z.append(`<br>（${o}、${i[c].part}）`)):(z.text(s+(L?``:`[视频从${V}开始播放]`)),B.attr(`data-src`,`${p+D.iframe}=${E}&page=${o}${L?``:`&t=${I}`}`)),f.observe(B[0])},error:()=>{z.text((A||D.href+E)+([0,1].includes(O)?``:` (P${O})`)+(L?``:`[视频从${V}开始播放]`)),B.attr(`data-src`,`${p+D.iframe}=${E}&page=${O}${L?``:`&t=${I}`}`),f.observe(B[0])},complete:()=>{S.is(`[data-auto-expand="true"]`)&&(S.addClass(`onshow`),R.show(),C.text(`隐藏视频`),S.removeAttr(`style`)),l(t)}}),C.on(`click`,()=>{S.width(R.outerWidth(!0)),S.toggleClass(`onshow`),R.toggle(),C.text()===`显示视频`?(C.text(`隐藏视频`),$(window).resize()):(C.text(`显示视频`),S.removeAttr(`style`))}),w.on(`click`,()=>{S.is(`:not(.onshow)`)||(S.is(`.widescreen`)?(S.removeClass(`widescreen`),w.text(`显示宽屏`),_(R),_(B),_(S)):(S.addClass(`widescreen`),w.text(`退出宽屏`),m(S),S.css(`width`,S.parent().width()>Math.min(911,u.width())?`73%`:`100%`),h(S),m(B),m(R),g(B),g(R),R.height(S.height()-z.parent().height()),v(S,R)))})})};$(y),mw.hook(`wikipage.content`).add(y),$(window).on(`load`,y),$(window).on(`resize`,()=>{$(`.bilibili-video-container.onshow.widescreen`).each((e,t)=>{let n=$(t);n.css(`width`,n.parent().width()>Math.min(911,u.width())?`73%`:`100%`),h(n),v(n,n.find(`.bilibili-iframe-container`))})})}catch(e){let t=r(`error`,`${navigator.userAgent} : ${String(e)} ${String(e.stack?.split(`
`)[1].trim())}`);$(`.bilibili-video-container`).each((e,n)=>{n.outerHTML=t})}}]);</script>