欢迎来到纸飞机Wiki !

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

微件:BilibiliVideo:修订间差异

来自纸飞机Wiki
无编辑摘要
标签手工回退
无编辑摘要
 
(未显示同一用户的47个中间版本)
第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 {
第120行: 第144行:
     font-style: italic;
     font-style: italic;
}
}
</style><script>
</style>
 
<script>
"use strict";
"use strict";
window.RLQ.push(async () => {
// 纸飞机Wiki: 添加'jquery'以修复mediawiki1.32+版本中widget调用jquery异常的问题
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>修正……',
第221行: 第249行:
         };
         };
         if (mw.config.get("skin") === "MoeMobileSkin") {
         if (mw.config.get("skin") === "MoeMobileSkin") {
            const ids = {
 
                failed: {
        // 纸飞机Wiki: 删除了此if分支的内容
                    aid: new Set(),
 
                    bvid: new Set(),
                },
                forbidden: {
                    aid: new Set(),
                    bvid: new Set(),
                },
                pending: 0,
            };
            const targets = $(".bilibili-video-container:not(.bilibili-video-initialized)");
            ids.pending = targets.length;
            targets.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);
                            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 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();
                    },
                    complete: () => {
                        submit(ids);
                    },
                });
            });
         }
         }
         else {
         else {
第343行: 第287行:
                 };
                 };
             }
             }
             const iframe_href_base = "https://www.bilibili.com/blackboard/newplayer.html?playlist=true&playlist_order=sequential&musth5=1&noEndPanel=1&crossDomain=1&autoplay=0&";
            // 纸飞机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,
             const EPSILON = 2.220446049250313e-16,
                 rememberWH = function rememberWH(ele) {
                 rememberWH = function rememberWH(ele) {
第353行: 第298行:
                 },
                 },
                 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) {
第408行: 第353行:
                     const width = cssLengthUnitValidator(dataset.width, "665px", (isValidated) => isValidated || selfbox.removeAttr("data-width"), "width", 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 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 maxWidth = cssLengthUnitValidator(dataset.maxWidth, "95vw", (isValidated) => isValidated || selfbox.removeAttr("data-max-width"), "maxWidth", selfbox);
                     const subtitle = dataset.subtitle === "true" ? true : false;
                     const subtitle = dataset.subtitle === "true" ? true : false;
                     const t = parseInt(dataset.t);
                     const t = parseInt(dataset.t);
第424行: 第369行:
                         src: "",
                         src: "",
                         "class": "bilibili-iframe",
                         "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({
                     }).css({
                         width: width,
                         width: width,
                         height: height,
                         height: height,
                        "max-width": maxWidth,
                        "max-height": maxHeight,
                     });
                     });
                     if (!tIsInvalid) {
                     if (!tIsInvalid) {
第575行: 第521行:
             });
             });
         }
         }
    delete window.isInitAllowed;
     } catch (e) {
     } catch (e) {
         /* eslint-disable */
         /* eslint-disable */
第583行: 第530行:
         /* eslint-enable */
         /* eslint-enable */
     }
     }
});
}]);
</script><!--{/if}--></includeonly>
</script><!--{/if}--></includeonly>

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. 修复并优化了该模板的响应式布局