Widget:Biliplayer
<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 =
'
';
}); 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('
');
}); $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('
');
});
$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 = `
`
} else {
document.querySelector(`.biliplayerW-dom-old#bilip${i}`).innerHTML = `
`
} }); }
}) }]);
</script>