Widget:BilibiliVideo:修订间差异

imported>850710247liu
(创建页面,内容为“<noinclude>{{BilibiliVideo/doc/copyright}} '''本Widget不能单独使用''',请使用{{tl|BilibiliVideo}}!</noinclude><includeonly> <!--{if !isset($wgBilibili)…”)
 
(fix)
 
(未显示1个用户的28个中间版本)
第1行: 第1行:
<noinclude>{{BilibiliVideo/doc/copyright}}
<noinclude>{{BilibiliVideo/doc/copyright}}
'''本Widget不能单独使用''',请使用{{tl|BilibiliVideo}}!</noinclude><includeonly>
'''本Widget不能单独使用''',请使用{{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);
第16行: 第13行:
}
}
.bilibili-video-container,
.bilibili-video-container,
.bilibili-video-container div,
.bilibili-video-container .bilibili-widescreen,
.bilibili-video-container .bilibili-widescreen,
.bilibili-video-container iframe {
.bilibili-video-container iframe {
第33行: 第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: -1px;
    top: -2px;
    user-select: none;
    user-select: none;
    cursor: pointer;
    cursor: pointer;
第77行: 第73行:
    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;
}
}
第109行: 第107行:
}
}
</style><script>
</style><script>
window.RLQ.push(function() {
"use strict";
    $(function() {
window.addEventListener('jquery-ready', () => {
     'use strict';
   const errMsg = {
      var isNaN = Number.isNaN || window.isNaN;
     id: '此处填写的id有误,请参考<a href="https://zh.moegirl.org.cn/Template:BilibiliVideo#firstHeading" target="_blank">模板文档</a>修正……',
      if (mw.config.get('skin') === 'minerva') $('.bilibili-video-container:not(.bilibili-video-initialized)').each(function() {
     error: "执行出现问题,请复制以下内容并在提问求助区处粘贴寻求帮助:$$$",
       var element = $(this),
     attr: '下方填写的参数 $$$ 有误,请参考<a href="https://zh.moegirl.org.cn/Template:BilibiliVideo#firstHeading" target="_blank">模板文档</a>修正……',
         dataset = this.dataset;
   };
       element.addClass("bilibili-video-initialized");
   const sanNode = $(`<${"span/"}>`);
       var id = dataset.aid.replace('av', ''),
    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"}>` : "";
         title = dataset.title,
   const injectErrMsgBefore = ($ele, type, msg = "") => $ele.before(genErr(type, msg));
         pagename = dataset.pagename,
   try {
         page = parseInt(dataset.page),
      const isNaN = Number.isNaN || window.isNaN;
         t = parseInt(dataset.t),
     const cssLengthUnitValidator = (length, defaultValue, callback, paramName, $ele) => {
         tIsInvalid = isNaN(t) || t <= 0,
       if (typeof length !== "string" || length.length === 0) {
         subtitle = dataset.subtitle === 'true' ? true : false;
         callback(false);
       $.ajax({
         return defaultValue;
         url: 'https://mgwbcprd.azureedge.net/BilibiliMeta/Index/' + encodeURIComponent('av' + id),
       }
          type: 'GET',
       const parsedNumber = parseFloat(length.replace(/[a-z]+/i, ""));
          success: function(data) {
       if (isNaN(parsedNumber) || parsedNumber <= 0) {
            var list = data.VideoEntities
         callback(false);
             .map(function(e, i) {
         injectErrMsgBefore($ele, "attr", paramName);
               e.page = i + 1;
         return defaultValue;
               e.title = e.Title.replace(/^\d+、/, '');
       }
               return e;
       if (/^(?:\d+|\d*\.\d+)(?:em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|Q|in|pc|pt|px|%)$/.test(length)) {
             }),
         callback(true);
             _page = 1,
         return length;
             name = title || (data.Title ? data.Title : 'av' + id),
       }
             index,
       if (/^(?:\d+|\d*\.\d+)$/.test(length)) {
             length;
         callback(true);
            if (pagename) {
         return `${length}px`;
              for (index = 0, length = list.length; index < length; index++) {
       }
               if (list[index].Title !== pagename && list[index].title !== pagename) continue;
       callback(false);
                _page = list[index].page;
       injectErrMsgBefore($ele, "attr", paramName);
                break;
       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;
              }
              }
           } else _page = page;
             const list = data.pages;
           index = _page - 1;
             let _page = 1;
           var sec = t % 60 + '';
             const name = title || (data.title ? data.title : prefix.href + id);
           if (sec.length === 1) sec = '0' + sec;
             let index;
           var time = Math.floor(t / 60) + ':' + sec;
             let length;
           var button = $('<a/>').addClass('bilibili-video-button').attr('href', "https://www.bilibili.com/video/av" + id + "/?p=" + _page + (tIsInvalid ? '' : '&t=' + t)).text(name + ' [' + _page + '/' + list.length + ']' + (tIsInvalid ? '' : '[跳转至' + time + ']'));
             if (pagename) {
           if (list[index] !== undefined && list[index].VideoCid !== undefined && subtitle) {
               for (index = 0, length = list.length; index < length; index++) {
             button.append('<br>(' + _page + ' ' + list[index].Title + ' ');
                 if (list[index].part !== pagename) { continue; }
           }
                 _page = list[index].page;
           element.before(button).remove();
                 break;
         },
               }
         error: function(e) {
             } else { _page = page; }
           element.before($('<a/>').addClass('bilibili-video-button').attr('href', "https://www.bilibili.com/video/av" + id + "/?p=" + page + (tIsInvalid ? '' : '&t=' + t)).text((title || 'av' + id) + ([0, 1].indexOf(page) !== -1 && !isNaN(page) ? ' (P' + page + ')' : ''))).remove();
             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 {
      else {
        var global_element = $('#mw-content-text');
        const global_element = $("#mw-content-text");
        window.widget = window.widget || {};
        const placeholderToggle = (iframe) => {
       window.widget.bilibili = {
         if (iframe.data("displayFlag")) {
         iframes: new(window.Map || mw.Map)(),
           iframe.data("displayFlag", false);
           iframe.data("placeholder").fadeOut(370);
         }
        };
        };
        var iframe_href_base = 'https://www.bilibili.com/blackboard/newplayer.html?playlist=true&playlist_order=sequential&musth5=1&noEndPanel=1&crossDomain=1&autoplay=0&aid=';
        let lazyLoadObserver;
        var EPSILON = 2.220446049250313e-16,
       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) {
          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) {
            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);
            ele.height(ele.width() * 9 / 16 + barHeight);
          },
          },
          setWH = function setWH(ele) {
          setWH = function setWH(ele) {
            ele.css({ width: '100%', height: '100%' });
            ele.css({ width: "100%", height: "100%" });
          },
          },
          recallWH = function recallWH(ele) {
          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) {
          setMaxHeight = function setMaxHeight(container, target) {
            var h = container.outerHeight(true);
            const h = container.outerHeight(true);
            var t = 0;
            let t = 0;
            container.children().each(function() {
            container.children().each((_, ele) => {
              t += $(this).outerHeight(true);
              t += $(ele).outerHeight(true);
            });
            });
            target.css('max-height', 'calc(100% - ' + parseInt(t - h + 2 - (Number.EPSILON || EPSILON)) + 'px)');
            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(+dataset.aid.replace('av', '')),
           const dataset = ele.dataset,
            selfbox = $(this);
             _id = dataset.id,
         if (isNaN(id) || id <= 0) return;
             selfbox = $(ele);
         var page = parseInt(+(dataset.page || 1)),
            const validation = idCorrector(_id);
            pagename = dataset.pagename,
           let id,
            title = dataset.title,
             prefix;
            height = +dataset.height || 441,
           if (validation) {
            width = +dataset.width || 665,
             id = validation.id;
            subtitle = dataset.subtitle === 'true' ? true : false,
             prefix = validation.prefix;
            t = parseInt(dataset.t),
           } else {
            tIsInvalid = isNaN(t) || t <= 0,
             ele.outerHTML = genErr("id");
            iframeContainer = $(this).find('.bilibili-iframe-container'),
             return;
            title_text = $('<a/>').addClass('external text').attr({
           }
              href: "https://www.bilibili.com/video/av" + id + "/?p=" + page + (tIsInvalid ? '' : '&t=' + t),
           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({
              frameborder: 0,
              frameborder: 0,
              scrolling: 'no',
              scrolling: "no",
              src: '',
              src: "",
              allowfullscreen: true,
              allowfullscreen: true,
             "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);
            });
            });
         if (!tIsInvalid) selfbox.removeAttr("data-auto-expand");
         if (isNaN(page) || page < 1) page = 1;
         if (isNaN(width)) width = 665;
         if (isNaN(height)) height = 441;
         var sec = t % 60 + '';
         if (sec.length === 1) sec = '0' + sec;
         var time = Math.floor(t / 60) + ':' + sec;
         title_text.text((title || 'av' + id) + ([0, 1].indexOf(page) === -1 ? ' (' + page + ')' : '') + (tIsInvalid ? '' : '[视频从' + time + '开始播放]'));
         iframeContainer.css({
           width: width,
           height: height,
         }).find('div').css({
           width: width,
           height: height,
         }).text('正在加载,请稍候……');
         $.extend(iframe, {
           execAppend: function execAppend() {
             var iframe = this,
               retryLink = $('<a/>').text('重新加载').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[0]);
                 iframe.remove();
                 container.append(clone.on('load', function() {
                   $(this).data('load', 'complete');
                 }));
                 window.widget.bilibili.iframes.set(clone[0], $(this));
               });
             iframe.appendTo(iframeContainer.empty()).data('ready', 'appended').on('load', function() {
               $(this).data('load', 'complete');
             });
             window.setTimeout(function() {
               window.widget.bilibili.iframes.set(iframe[0], retryLink);
             }, 10000);
           },
         });
         iframe.data('ready', false);
         window.setTimeout(function() { //异步出去不要卡主线程
            $.ajax({
            $.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
             timeout: 10000,
                  .map(function(e, i) {
              success: function ({ code, message, data }) {
                   e.page = i + 1;
                if (code !== 0) {
                   e.title = e.Title.replace(/^\d+、/, '');
                  title_text.text((title || prefix.href + id) + (![0, 1].includes(page) ? ` (P${page})` : "") + (tIsInvalid ? "" : `[视频从${time}开始播放]`));
                   return e;
                 iframe.attr("data-src", `${iframe_href_base + prefix.iframe}=${id}&page=${page}${tIsInvalid ? "" : `&t=${t}`}`);
                 }),
                 lazyLoadObserver.observe(iframe[0]);
                 _page = 1,
                 console.info("Widget:BilibiliVideo", `${prefix.href}${id}`, code, message);
                 name = title || (data.Title ? data.Title : 'av' + id),
                 return;
                 index,
               }
                 length;
               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].Title !== pagename && list[index].title !== pagename) continue;
                    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;
                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', iframe_href_base + id + '&cid=' + list[index].VideoCid + (tIsInvalid ? '' : '&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("/\\?p=" + page, 'g'), "/?p=" + _page));
                  if (subtitle) { title_text.append(`<br>(${_page} ${list[index].part} `); }
                  title_text.text(name + ' [' + _page + '/' + list.length + ']' + (tIsInvalid ? '' : '[视频从' + time + ' 开始播放]'));
                  if (subtitle) title_text.append('<br>(' + _page + ' ' + list[index].Title + ' ');
                } else {
                } else {
                  title_text.text(name + (tIsInvalid ? '' : '[视频从' + time + ' 开始播放]'));
                  title_text.text(name + (tIsInvalid ? "" : `[视频从${time} 开始播放]`));
                  iframe.attr('src', iframe_href_base + id + '&page=' + _page + (tIsInvalid ? '' : '&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 + ')' : '') + (tIsInvalid ? '' : '[视频从' + time + ' 开始播放]'));
                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('<sup title=" “Bilibili采用会员制,大部分投稿视频会员与游客都可以观看,\n  但部分视频在UP主设定下只有会员才可以观看(这些视频常被称为‘只有会员才知道的世界’)。”\n  - Bilibili#用户制度 @ ZhMoegirl\n在这种情况下我们无法为您解析视频及其分P标题、分P数量等。">(只有会员才知道的世界)</sup>');
                iframe.attr("data-src", `${iframe_href_base + prefix.iframe}=${id}&page=${page}${tIsInvalid ? "" : `&t=${t}`}`);
               iframe.attr('src', iframe_href_base + id + '&page=' + page + (tIsInvalid ? '' : '&t=' + t));
                lazyLoadObserver.observe(iframe[0]);
                if (iframeContainer.is(':visible')) iframe.execAppend();
               else iframe.data('ready', true);
              },
              },
            });
            });
         }, 137);
           //toggle
         //toggle
           selfbox.find(".bilibili-widescreen").on("click", (_, ele) => {
         selfbox.find('.bilibili-toggle').on('click', function() {
             const self = $(ele);
           selfbox.width(iframeContainer.outerWidth(true));
             if (selfbox.is(":not(.onshow)")) { return; }
           selfbox.toggleClass('onshow');
             if (selfbox.is(".widescreen")) {
           iframeContainer.toggle();
               selfbox.removeClass("widescreen");
           if ($(this).text() === '显示视频') {
               self.text("显示宽屏");
             $(this).text('隐藏视频');
               recallWH(iframeContainer);
             if (iframe.data('ready') === true) iframe.execAppend();
               recallWH(iframe);
             $(window).resize();
               recallWH(selfbox);
           } else {
             } else {
             $(this).text('显示视频');
               selfbox.addClass("widescreen");
             selfbox.removeAttr('style');
               self.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);
               iframeContainer.height(selfbox.height() - title_text.parent().height());
               setMaxHeight(selfbox, iframeContainer);
             }
            });
          });
          });
         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);
             iframeContainer.height(selfbox.height() - title_text.parent().height());
             setMaxHeight(selfbox, iframeContainer);
           }
         });
        });
       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);
            setTureHeight(selfbox);
            setMaxHeight(selfbox, selfbox.find('.bilibili-iframe-container'));
            setMaxHeight(selfbox, selfbox.find(".bilibili-iframe-container"));
          });
          });
        });
        });
       setTimeout(function() {
         $('.bilibili-video-container.exec[data-auto-expand="true"]').first().find('.bilibili-toggle').click();
       }, 100);
      }
      }
    });
    } 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>

2022年11月20日 (日) 17:07的最新版本

名称: Bilibili视频插件
作者: 加大号的猫
修订: Boxsnake
重修订: AnnAngela
H5版再修订:
新H5版又修订:
移动版支持: XYZ指示物
版权协定: MIT
发布日期:

2012年6月29日第一版发布;
2015年2月6日更新;
2016年11月29日更新更多细节;
2017年4月10日更新至H5版(感谢众多dalao的debug_(:зゝ∠)_);
2020年01月27日更新至新版H5播放器。

发布地址: https://zh.moegirl.org.cn/Widget:BilibiliVideo && https://zh.moegirl.org.cn/Template:BilibiliVideo
注意事项: 如有问题,请联系作者。

本Widget不能单独使用,请使用{{BilibiliVideo}}!