欢迎来到纸飞机Wiki !

纸飞机Wiki目前包含43个页面，303次编辑，6个用户。

微件:BilibiliVideo：修订间差异

来自纸飞机Wiki
（撤销Alice（讨论）的版本97）
标签：撤销
无编辑摘要
 
（未显示同一用户的35个中间版本）
第1行： 第1行：
<noinclude>
<noinclude>
<h2>介绍</h2>
该Widget引用自:  [https://zh.moegirl.org.cn/ 萌娘百科]
该Widget引用自:  [https://zh.moegirl.org.cn/ 萌娘百科]


第5行： 第7行：


'''本Widget不能单独使用'''，请使用Template:BilibiliVideo！
'''本Widget不能单独使用'''，请使用Template:BilibiliVideo！
<h2>修改记录</h2>
'''本站与萌娘百科存在环境差异，为了让该Widget能正常使用，做出了一定的修改'''
*1. 删除了一个和萌娘百科自定义皮肤相关的if分支
*2. 修复了一个jquery调用异常:将“window.RLQ.push(async ()...)”改为“window.RLQ.push(['jquery',async ()...])”<br>参考自[https://wiki.guildwars2.com/wiki/User:Chieftain%20Alex/MediaWiki 该信息发布页]的mediawiki1.32+/Broken Stuff一节
*3. 解决了视频无法加载的问题:b站的newplayer只能被[https://s1.hdslb.com/bfs/seed/jinkela/short/player/whitelist.js 白名单]网站使用，因此改用默认player
*4. 解决了默认player播放器点击非按钮区域会弹窗到b站页面的问题:为iframe增加了sandbox相关属性，使全部跳转失效
*5. 修复并优化了该模板的响应式布局
</noinclude>
</noinclude>


<includeonly><!--{if !isset($wgBilibili) || !$wgBilibili}--><!--{assign var="wgBilibili" value=true scope="global"}--><style>
<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);
     max-width: 100%;
     max-width: 96vw!important;
}
}
.bilibili-video-container.exec {
.bilibili-video-container.exec {
第22行： 第40行：
.bilibili-video-container .bilibili-widescreen,
.bilibili-video-container .bilibili-widescreen,
.bilibili-video-container iframe {
.bilibili-video-container iframe {
    max-width: 100%;
     background-color: #fff!important;
     background-color: #fff!important;
}
.bilibili-video-container iframe{
    width: 100%!important;
    height: 100%!important;
}
}
.bilibili-title {
.bilibili-title {
     padding: .2em 6.5em .2em 1em;
     padding: .2em 6.5em .2em 1em;
     position: relative;
     position: relative;
    max-width: 100%!important;
}
}
.bilibili-title a {
.bilibili-title a {
第45行： 第67行：
}
}
.onshow .bilibili-widescreen{
.onshow .bilibili-widescreen{
     display: block;
    color:brown;
     display: contents;
}
}
.bilibili-toggle {
.bilibili-toggle {
第80行： 第103行：
     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;
    box-sizing: border-box;
}
}
.bilibili-video-container:not([data-max-width]) .bilibili-iframe-container {
.bilibili-video-container:not([data-max-width]) .bilibili-iframe-container {
     max-width: calc(100% - 12px)!important;
     max-width: 100%;
}
}
.bilibili-video-container:not([data-max-width]).onshow .bilibili-iframe-container {
.bilibili-video-container:not([data-max-width]).onshow .bilibili-iframe-container {
第124行： 第148行：
<script>
<script>
"use strict";
"use strict";
// 纸飞机Wiki: 添加'jquery'以修复mediawiki1.32+版本中widget调用jquery异常的问题
window.RLQ.push(['jquery',async () => {
window.RLQ.push(['jquery',async () => {
    window.isInitAllowed = function(){return true;};
     const errMsg = {
     const errMsg = {
         id: '此处填写的id有误，请参考<a href="https://zh.moegirl.org.cn/Template:BilibiliVideo#firstHeading" target="_blank">模板文档</a>修正……',
         id: '此处填写的id有误，请参考<a href="https://zh.moegirl.org.cn/Template:BilibiliVideo#firstHeading" target="_blank">模板文档</a>修正……',
第222行： 第248行：
             }
             }
         };
         };
        if (mw.config.get("skin") === "MoeMobileSkin") {
        // 纸飞机Wiki: 删除了此if分支的内容
        }
        else {
            const global_element = $("#mw-content-text");
            const placeholderToggle = (iframe) => {
                if (iframe.data("displayFlag")) {
                    iframe.data("displayFlag", false);
                    iframe.data("placeholder").fadeOut(370);
                }
            };
            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);
                    },
                };
            }
            // 纸飞机Wiki: 将newplayer改为默认player，因为newplayer实行白名单机制，只能被部分指定网站调用
            const iframe_href_base = "https://player.bilibili.com/player.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) {
                    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%" });
                },
                recallWH = function recallWH(ele) {
                    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)`);
                };
            const run = () => {
                const ids = {
                    failed: {
                        aid: new Set(),
                        bvid: new Set(),
                    },
                    forbidden: {
                        aid: new Set(),
                        bvid: new Set(),
                    },
                    pending: 0,
                };
                const targets = $(".bilibili-video-container:not(.exec)");
                ids.pending = targets.length;
                targets.addClass("exec").each((_, ele) => {
                    const dataset = ele.dataset;
                    const _id = dataset.id;
                    const selfbox = $(ele);
                    const toggleButton = selfbox.find(".bilibili-toggle");
                    const widescreenButton = selfbox.find(".bilibili-widescreen");
                    const validation = idCorrector(_id);
                    let id,
                        prefix;
                    if (validation) {
                        id = validation.id;
                        prefix = validation.prefix;
                    } else {
                        ele.outerHTML = genErr("id");
                        return;
                    }
                    let page = parseInt(+(dataset.page || 1));
                    if (isNaN(page) || page < 1) {
                        page = 1;
                        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, "95vw", (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",
                        src: "",
                        "class": "bilibili-iframe",
                        // 纸飞机Wiki: 添加sandbox属性，阻止单击iframe内部时弹出的b站页面
                        "sandbox": "allow-forms allow-pointer-lock allow-same-origin allow-scripts allow-top-navigation",
                        "max-width": "95vw",
                    }).css({
                        width: width,
                        height: height,
                    });
                    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);
                    });
                    $.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) {
                                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]);
                                console.info("Widget:BilibiliVideo", `${prefix.href}${id}`, code, message);
                                const errorType = getErrorType(code);
                                if (errorType) {
                                    ids[errorType][prefix.iframe].add(id);
                                }
                                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 href = title_text.attr("href");
                            if (list[index] !== undefined && list[index].cid !== undefined) {
                                iframe.attr("data-src", `${iframe_href_base}${prefix.iframe}=${id}&cid=${list[index].cid}&page=${_page}${tIsInvalid ? "" : `&t=${t}`}`);
                                title_text.attr("href", href.replace(new RegExp(`\\?p=${page}`, "g"), `?p=${_page}`));
                                title_text.text(`${name} [${_page}/${list.length}]${tIsInvalid ? "" : `[视频从${time}开始播放]`}`);
                                if (subtitle) { title_text.append(`<br>（${_page}、${list[index].part}）`); }
                            } else {
                                title_text.text(name + (tIsInvalid ? "" : `[视频从${time}开始播放]`));
                                iframe.attr("data-src", `${iframe_href_base + prefix.iframe}=${id}&page=${_page}${tIsInvalid ? "" : `&t=${t}`}`);
                            }
                            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();
                                toggleButton.text("隐藏视频");
                                selfbox.removeAttr("style");
                            }
                            submit(ids);
                        },
                    });
                    //toggle
                    toggleButton.on("click", () => {
                        selfbox.width(iframeContainer.outerWidth(true));
                        selfbox.toggleClass("onshow");
                        iframeContainer.toggle();
                        if (toggleButton.text() === "显示视频") {
                            toggleButton.text("隐藏视频");
                            $(window).resize();
                        } else {
                            toggleButton.text("显示视频");
                            selfbox.removeAttr("style");
                        }
                    });
                    widescreenButton.on("click", () => {
                        if (selfbox.is(":not(.onshow)")) { return; }
                        if (selfbox.is(".widescreen")) {
                            selfbox.removeClass("widescreen");
                            widescreenButton.text("显示宽屏");
                            recallWH(iframeContainer);
                            recallWH(iframe);
                            recallWH(selfbox);
                        } else {
                            selfbox.addClass("widescreen");
                            widescreenButton.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);
                        }
                    });
                });
            };
            $(run);
            mw.hook("wikipage.content").add(run);
            $(window).on("load", run);
            $(window).on("resize", () => {
                $(".bilibili-video-container.onshow.widescreen").each((_, ele) => {
                    const selfbox = $(ele);
                    selfbox.css("width", selfbox.parent().width() > Math.min(911, global_element.width()) ? "73%" : "100%");
                    setTureHeight(selfbox);
                    setMaxHeight(selfbox, selfbox.find(".bilibili-iframe-container"));
                });
            });
        }
     delete window.isInitAllowed;
     delete window.isInitAllowed;
     } catch (e) {
     } catch (e) {

2023年5月2日 (二) 00:31的最新版本


介绍

该Widget引用自: 萌娘百科

出处&使用说明: https://zh.moegirl.org.cn/Widget:BilibiliVideo

本Widget不能单独使用，请使用Template:BilibiliVideo！

修改记录

本站与萌娘百科存在环境差异，为了让该Widget能正常使用，做出了一定的修改

  • 1. 删除了一个和萌娘百科自定义皮肤相关的if分支
  • 2. 修复了一个jquery调用异常:将“window.RLQ.push(async ()...)”改为“window.RLQ.push(['jquery',async ()...])”
    参考自该信息发布页的mediawiki1.32+/Broken Stuff一节
  • 3. 解决了视频无法加载的问题:b站的newplayer只能被白名单网站使用，因此改用默认player
  • 4. 解决了默认player播放器点击非按钮区域会弹窗到b站页面的问题:为iframe增加了sandbox相关属性，使全部跳转失效
  • 5. 修复并优化了该模板的响应式布局



取自“https://wiki.zhifeiji.art/mediawiki-1.39.3/index.php?title=微件:BilibiliVideo&oldid=143”