「Widget:BilibiliVideo」の版間の差分
(同じ利用者による、間の1版が非表示) | |||
1行目: | 1行目: | ||
<noinclude>{{BilibiliVideo/doc/copyright}} | <noinclude>{{BilibiliVideo/doc/copyright}} | ||
− | ''' | + | '''このウィジェットは直接利用されることは出来ませんので'''、{{tl|BilibiliVideo}}をご利用してください!</noinclude><includeonly><!--{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); | ||
110行目: | 110行目: | ||
window.RLQ.push(() => { | window.RLQ.push(() => { | ||
const errMsg = { | const errMsg = { | ||
− | id: ' | + | id: 'ここに記入された「id」は間違っています。修正点は<a href="https://ja.moegirl.org.cn/Template:BilibiliVideo#firstHeading" target="_blank">テンプレート文書</a>をご参照ください……', |
− | error: " | + | error: "実装時にエラーが発生したので、次の内容をコピーして審議区で問い合わせてください:$$$", |
− | attr: ' | + | attr: '次に記入されたパラメータ「$$$」は間違っています。修正点は<a href="https://ja.moegirl.org.cn/Template:BilibiliVideo#firstHeading" target="_blank">テンプレート文書</a>をご参照ください……', |
}; | }; | ||
const sanNode = $(`<${"span/"}>`); | const sanNode = $(`<${"span/"}>`); | ||
− | const genErr = (type, msg = "") => type in errMsg ? `<${"div"} style="font-style: italic; border: 1px dashed red;"> | + | 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)); | const injectErrMsgBefore = ($ele, type, msg = "") => $ele.before(genErr(type, msg)); | ||
try { | try { | ||
196行目: | 196行目: | ||
return; | return; | ||
} | } | ||
− | ele.innerText = " | + | ele.innerText = "読み込み中、空白の場合は通信エラーです……"; |
$.ajax({ | $.ajax({ | ||
url: `https://api.bilibili.com/x/web-interface/view?${prefix.iframe}=${id}&jsonp=jsonp`, | url: `https://api.bilibili.com/x/web-interface/view?${prefix.iframe}=${id}&jsonp=jsonp`, | ||
222行目: | 222行目: | ||
index = _page - 1; | index = _page - 1; | ||
const time = secondsParser(t); | 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 ? "" : `[ | + | 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) { | if (list[index] !== undefined && list[index].cid !== undefined && subtitle) { | ||
button.append(`<br>(${_page}、${list[index].part})`); | button.append(`<br>(${_page}、${list[index].part})`); | ||
274行目: | 274行目: | ||
}, | }, | ||
setTureHeight = function setTureHeight(ele) { | setTureHeight = function setTureHeight(ele) { | ||
− | const barHeight = ele.data("height") - ele.data("width") * 9 / 16; | + | const barHeight = ele.data("height") - ele.data("width") * 9 / 16; //计算标题和播放器控制栏高度 |
ele.height(ele.width() * 9 / 16 + barHeight); | ele.height(ele.width() * 9 / 16 + barHeight); | ||
}, | }, | ||
346行目: | 346行目: | ||
} | } | ||
const time = secondsParser(t); | const time = secondsParser(t); | ||
− | title_text.text(`${(title || prefix.href + id) + (![0, 1].includes(page) ? ` (P${page})` : "") + (tIsInvalid ? "" : `[ | + | title_text.text(`${(title || prefix.href + id) + (![0, 1].includes(page) ? ` (P${page})` : "") + (tIsInvalid ? "" : `[動画は「${time}」から再生を開始します]`)}【動画情報読み込み中……】`); |
iframeContainer.css({ | iframeContainer.css({ | ||
width: width, | width: width, | ||
370行目: | 370行目: | ||
"text-align": "center", | "text-align": "center", | ||
width: "100%", | width: "100%", | ||
− | }).text(" | + | }).text("読み込み中、空白の場合は通信エラーです……"); |
div.append(text).appendTo(iframeContainer); | div.append(text).appendTo(iframeContainer); | ||
iframe.data({ | iframe.data({ | ||
386行目: | 386行目: | ||
success: function ({ code, message, data }) { | success: function ({ code, message, data }) { | ||
if (code !== 0) { | if (code !== 0) { | ||
− | title_text.text((title || prefix.href + id) + (![0, 1].includes(page) ? ` (P${page})` : "") + (tIsInvalid ? "" : `[ | + | 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}`}`); | iframe.attr("data-src", `${iframe_href_base + prefix.iframe}=${id}&page=${page}${tIsInvalid ? "" : `&t=${t}`}`); | ||
lazyLoadObserver.observe(iframe[0]); | lazyLoadObserver.observe(iframe[0]); | ||
409行目: | 409行目: | ||
iframe.attr("data-src", `${iframe_href_base}${prefix.iframe}=${id}&cid=${list[index].cid}&page=${_page}${tIsInvalid ? "" : `&t=${t}`}`); | 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.attr("href", href.replace(new RegExp(`\\?p=${page}`, "g"), `?p=${_page}`)); | ||
− | title_text.text(`${name} [${_page}/${list.length}]${tIsInvalid ? "" : `[ | + | title_text.text(`${name} [${_page}/${list.length}]${tIsInvalid ? "" : `[動画は「${time}」から再生を開始します]`}`); |
if (subtitle) { title_text.append(`<br>(${_page}、${list[index].part})`); } | if (subtitle) { title_text.append(`<br>(${_page}、${list[index].part})`); } | ||
} else { | } else { | ||
− | title_text.text(name + (tIsInvalid ? "" : `[ | + | title_text.text(name + (tIsInvalid ? "" : `[動画は「${time}」から再生を開始します]`)); |
iframe.attr("data-src", `${iframe_href_base + prefix.iframe}=${id}&page=${_page}${tIsInvalid ? "" : `&t=${t}`}`); | iframe.attr("data-src", `${iframe_href_base + prefix.iframe}=${id}&page=${_page}${tIsInvalid ? "" : `&t=${t}`}`); | ||
} | } | ||
418行目: | 418行目: | ||
}, | }, | ||
error: function () { | error: function () { | ||
− | title_text.text((title || prefix.href + id) + (![0, 1].includes(page) ? ` (P${page})` : "") + (tIsInvalid ? "" : `[ | + | 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}`}`); | iframe.attr("data-src", `${iframe_href_base + prefix.iframe}=${id}&page=${page}${tIsInvalid ? "" : `&t=${t}`}`); | ||
lazyLoadObserver.observe(iframe[0]); | lazyLoadObserver.observe(iframe[0]); | ||
426行目: | 426行目: | ||
selfbox.addClass("onshow"); | selfbox.addClass("onshow"); | ||
iframeContainer.show(); | iframeContainer.show(); | ||
− | selfbox.find(".bilibili-toggle").text(" | + | selfbox.find(".bilibili-toggle").text("動画を隠す"); |
selfbox.removeAttr("style"); | selfbox.removeAttr("style"); | ||
} | } | ||
437行目: | 437行目: | ||
selfbox.toggleClass("onshow"); | selfbox.toggleClass("onshow"); | ||
iframeContainer.toggle(); | iframeContainer.toggle(); | ||
− | if (self.text() === " | + | if (self.text() === "動画を表示") { |
− | self.text(" | + | self.text("動画を隠す"); |
$(window).resize(); | $(window).resize(); | ||
} else { | } else { | ||
− | self.text(" | + | self.text("動画を表示"); |
selfbox.removeAttr("style"); | selfbox.removeAttr("style"); | ||
} | } | ||
450行目: | 450行目: | ||
if (selfbox.is(".widescreen")) { | if (selfbox.is(".widescreen")) { | ||
selfbox.removeClass("widescreen"); | selfbox.removeClass("widescreen"); | ||
− | self.text(" | + | self.text("ワイドスクリーン表示"); |
recallWH(iframeContainer); | recallWH(iframeContainer); | ||
recallWH(iframe); | recallWH(iframe); | ||
456行目: | 456行目: | ||
} else { | } else { | ||
selfbox.addClass("widescreen"); | selfbox.addClass("widescreen"); | ||
− | self.text(" | + | self.text("スタンダードに戻るnn"); |
rememberWH(selfbox); | rememberWH(selfbox); | ||
− | selfbox.css("width", selfbox.parent().width() > Math.min(911, global_element.width()) ? "73%" : "100%"); | + | selfbox.css("width", selfbox.parent().width() > Math.min(911, global_element.width()) ? "73%" : "100%"); //可以看见按钮的最小宽度 665 的 1/0.73 倍 |
setTureHeight(selfbox); | setTureHeight(selfbox); | ||
rememberWH(iframe); | rememberWH(iframe); |
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}}をご利用してください!