Tools 是非官方社区Wiki。社区文档正在编写中,欢迎参与。 Wiki编辑答疑群:717421103
版本250722.2
全站通知:

Widget:Biliplayer

来自WIKI实验室WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索

<script src="https://s1.hdslb.com/bfs/static/player/main/core.9ba60fbf.js"></script>

<script>

   /* ===== 设备判断 ===== */
   const ua = navigator.userAgent.toLowerCase();
   let shebei = ;
   if (/android|adr/gi.test(ua)) {
       shebei = 'android';
   } else if (/\(i[^;]+;( U;)? CPU.+Mac OS X/gi.test(ua) || /iPad/gi.test(ua)) {
       shebei = 'ios';
   } else if (/windows nt/.test(ua)) {
       shebei = 'pc';
   }
   /* ===== 改写后的完整 BiliPlayer ===== */
   class BiliPlayer {
       /* 类级计数器:第 0、1、2 … 次调用 */
       static _callCount = 0;
       /* 私有字段 */
       #playerInst = null;   // nano 实例
       #container = null;   // 真正的播放器容器
       #scrollWrap = null;  // 新增的滚动包装容器
       /**
        * 支持两种调用方式:
        * 1) 旧用法:new BiliPlayer('BV1xx', 2, {})
        * 2) 指定容器:new BiliPlayer(containerDOM, 'BV1xx', 2, {})
        */
       constructor(arg1, arg2, arg3) {
           /* 参数重载处理 */
           let container, bvid, page, opts;
           if (typeof arg1 === 'string' && /^BV/.test(arg1)) {
               /* 旧用法:参数顺序 (bvid, page, opts) */
               [bvid, page, opts] = [arg1, arg2 || 1, arg3 || {}];
               container = null;   // 稍后由内部创建
           } else {
               /* 新用法:参数顺序 (container, bvid, page, opts) */
               container = arg1 instanceof HTMLElement ? arg1 : document.querySelector(arg1);
               [bvid, page, opts] = [arg2, arg3 || 1, arguments[3] || {}];
           }
           /* 1. 创建或复用容器 */
           if (!container) {
               // 创建滚动包装容器
               this.#scrollWrap = document.createElement('div');
               this.#scrollWrap.className = 'b3-scroll-wrap';
               // 设置滚动容器内容(如果提供了 scrollContent 参数)
               if (opts.scrollContent) {
                   this.#scrollWrap.innerHTML = opts.scrollContent;
               }
               // 创建播放器容器
               container = document.createElement('div');
               container.className = 'biliplayerW-dom';
               container.id = `d${BiliPlayer._callCount}`;
               // 将播放器容器添加到滚动包装容器中
               this.#scrollWrap.appendChild(container);
               // 将滚动包装容器添加到目标锚点
               const anchors = document.getElementsByClassName('player-anchor');
               const targetAnchor = anchors[BiliPlayer._callCount];
               (targetAnchor || document.body).appendChild(this.#scrollWrap);
               BiliPlayer._callCount++;
           }
           this.#container = container;
           /* 2. 提取配置 */
           const { width = '100%', height = '400px', autoplay = false, muted = false, ...otherOpts } = opts;
           /* 3. 移动端 / PC 端区分渲染 */
           if (shebei === 'android' || shebei === 'ios') {
               /* 移动端:iframe 方案 */
               this.#container.style.cssText = `width:${width};height:${height};max-width:100%;`;
               this.#container.innerHTML =
                   `<iframe name="video-frame"
                    src="https://www.bilibili.com/blackboard/html5mobileplayer.html?bvid=${encodeURIComponent(
                       bvid
                   )}&p=${encodeURIComponent(
                       page
                   )}${autoplay ? '&autoplay' : }"
                    frameborder="no"
                    scrolling="no"
                    allowfullscreen
                    style="width:100%;height:100%;">
           </iframe>`;
               /* 移动端无需 nano,直接 resolve */
               this.ready = Promise.resolve(this);
               this.#playerInst = null;
           } else {
               /* PC 端:nano 方案 */
               if (!window.nano) {
                   throw new Error('未检测到 nano 播放器 SDK');
               }
               this.#container.style.cssText = `width:${width};height:${height};max-width:100%;`;
               this.#playerInst = window.nano.createPlayer({
                   element: this.#container,
                   bvid,
                   p: parseInt(page, 10),
                   autoplay,
                   muted,
                   poster: true,
                   featureList: new Set(),
                   stats: { bSource: 'widget_demo' },
                   ...otherOpts
               });
               this.ready = this.#playerInst
                   .connect()
                   .then(() => {
                       console.log(`播放器 ${this.#container.id} 加载成功`);
                       return this;
                   })
                   .catch(err => {
                       console.error(`播放器 ${this.#container.id} 加载失败`, err);
                       throw err;
                   });
           }
       }
       /* 对外暴露 nano 实例(移动端始终为 null) */
       get player() {
           return this.#playerInst;
       }
       /* 新增:设置滚动容器内容的方法 */
       setScrollContent(content) {
           if (this.#scrollWrap) {
               this.#scrollWrap.innerHTML = content;
           }
       }
       /* 销毁:停止播放并移除 DOM */
       destroy() {
           if (this.#playerInst && this.#playerInst.destroy) {
               this.#playerInst.destroy();
           }
           if (this.#scrollWrap) {
               this.#scrollWrap.remove();
           } else {
               this.#container?.remove();
           }
           this.#playerInst = null;
           this.#container = null;
           this.#scrollWrap = null;
       }
   }

