「Widget:BilibiliVideo」の版間の差分

2021年8月3日 (火) 00:57時点における最新版

名前	ビリビリ動画ウィジェット
著者	加大号的猫
改訂	Boxsnake
再改訂	AnnAngela
html5で再改訂
新html5でまた改訂
モバイル対応	XYZ指示物
著作権規約	MIT
更新履歴	2012年6月29日初バージョン公開； 2015年2月6日アップデート； 2016年11月29日詳細アップデート； 2017年4月10日 html5バージョンにアップデート（デバッグさんたちに感謝します_(:зゝ∠)_）； 2020/01/27に新html5プレーヤー対応にアップデート。
掲載URL	https://zh.moegirl.org.cn/Widget:BilibiliVideo && https://zh.moegirl.org.cn/Template:BilibiliVideo
メモ	ご質問は、著者までご連絡ください。

このウィジェットは直接利用されることは出来ませんので、{{BilibiliVideo}}をご利用してください！

「Widget:BilibiliVideo」の版間の差分

2021年8月3日 (火) 00:57時点における最新版

案内メニュー

個人用ツール

名前空間

変種

表示

その他

検索

案内

ツール

@@ 1行目: / 1行目: @@
-<noinclude><poem>
+<noinclude>{{BilibiliVideo/doc/copyright}}
-Name: Bilibili Video Plugin
+'''このウィジェットは直接利用されることは出来ませんので'''、{{tl|BilibiliVideo}}をご利用してください！</noinclude><includeonly><!--{if !isset($wgBilibili) || !$wgBilibili}--><!--{assign var="wgBilibili" value=true scope="global"}--><style>
-Author: 加大号的猫
-Revised: [[zhmoegirl:User:Boxsnake|Boxsnake]]
-Re-revised: [[zhmoegirl:User:AnnAngela|AnnAngela]]
-Re-re-revised for HTML5: [[zhmoegirl:User:AnnAngela|AnnAngela]]
-Copyright agreement: MIT
-Mobile support: [[zhmoegirl:User:Nbdd0121|XYZ指示物]]
-Release date: 1st version on 2012/06/29, 2nd versionon on 2015/02/06, major update on 2016/11/29, HTML5 version on 2017/04/10
-Release at: zh.moegirl.org/Widget:BilibiliVideo && zh.moegirl.org/Template:BilibiliVideo
-Note: If there are any questions, please contact the author.
-'''THIS WIDGET CAN NOT BE USED ALONE''', PLEASE USE {{tl|BilibiliVideo}}！
-</poem></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);
@@ 27行目: / 13行目: @@
 }
 .bilibili-video-container,
-.bilibili-video-container div,
 .bilibili-video-container .bilibili-widescreen,
 .bilibili-video-container iframe {
@@ 44行目: / 29行目: @@
      display: none;
      width: 1em;
-     right: -2rem;
+     right: calc(-2rem - 1px);
      border: 1px solid rgba(170,170,170,0.37);
      padding: .25rem .5rem;
      line-height: 1.5em;
-     top: -1px;
+     top: -2px;
      user-select: none;
      cursor: pointer;
@@ 76行目: / 61行目: @@
      display: inline-block;
      margin: 4px 5px;
-     padding: 0 25px;
+     padding: 10px 25px;
      font-size: 14px;
-    line-height: 34px;
      text-align: center;
      color: #fff;
@@ 85行目: / 69行目: @@
 }
 .bilibili-iframe-container {
-     padding: 6px 6px 0!important;
+     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;
 }
-.onshow .bilibili-iframe-container {
+.bilibili-video-container:not([data-max-width]).onshow .bilibili-iframe-container {
      max-height: calc(100% - 27px)!important;
 }
@@ 121行目: / 107行目: @@
 }
 </style><script>
