情字最大 - 浅影阿（Hi-Res无损音质）
<!DOCTYPE html><html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>B站多视频播放器</title>
<style>
/* 全局样式重置与基础设定 */
.bili-player-container {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
max-width: 800px;
margin: 20px auto;
background-color: #f4f5f7;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
border: 1px solid #e3e5e7;
}
/* 视频显示区域 */
.video-stage {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 比例 */
background-color: #000;
height: 0;
}
.video-stage iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
/* 播放列表区域 */
.playlist-area {
padding: 15px;
background-color: #fff;
}
.playlist-header {
font-size: 16px;
font-weight: bold;
color: #333;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
.playlist-count {
font-size: 12px;
color: #999;
font-weight: normal;
}
/* 列表容器 */
.video-list {
list-style: none;
padding: 0;
margin: 0;
max-height: 300px;
overflow-y: auto;
}
/* 滚动条样式优化 */
.video-list::-webkit-scrollbar {
width: 6px;
}
.video-list::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 3px;
}
/* 单个视频项 */
.video-item {
display: flex;
align-items: center;
padding: 10px;
cursor: pointer;
transition: background-color 0.2s ease;
border-radius: 4px;
margin-bottom: 5px;
}
.video-item:hover {
background-color: #f0f2f5;
}
.video-item.active {
background-color: #e7f0ff;
border-left: 4px solid #00a1d6;
}
.video-item.active .video-title {
color: #00a1d6;
font-weight: 600;
}
/* 序号 */
.item-index {
width: 24px;
height: 24px;
background-color: #999;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
margin-right: 10px;
flex-shrink: 0;
}
.video-item.active .item-index {
background-color: #00a1d6;
}
/* 标题 */
.video-title {
font-size: 14px;
color: #333;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-grow: 1;
}
/* 提示信息 */
.tips {
font-size: 12px;
color: #999;
margin-top: 10px;
text-align: right;
}
</style>
</head>
<body>
<div class="bili-player-container">
<!-- 视频播放舞台 -->
<div class="video-stage">
<iframe id="mainPlayer" src="" allowfullscreen="true" allow="autoplay; encrypted-media"></iframe>
</div>
<!-- 播放列表 -->
<div class="playlist-area">
<div class="playlist-header">
<span>精选视频列表</span>
<span class="playlist-count" id="videoCount">共 0 个视频</span>
</div>
<ul class="video-list" id="videoList">
<!-- 列表项将通过 JS 动态生成 -->
</ul>
<div class="tips">点击列表即可切换视频</div>
</div>
</div>
<script>
(function() {
// ================= 配置区域 =================
// 请在此处修改您的 B站视频 BV 号或 AV 号以及标题
// bvid: B站视频的 BV 号 (推荐)
// title: 显示在列表中的标题
const videoData = [
{
bvid: "BV1R84y1K7on",
title: "情字最大 - 浅影阿"
},
{
bvid: "BV11ARqB7EHV",
title: "情字最大舞蹈舞台表演 - 晓丹小仙女儿"
},
{
bvid: "BV1bq4Z67EqF",
title: "情字最大舞蹈MV - 晓丹小仙女儿"
},
];
// ===========================================
const playerIframe = document.getElementById('mainPlayer');
const listContainer = document.getElementById('videoList');
const countLabel = document.getElementById('videoCount');
let currentIndex = 0;
// 初始化播放器
function initPlayer() {
if (!videoData || videoData.length === 0) {
listContainer.innerHTML = '<li style="padding:10px;color:#999;text-align:center;">暂无视频数据</li>';
return;
}
countLabel.textContent = `共 ${videoData.length} 个视频`;
renderList();
loadVideo(0);
}
// 渲染列表
function renderList() {
listContainer.innerHTML = '';
videoData.forEach((video, index) => {
const li = document.createElement('li');
li.className = 'video-item';
li.dataset.index = index;
// 构建 HTML 结构
li.innerHTML = `
<div class="item-index">${index + 1}</div>
<div class="video-title" title="${video.title}">${video.title}</div>
`;
// 点击事件
li.addEventListener('click', function() {
loadVideo(index);
});
listContainer.appendChild(li);
});
}
// 加载指定索引的视频
function loadVideo(index) {
if (index < 0 || index >= videoData.length) return;
currentIndex = index;
const video = videoData;
// 更新 iframe 源地址
// 使用 B站嵌入式播放器地址
playerIframe.src = `//player.bilibili.com/player.html?bvid=${video.bvid}&page=1&high_quality=1&danmaku=0`;
// 更新列表激活状态
const items = listContainer.querySelectorAll('.video-item');
items.forEach((item, i) => {
if (i === index) {
item.classList.add('active');
// 确保激活项在可视区域
item.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
} else {
item.classList.remove('active');
}
});
}
// 启动
initPlayer();
})();
</script>
</body>
</html>
页:
[1]