</script> <script>

   (window.RLQ = window.RLQ || []).push(['jquery', () => {
       $(document).ready(function () {
           var val1 = ``
           var val2 = ``;
           var mode = ``;
           if (val2 === `` || val2 === undefined) {
               mode = val1;
           } else {
               mode = val2;
           }
           /*var ua = navigator.userAgent.toLowerCase();
           var shebei = ""
           if (/android|adr/gi.test(ua)) {
               shebei = "android"
           }
           if (/\(i[^;]+;( U;)? CPU.+Mac OS X/gi.test(ua)) {
               shebei = "ios"
           }
           if (/iPad/gi.test(ua)) {
               shebei = "ios"
           }
           if (/windows nt/.test(ua)) {
               shebei = "pc"
           }*/
           if (window.biliplayerWc == undefined) {
               window.biliplayerWc = 0;
           }
           if (mode == ``) { mode = `1`; }
           switch (mode) {
               case `1`: {

document.querySelectorAll(".BiliPlayer")[window.biliplayerWc].innerHTML = `

`;

                   /* 模板占位符照旧 */
                   const bv = ``;
                   const p = `` || '1';
                   const w = `` || '100%';
                   const h = `` || '400px';
                   new BiliPlayer(bv, p, { width: w, height: h, autoplay: false });
                   //biliplayer_core(bv, p, w, h)
                   break;
               }
               case `2`: {

document.querySelectorAll(".BiliPlayer")[window.biliplayerWc].innerHTML = `

`;

                   const Bvid = ``;
                   const Pname = ``;
                   const w = `` || '100%';
                   const h = `` || '400px';
                   fetch(`https://api.bilibili.com/x/web-interface/view?bvid=${Bvid}`)
                       .then(r => r.json())
                       .then(res => {
                           const page = res.data.pages.find(p => p.part === Pname)?.page || 1;
                           new BiliPlayer(Bvid, page, { width: w, height: h, autoplay: false });
                           //biliplayer_core(Bvid, page, w, h);   // 直接复用
                       })
                       .catch(() => {
                           console.error('case2 捕获异常:', err);
                           document.getElementById('d').innerHTML =

'

获取分P失败

';

                       });
                   break;
               }
               case `3`: {

document.querySelectorAll(".BiliPlayer")[window.biliplayerWc].innerHTML = `

`;

                   var Bvid = ``;
                   var internalId = Date.now() + Math.random().toString(36).substr(2, 6); // 毫秒+随机串
                   var wrapId = 'bilip' + internalId;   // 实例级唯一
                   var container = document.querySelector('.biliplayerW-dom-old#d');
                   container.id = wrapId;
                   var $wrap = $(`#${wrapId}`);
                   $wrap.append(
                       `<style>
           #${wrapId} .b3-player{
               width:;
               height:;
               max-width:100%;
               margin-bottom:10px;
           }
           #${wrapId} .b3-scroll-wrap{
               overflow-x:auto;
               white-space:nowrap;
               -webkit-overflow-scrolling:touch;
           }
           #${wrapId} .b3-pagelist{
               display:inline-flex;
               gap:8px;
               padding:0 2px;
           }
           #${wrapId} .b3-part{
               flex:0 0 auto;
               padding:6px 12px;
               border:1px solid #e5e5e5;
               border-radius:4px;
               cursor:pointer;
               background:#fff;
               color:#222;
               transition:all .2s;
               user-select:none;
           }
           #${wrapId} .b3-part:hover{
               border-color:#999 !important;
           }
           #${wrapId} .b3-part.active{
               background:#00aeec !important;
               color:#fff !important;
               border-color:#00aeec !important;
           }
       </style>`
                   );
                   $wrap.append(

`

`

                   );
                   var $player = $wrap.find('.b3-player');
                   var $listBox = $wrap.find('.b3-pagelist');
                   function loadP(page) {
                       var url = (shebei === 'pc')
                           ? `https://bili-proxy.biligame.com/www/blackboard/newplayer.html?bvid=${Bvid}&p=${page}&autoplay=0`
                           : `https://www.bilibili.com/blackboard/html5mobileplayer.html?bvid=${Bvid}&p=${page}&autoplay`;
                       $player.html(
                           `<iframe name="video-frame" src="${url}"
                    frameborder="no" scrolling="no" allowfullscreen
                    style="width:100%;height:100%"></iframe>`
                       );
                   }
                   /* ---------- 获取分 P ---------- */
                   $.get('https://api.bilibili.com/x/web-interface/view?bvid=' + Bvid)
                       .done(function (res) {
                           if (res.code !== 0 || !res.data || !res.data.pages) {

$player.html('

获取视频信息失败

');

                               return;
                           }
                           /* 渲染按钮 */
                           res.data.pages.forEach(function (p) {

$('

')

                                   .text('P' + p.page + ' · ' + p.part)
                                   .attr('data-p', p.page)
                                   .appendTo($listBox);
                           });
                           /* 默认 P=1 并高亮 */
                           loadP(1);
                           $listBox.find('.b3-part').first().addClass('active');
                       })
                       .fail(function () {

$player.html('

网络异常,无法获取分P信息

');

                       });
                   $listBox.on('click', '.b3-part', function () {
                       var page = $(this).data('p');
                       loadP(page);
                       $listBox.find('.b3-part').removeClass('active');
                       $(this).addClass('active');
                   });
                   break;
               }
               case `4`: {

document.querySelectorAll(".BiliPlayer")[window.biliplayerWc].innerHTML = `

`;

                   var Bvid = ``;
                   var rawP = ``;
                   var internalId = Date.now() + Math.random().toString(36).substr(2, 6); // 毫秒+随机串
                   var wrapId = 'bilip' + internalId;   // 实例级唯一
                   var container = document.querySelector('.biliplayerW-dom-old#d');
                   container.id = wrapId;
                   var $wrap = $(`#${wrapId}`);
                   var pageArr = rawP
                       .replace(/,|、/g, ',')   // 全角逗号 / 顿号 → 英文逗号
                       .split(',')
                       .map(function (s) { return parseInt(s.trim(), 10); })
                       .filter(function (n) { return !isNaN(n) && n > 0; });
                   if (pageArr.length === 0) pageArr = [1];
                   $wrap.append(
                       `<style>
           #${wrapId} .b4-player{
               width:;
               height:;
               max-width:100%;
               margin-bottom:10px;
           }
           #${wrapId} .b4-scroll-wrap{
               overflow-x:auto;
               white-space:nowrap;
               -webkit-overflow-scrolling:touch;
           }
           #${wrapId} .b4-pagelist{
               display:inline-flex;
               gap:8px;
               padding:0 2px;
           }
           #${wrapId} .b4-part{
               flex:0 0 auto;
               padding:6px 12px;
               border:1px solid #e5e5e5;
               border-radius:4px;
               cursor:pointer;
               background:#fff;
               color:#222;
               transition:all .2s;
               user-select:none;
           }
           #${wrapId} .b4-part:hover{
               border-color:#999;
           }
           #${wrapId} .b4-part.active{
               background:#00aeec;
               color:#fff;
               border-color:#00aeec;
           }
       </style>`
                   );
                   $wrap.append(

`

`

                   );
                   var $player = $wrap.find('.b4-player');
                   var $listBox = $wrap.find('.b4-pagelist');
                   function loadP(page) {
                       var url = (shebei === 'pc')
                           ? `https://bili-proxy.biligame.com/www/blackboard/newplayer.html?bvid=${Bvid}&p=${page}&autoplay=0`
                           : `https://www.bilibili.com/blackboard/html5mobileplayer.html?bvid=${Bvid}&p=${page}&autoplay`;
                       $player.html(
                           `<iframe name="video-frame" src="${url}"
                    frameborder="no" scrolling="no" allowfullscreen
                    style="width:100%;height:100%"></iframe>`
                       );
                   }
                   /* ---------- 渲染自定义顺序的分 P 列表 ---------- */
                   $.get('https://api.bilibili.com/x/web-interface/view?bvid=' + Bvid)
                       .done(function (res) {
                           if (res.code !== 0 || !res.data || !res.data.pages) {

$player.html('

获取视频信息失败

');

                               return;
                           }
                           var allPages = res.data.pages;   // [{page:1,part:'标题'}, ...]
                           /* 按 pageArr 顺序抽卡片 */
                           pageArr.forEach(function (pNum) {
                               var pageObj = allPages.find(function (o) { return o.page === pNum; });
                               if (!pageObj) return;        // 防呆:如果该分 P 不存在则跳过

$('

')

                                   .text('P' + pageObj.page + ' · ' + pageObj.part)
                                   .attr('data-p', pageObj.page)
                                   .appendTo($listBox);
                           });
                           /* 默认播放第一个 */
                           var defaultPage = pageArr[0];
                           loadP(defaultPage);
                           $listBox.find('.b4-part[data-p="' + defaultPage + '"]').addClass('active');
                       })
                       .fail(function () {

$player.html('

网络异常,无法获取分P信息

');

                       });
                   $listBox.on('click', '.b4-part', function () {
                       var page = $(this).data('p');
                       loadP(page);
                       $listBox.find('.b4-part').removeClass('active');
                       $(this).addClass('active');
                   });
                   break;
               }
               case `5`: {

document.querySelectorAll(".BiliPlayer")[window.biliplayerWc].innerHTML = `

`;

                   var rawBV = ``;
                   var internalId = Date.now() + Math.random().toString(36).substr(2, 6); // 毫秒+随机串
                   var wrapId = 'bilip' + internalId;   // 实例级唯一
                   var container = document.querySelector('.biliplayerW-dom-old#d');
                   container.id = wrapId;
                   var $wrap = $(`#${wrapId}`);
                   /* 解析 BV 数组(去掉空格、全角逗号、顿号) */
                   var bvArr = rawBV
                       .replace(/,|、/g, ',')
                       .split(',')
                       .map(function (s) { return s.trim(); })
                       .filter(function (v) { return v; });
                   if (bvArr.length === 0) bvArr = ['BV1xx411c7mD']; // 保底
                   $wrap.append(
                       `<style>
           #${wrapId} .b5-player{
               width:;
               height:;
               max-width:100%;
               margin-bottom:10px;
           }
           #${wrapId} .b5-scroll-wrap{
               overflow-x:auto;
               white-space:nowrap;
               -webkit-overflow-scrolling:touch;
           }
           #${wrapId} .b5-pagelist{
               display:inline-flex;
               gap:8px;
               padding:0 2px;
           }
           #${wrapId} .b5-part{
               flex:0 0 auto;
               padding:6px 12px;
               border:1px solid #e5e5e5;
               border-radius:4px;
               cursor:pointer;
               background:#fff;
               color:#222;
               transition:all .2s;
               user-select:none;
           }
           #${wrapId} .b5-part:hover{
               border-color:#999;
           }
           #${wrapId} .b5-part.active{
               background:#00aeec;
               color:#fff;
               border-color:#00aeec;
           }
       </style>`
                   );
                   $wrap.append(

`

`

                   );
                   var $player = $wrap.find('.b5-player');
                   var $listBox = $wrap.find('.b5-pagelist');
                   function loadBV(bvid) {
                       var url = (shebei === 'pc')
                           ? `https://bili-proxy.biligame.com/www/blackboard/newplayer.html?bvid=${bvid}&p=1&autoplay=0`
                           : `https://www.bilibili.com/blackboard/html5mobileplayer.html?bvid=${bvid}&p=1&autoplay`;
                       $player.html(
                           `<iframe name="video-frame" src="${url}"
                    frameborder="no" scrolling="no" allowfullscreen
                    style="width:100%;height:100%"></iframe>`
                       );
                   }
                   /* ---------- 批量获取视频标题 ---------- */
                   Promise.all(
                       bvArr.map(function (bvid) {
                           return $.get('https://api.bilibili.com/x/web-interface/view?bvid=' + bvid)
                               .then(function (res) {
                                   if (res.code === 0 && res.data) {
                                       return { bvid: bvid, title: res.data.title };
                                   } else {
                                       return { bvid: bvid, title: '(获取失败)' };
                                   }
                               })
                               .fail(function () {
                                   return { bvid: bvid, title: '(网络错误)' };
                               });
                       })
                   ).then(function (list) {
                       /* 渲染卡片 */
                       list.forEach(function (item, idx) {

$('

')

                               .text('L' + (idx + 1) + '·' + item.title)
                               .attr('data-bv', item.bvid)
                               .appendTo($listBox);
                       });
                       /* 默认播放第一个 */
                       loadBV(list[0].bvid);
                       $listBox.find('.b5-part').first().addClass('active');
                   });
                   /* ---------- 点击切换 ---------- */
                   $listBox.on('click', '.b5-part', function () {
                       var bvid = $(this).data('bv');
                       loadBV(bvid);
                       $listBox.find('.b5-part').removeClass('active');
                       $(this).addClass('active');
                   });
                   break;
               }
           }
           window.biliplayerWc = window.biliplayerWc + 1;
           function iframevideo1(b, p, i) {
               $.get(`https://api.bilibili.com/x/web-interface/view?bvid=${b}`).then(function (result) {
                   var queryData = result.data.pages.filter(function (_data) {
                       return _data.part == p;
                   });
                   if (shebei == "pc") {

document.querySelector(`.biliplayerW-dom-old#bilip${i}`).innerHTML = `

<iframe name="video-frame" src="https://bili-proxy.biligame.com/www/blackboard/newplayer.html?bvid=${Bvid}&p=${queryData[0].page}&autoplay=0" frameborder="no" scrolling="no" allowfullscreen="" style="width: 100%;height: 100%;"></iframe>

`

                   } else {

document.querySelector(`.biliplayerW-dom-old#bilip${i}`).innerHTML = `

<iframe name="video-frame" src="https://www.bilibili.com/blackboard/html5mobileplayer.html?bvid=${Bvid}&p=${queryData[0].page}&autoplay" frameborder="no" scrolling="no" allowfullscreen="" style="width: 100%;height: 100%;"></iframe>

`

                   }
               });
           }
       })
   }]);

</script>