-window.RLQ.push(function() {
+"use strict";
-     $(function() {
+window.RLQ.push(() => {
-        'use strict';
+     const errMsg = {
-         var isNaN = Number.isNaN || window.isNaN;
+        id: 'ここに記入された「id」は間違っています。修正点は<a href="https://ja.moegirl.org.cn/Template:BilibiliVideo#firstHeading" target="_blank">テンプレート文書</a>をご参照ください……',
-         if (mw.config.get('skin') === 'minerva') $('.bilibili-video-container').each(function() {
+        error: "実装時にエラーが発生したので、次の内容をコピーして審議区で問い合わせてください：$$$",
-            var element = $(this);
+        attr: '次に記入されたパラメータ「$$$」は間違っています。修正点は<a href="https://ja.moegirl.org.cn/Template:BilibiliVideo#firstHeading" target="_blank">テンプレート文書</a>をご参照ください……',
-            var id = this.dataset.aid.replace('av', ''),
+    };
-                 title = this.dataset.title,
+    const sanNode = $(`<${"span/"}>`);
-                 page = +this.dataset.page,
+    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"}>` : "";
-                 link = "http://www.bilibili.com/video/av" + id + "/index_" + page + ".html";
+    const injectErrMsgBefore = ($ele, type, msg = "") => $ele.before(genErr(type, msg));
-            var button = $('<a/>').addClass('bilibili-video-button').attr('href', link).text((title || 'av' + id) + ([0, 1].indexOf(page) !== -1 && !isNaN(page) ? ' (' + page + ')' : ''));
+    try {
-            element.before(button).remove();
+         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 {
-             var global_autoplay = false,
+             const global_element = $("#mw-content-text");
-                global_element = $('#mw-content-text');
+             const placeholderToggle = (iframe) => {
-             window.widget = window.widget || {};
+                if (iframe.data("displayFlag")) {
-            window.widget.bilibili = {
+                    iframe.data("displayFlag", false);
-                iframes: new(window.Map || mw.Map)()
+                    iframe.data("placeholder").fadeOut(370);
+                }
              };
-             var rememberWH = function rememberWH(ele) {
+             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() });
                  },
                  setTureHeight = function setTureHeight(ele) {
-                     var 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);
                  },
                  setWH = function setWH(ele) {
-                     ele.css({ width: '100%', height: '100%' });
+                     ele.css({ width: "100%", height: "100%" });
                  },
                  recallWH = function recallWH(ele) {
-                     ele.width(ele.data('width')).height(ele.data('height'));
+                     ele.width(ele.data("width")).height(ele.data("height"));
+                },
+                setMaxHeight = function setMaxHeight(container, target) {
+                    const h = container.outerHeight(true);
+                    let t = 0;
+                    container.children().each((_, ele) => {
+                        t += $(ele).outerHeight(true);
+                    });
+                    target.css("max-height", `calc(100% - ${parseInt(t - h + 2 - (Number.EPSILON || EPSILON))}px)`);
                  };
-             $('.bilibili-video-container').addClass('exec').each(function() {
+             const run = () => {
-                var dataset = this.dataset,
+                $(".bilibili-video-container:not(.exec)").addClass("exec").each((_, ele) => {
-                    id = parseInt(+this.dataset.aid.replace('av', '')),
+                    const dataset = ele.dataset,
-                     selfbox = $(this);
+                        _id = dataset.id,
-                if (isNaN(id) || id <= 0) return;
+                        selfbox = $(ele);
-                var page = parseInt(+(this.dataset.page || 1)),
+                     const validation = idCorrector(_id);
-                     pagename = this.dataset.pagename,
+                    let id,
-                     title = this.dataset.title,
+                        prefix;
-                     height = +this.dataset.height || 441,
+                    if (validation) {
-                     width = +this.dataset.width || 665,
+                        id = validation.id;
-                     subtitle = this.dataset.subtitle === 'true' ? true : false,
+                        prefix = validation.prefix;
-                     autoplay = this.dataset.autoplay === 'true' ? true : false,
+                    } else {
-                     t = +this.dataset.t,
+                        ele.outerHTML = genErr("id");
-                     iframeContainer = $(this).find('.bilibili-iframe-container'),
+                        return;
-                     title_text = $('<a/>').addClass('external text').attr({
+                    }
-                         href: "http://www.bilibili.com/video/av" + id + "/index_" + page + ".html",
+                    let page = parseInt(+(dataset.page || 1));
-                         target: '_blank'
+                    if (isNaN(page) || page < 1) {
-                     }).prependTo($(this).find('.bilibili-title')),
+                        page = 1;
-                     iframe = $('<iframe/>').attr({
+                        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,
-                         scrolling: 'no',
+                         scrolling: "no",
-                         src: '',
+                         src: "",
-                         allowfullscreen: true
+                         "class": "bilibili-iframe",
                      }).css({
                          width: width,
-                         height: height
+                         height: height,
+                        "max-width": maxWidth,
+                        "max-height": maxHeight,
                      });
-                if (isNaN(page) || page < 1) page = 1;
+                    if (!tIsInvalid) {
-                if (isNaN(width)) width = 665;
+                        selfbox.removeAttr("data-auto-expand");
-                if (isNaN(height)) height = 441;
+                     } else if (typeof dataset.t === "string" && dataset.t !== "") {
-                title_text.text((title || 'av' + id) + ([0, 1].indexOf(page) === -1 ? ' (' + page + ')' : ''));
+                         injectErrMsgBefore(selfbox, "attr", "t");
-                iframeContainer.css({
-                    width: width,
-                     height: height
-                }).find('div').css({
-                    width: width,
-                    height: height
-                }).text('Loading...');
-                $.extend(iframe, {
-                    execAppend: function execAppend() {
-                        var iframe = this,
-                            retryLink = $('<a/>').text('Reload').addClass('bilibili-iframe-retry-link').on('click', function() {
-                                var container = $(this).closest('.bilibili-iframe-container'),
-                                    iframe = container.find('iframe'),
-                                    clone = iframe.clone();
-                                window.widget.bilibili.iframes.delete(iframe);
-                                iframe.remove();
-                                container.append(clone.on('load', function() {
-                                    $(this).data('load', 'complete');
-                                }));
-                                window.widget.bilibili.iframes.set(clone, $(this));
-                            });
-                         iframe.appendTo(iframeContainer.empty()).data('ready', 'appended').on('load', function() {
-                            $(this).data('load', 'complete');
-                        });
-                        window.setTimeout(function() {
-                            window.widget.bilibili.iframes.set(iframe, retryLink);
-                        }, 10000);
                      }
-                })
+                    const time = secondsParser(t);
-                if (!global_autoplay) {
+                    title_text.text(`${(title || prefix.href + id) + (![0, 1].includes(page) ? ` (P${page})` : "") + (tIsInvalid ? "" : `[動画は「${time}」から再生を開始します]`)}【動画情報読み込み中……】`);
-                     if (autoplay) global_autoplay = true;
+                     iframeContainer.css({
-                } else autoplay = false;
+                        width: width,
-                iframe.data('ready', autoplay);
+                        height: height,
-                window.setTimeout(function() { //异步出去不要卡主线程
+                        "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({
-                         url: 'https://mgwbcprd.azureedge.net/BilibiliMeta/Index/' + encodeURIComponent('av' + id),
+                         url: `https://api.bilibili.com/x/web-interface/view?${prefix.iframe}=${id}&jsonp=jsonp`,
-                         type: 'GET',
+                         type: "GET",
-                         success: function(data) {
+                        dataType: "jsonp",
-                             var list = data.VideoEntities.map(function(e, i) {
+                        timeout: 10000,
-                                    e.page = i + 1;
+                         success: function ({ code, message, data }) {
-                                    e.title = e.Title.replace(/^\d+、/, '');
+                             if (code !== 0) {
-                                    return e;
+                                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}`}`);
-                                _page = 1,
+                                lazyLoadObserver.observe(iframe[0]);
-                                name = title || (data.Title ? data.Title : 'av' + id),
+                                console.info("Widget:BilibiliVideo", `${prefix.href}${id}`, code, message);
-                                index,
+                                return;
-                                length;
+                            }
+                            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].Title !== pagename && list[index].title !== pagename) continue;
+                                     if (list[index].part !== pagename) { continue; }
                                      _page = list[index].page;
                                      break;
                                  }
-                             } else _page = page;
+                             } else { _page = page; }
-                             var index = _page - 1;
+                             index = _page - 1;
-                             var href = title_text.attr('href');
+                             const href = title_text.attr("href");
-                             if (list[index] !== undefined && list[index].VideoCid !== undefined) {
+                             if (list[index] !== undefined && list[index].cid !== undefined) {
-                                 iframe.attr('src', 'https://www.bilibili.com/blackboard/html5player.html?aid=' + id + '&cid=' + list[index].VideoCid + '&enable_ssl=1&crossDomain=1&as_wide=1' + (autoplay ? '&autoplay=true' : '') + (isNaN(t) || t <= 0 ? '' : '&t=' + t));
+                                 iframe.attr("data-src", `${iframe_href_base}${prefix.iframe}=${id}&cid=${list[index].cid}&page=${_page}${tIsInvalid ? "" : `&t=${t}`}`);
-                                if (iframeContainer.is(':visible')) iframe.execAppend();
+                                 title_text.attr("href", href.replace(new RegExp(`\\?p=${page}`, "g"), `?p=${_page}`));
-                                else iframe.data('ready', true);
+                                 title_text.text(`${name} [${_page}/${list.length}]${tIsInvalid ? "" : `[動画は「${time}」から再生を開始します]`}`);
-                                 title_text.attr('href', href.replace(new RegExp('/index_' + page, 'g'), '/index_' + _page));
+                                 if (subtitle) { title_text.append(`<br>（${_page}、${list[index].part}）`); }
-                                 title_text.text(name + ' [' + _page + '/' + list.length + ']');
-                                 if (subtitle) title_text.append('<br>（' + _page + '、' + list[index].Title + '）');
                              } else {
-                                 title_text.text((title || 'av' + id) + ' [' + _page + '/' + list.length + ']');
+                                 title_text.text(name + (tIsInvalid ? "" : `[動画は「${time}」から再生を開始します]`));
-                                 iframe.attr('src', 'https://www.bilibili.com/blackboard/player.html?aid=' + id + '&page=' + _page + '&enable_ssl=1&as_wide=1' + (autoplay === 'true' ? '&autoplay=true' : '') + (isNaN(t) || t <= 0 ? '' : '&t=' + t));
+                                 iframe.attr("data-src", `${iframe_href_base + prefix.iframe}=${id}&page=${_page}${tIsInvalid ? "" : `&t=${t}`}`);
-                                if (iframeContainer.is(':visible')) iframe.execAppend();
-                                else iframe.data('ready', true);
                              }
+                            lazyLoadObserver.observe(iframe[0]);
                          },
-                         error: function(e) {
+                         error: function () {
-                             title_text.text(title || 'av' + id + ([0, 1].indexOf(page) !== -1 ? '' : ' (' + page + ')'));
+                             title_text.text((title || prefix.href + id) + (![0, 1].includes(page) ? ` (P${page})` : "") + (tIsInvalid ? "" : `[動画は「${time}」から再生を開始します]`));
-                             if (e && e.responseJSON && e.responseJSON.message && e.responseJSON.message === "Authentication is required for accessing this video.") title_text.parent().append('<span style="display: inline-block;" title="“申し訳ありませんが、ビデオ情報を取得できませんでした"><sup>（注）</sup></span>');
+                            iframe.attr("data-src", `${iframe_href_base + prefix.iframe}=${id}&page=${page}${tIsInvalid ? "" : `&t=${t}`}`);
-                             iframe.attr('src', 'https://www.bilibili.com/blackboard/player.html?aid=' + id + '&page=' + page + '&enable_ssl=1&as_wide=1' + (autoplay === 'true' ? '&autoplay=true' : '') + (isNaN(t) || t <= 0 ? '' : '&t=' + t));
+                            lazyLoadObserver.observe(iframe[0]);
-                             if (iframeContainer.is(':visible')) iframe.execAppend();
+                        },
-                             else iframe.data('ready', true);
+                        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);
                          }
                      });
-                }, 137);
-                //toggle
-                selfbox.find('.bilibili-toggle').on('click', function() {
-                    selfbox.width(iframeContainer.outerWidth(true));
-                    selfbox.toggleClass('onshow');
-                    iframeContainer.toggle();
-                    if ($(this).text() === '動画表示') {
-                        $(this).text('動画隠す');
-                        if (iframe.data('ready') === true) iframe.execAppend();
-                        $(window).resize();
-                    } else {
-                        $(this).text('動画表示');
-                        selfbox.removeAttr('style');
-                    }
                  });
-                selfbox.find('.bilibili-widescreen').on('click', function() {
+            };
-                    if (selfbox.is(':not(.onshow)')) return;
+            $(run);
-                    if (selfbox.is('.widescreen')) {
+            mw.hook("wikipage.content").add(run);
-                        selfbox.removeClass('widescreen');
+            $(window).on("load", run);
-                        $(this).text('シアターモード');
+             $(window).on("resize", () => {
-                        recallWH(iframeContainer);
+                 $(".bilibili-video-container.onshow.widescreen").each((_, ele) => {
-                        recallWH(iframe);
+                     const selfbox = $(ele);
-                        recallWH(selfbox);
+                     selfbox.css("width", selfbox.parent().width() > Math.min(911, global_element.width()) ? "73%" : "100%");
-                    } else {
-                        selfbox.addClass('widescreen');
-                        $(this).text('デフォルト表示');
-                        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);
-                    }
-                });
-                if (autoplay === true) $(this).find('.bilibili-toggle').click();
-            });
-            window.setInterval(function() {
-                if (!window.widget.bilibili.iframes || window.widget.bilibili.iframes.size === 0) return;
-                window.widget.bilibili.iframes.forEach(function(retryLink, iframe) {
-                    if (!retryLink || !retryLink.closest || !iframe || !iframe.data) return window.widget.bilibili.iframes.delete(iframe);
-                    if (!retryLink.closest('.bilibili-iframe-container')[0]) retryLink.appendTo(iframe.closest('.bilibili-iframe-container'));
-                    if (iframe.data('load') !== 'complete') retryLink.fadeIn();
-                    else retryLink.fadeOut();
-                });
-            }, 1000);
-             $(window).on('resize', function() {
-                 $('.bilibili-video-container.onshow.widescreen').each(function() {
-                     var selfbox = $(this);
-                     selfbox.css('width', selfbox.parent().width > Math.min(911, global_element.width()) ? '73%' : '100%');
                      setTureHeight(selfbox);
+                    setMaxHeight(selfbox, selfbox.find(".bilibili-iframe-container"));
                  });
              });
          }
-     });
+     } catch (e) {
-});</script><!--{/if}-->
+        /* eslint-disable */
-</includeonly>
+        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}--></includeonly>