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>

沪公网安备 31011002002714 号