「Widget:BilibiliVideo」の版間の差分

提供: 萌えっ娘百科事典
移動先: 案内、 検索
 
(同じ利用者による、間の4版が非表示)
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 {
 
.bilibili-video-container {
 
     border: 1px solid rgba(170,170,170,0.37);
 
     border: 1px solid rgba(170,170,170,0.37);
27行目: 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 {
44行目: 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;
76行目: 61行目:
 
     display: inline-block;
 
     display: inline-block;
 
     margin: 4px 5px;
 
     margin: 4px 5px;
−
     padding: 0 25px;
+
     padding: 10px 25px;
 
     font-size: 14px;
 
     font-size: 14px;
−
    line-height: 34px;
 
 
     text-align: center;
 
     text-align: center;
 
     color: #fff;
 
     color: #fff;
85行目: 69行目:
 
}
 
}
 
.bilibili-iframe-container {
 
.bilibili-iframe-container {
−
     padding: 6px 6px 0!important;
+
     padding: 6px;
 
     position: relative;
 
     position: relative;
 
     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;
 
}
 
}
121行目: 107行目:
 
}
 
}
 
</style><script>
 
</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) => {
−
         else {
+
            if (typeof length !== "string" || length.length === 0) {
−
            var EPSILON = Number.EPSILON || 2.220446049250313e-16,
+
                 callback(false);
−
                global_autoplay = false,
+
                 return defaultValue;
−
                global_element = $('#mw-content-text');
+
            }
−
            window.widget = window.widget || {};
+
            const parsedNumber = parseFloat(length.replace(/[a-z]+/i, ""));
−
             window.widget.bilibili = {
+
             if (isNaN(parsedNumber) || parsedNumber <= 0) {
−
                 iframes: new(window.Map || mw.Map)(),
+
                callback(false);
−
                i18n: {
+
                injectErrMsgBefore($ele, "attr", paramName);
−
                     ja: {
+
                return defaultValue;
−
                         showVideo: '動画表示',
+
            }
−
                         hideVideo: '動画隠す',
+
            if (/^(?:\d+|\d*\.\d+)(?:em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|Q|in|pc|pt|px|%)$/.test(length)) {
−
                        wideMode: 'シアターモード',
+
                callback(true);
−
                        wideModeExit: 'デフォルト表示',
+
                return length;
−
                        errorMessage: '申し訳ありませんが、ビデオ情報を取得できませんでした',
+
            }
−
                         loading: 'Loading...',
+
            if (/^(?:\d+|\d*\.\d+)$/.test(length)) {
−
                         reload: 'Reload'
+
                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",
 
                     },
 
                     },
−
                    zh: {
+
                };
−
                        showVideo: '显示视频',
+
            }
−
                        hideVideo: '隐藏视频',
+
            return false;
−
                        wideMode: '显示宽屏',
+
        };
−
                        wideModeExit: '隐藏宽屏',
+
        if (mw.config.get("skin") === "minerva") {
−
                        errorMessage: '“Bilibili采用会员制，大部分投稿视频会员与游客都可以观看，\n  但部分视频在UP主设定下只有会员才可以观看（这些视频常被称为‘只有会员才知道的世界’）。”\n  - Bilibili#用户制度 @ ZhMoegirl\n在这种情况下我们无法为您解析视频及其分P标题、分P数量等，也不能强制使用H5播放器。\n但如果您已经登录B站并且设置默认播放器为H5播放器时此处仍会是H5播放器。',
+
            $(".bilibili-video-container:not(.bilibili-video-initialized)").each((_, ele) => {
−
                        loading: '正在加载，请稍候……',
+
                const element = $(ele),
−
                         reload: '重新加载'
+
                    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 {
 +
            const global_element = $("#mw-content-text");
 +
            const placeholderToggle = (iframe) => {
 +
                if (iframe.data("displayFlag")) {
 +
                    iframe.data("displayFlag", false);
 +
                    iframe.data("placeholder").fadeOut(370);
 
                 }
 
                 }
 
             };
 
             };
−
             var i18nkey = mw.config.get('wgUserLanguage') === 'ja' ? 'ja' : 'zh';
+
             let lazyLoadObserver;
−
             var rememberWH = function rememberWH(ele) {
+
            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() });
 
                     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 - 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(+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,
 
                         frameborder: 0,
−
                         scrolling: 'no',
+
                         scrolling: "no",
−
                         src: '',
+
                         src: "",
−
                         allowfullscreen: true
+
                         "class": "bilibili-iframe",
 
                     }).css({
 
                     }).css({
 
                         width: width,
 
                         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(window.widget.bilibili.i18n[i18nkey].loading);
 
−
                $.extend(iframe, {
 
−
                    execAppend: function execAppend() {
 
−
                        var iframe = this,
 
−
                            retryLink = $('<a/>').text(window.widget.bilibili.i18n[i18nkey].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({
 
                     $.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) {
 
                             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; }
−
                             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 {
 
                             } 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 () {
 +
                            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}`}`);
 +
                            lazyLoadObserver.observe(iframe[0]);
 +
                        },
 +
                        complete: function () {
 +
                            if (selfbox.is('[data-auto-expand="true"]')) {
 +
                                selfbox.addClass("onshow");
 +
                                iframeContainer.show();
 +
                                selfbox.find(".bilibili-toggle").text("動画を隠す");
 +
                                 selfbox.removeAttr("style");
 
                             }
 
                             }
 
                         },
 
                         },
−
                        error: function(e) {
+
                    });
−
                            title_text.text(title || 'av' + id + ([0, 1].indexOf(page) !== -1 ? '' : ' (' + page + ')'));
+
                    //toggle
−
                            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="' + window.widget.bilibili.i18n[i18nkey].errorMessage + '"><sup>（注）</sup></span>');
+
                    selfbox.find(".bilibili-toggle").on("click", (_, ele) => {
−
                             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));
+
                        const self = $(ele);
−
                             if (iframeContainer.is(':visible')) iframe.execAppend();
+
                        selfbox.width(iframeContainer.outerWidth(true));
−
                             else iframe.data('ready', 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 (selfbox.hasClass('onshow')) {
 
−
                        $(this).text(window.widget.bilibili.i18n[i18nkey].showVideo);
 
−
                        selfbox.removeAttr('style');
 
−
                    } else {
 
−
                        $(this).text(window.widget.bilibili.i18n[i18nkey].hideVideo);
 
−
                        if (iframe.data('ready') === true) iframe.execAppend();
 
−
                        $(window).resize();
 
−
                    }
 
 
                 });
 
                 });
−
                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.widget.bilibili.i18n[i18nkey].wideMode);
+
             $(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(window.widget.bilibili.i18n[i18nkey].wideModeExit);
 
−
                        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);
 
−
                        setMaxHeight(selfbox, 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);
 
                     setTureHeight(selfbox);
−
                     setMaxHeight(selfbox, selfbox.find('.bilibili-iframe-container'));
+
                     setMaxHeight(selfbox, selfbox.find(".bilibili-iframe-container"));
 
                 });
 
                 });
 
             });
 
             });
 
         }
 
         }
−
     });
+
     } 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>
 

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}}をご利用してください！

「https://ja.moegirl.org.cn/index.php?title=Widget:BilibiliVideo&oldid=5704」から取得