分享一个把b站视频链接解析iframe链接的代码，主要用于方便把b站视频通过iframe的方式嵌套到网页内。
使用方法：从b站内复制分享内容，比如：
【【我给朋友买了块墓地】结果他变成了一朵花！-哔哩哔哩】 https://b23.tv/RQXbz3Y
复制上面的url，先到浏览器里访问一下，拿到最终要解析的URL，保存下面的代码为index.html并上传到服务器上，访问这个网页，在网页输入框上输入上面拿到的URL解析即可：
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>B站视频iframe解析</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
.input-group {
margin-bottom: 20px;
}
.input-group input,
.input-group button {
width: 100%;
box-sizing: border-box;
}
.input-group input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
}
.input-group button {
padding: 12px 20px;
background-color: #00a1d6;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.input-group button:hover {
background-color: #0089c1;
}
.result-card {
background-color: #f9f9f9;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
}
.code-container {
position: relative;
margin: 10px 0;
}
.code-block {
background-color: #2d2d2d;
color: #fff;
padding: 10px;
border-radius: 5px;
overflow-x: auto;
margin: 0;
}
.copy-btn {
position: absolute;
right: 3px;
top: 3px;
padding: 5px 15px;
background-color: #00a1d6;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
z-index: 10;
transition: background-color 0.3s;
}
.copy-btn:hover {
background-color: #0089c1;
}
</style>
</head>
<body>
<div class="container">
<h1>B站iframe解析</h1>
<div class="input-group">
<input type="text" id="bilibili-link" placeholder="请输入B站视频链接，https://www(m).bilibili.com/video/BV1M84y1M7ro…">
<button onclick="parseBilibiliLink()">解析</button>
</div>
<div id="result" class="result-card" style="display: none;">
<p>解析成功！iframe链接如下：</p>
<div class="code-container">
<pre class="code-block"><code id="mobile-player-link"></code></pre>
</div>
<div class="code-container">
<pre class="code-block"><code id="web-player-link"></code></pre>
</div>
<p>iframe调用代码示例如下：</p>
<div class="code-container">
<pre class="code-block"><code id="mobile-code-block"></code></pre>
</div>
<div class="code-container">
<pre class="code-block"><code id="web-code-block"></code></pre>
</div>
</div>
</div>
<script src="https://cdnjs.webstatic.cn/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
<script>
function parseBilibiliLink() {
document.querySelectorAll('.copy-btn').forEach(btn => btn.remove());
const linkInput = document.getElementById('bilibili-link');
const resultCard = document.getElementById('result');
const mobilePlayerLink = document.getElementById('mobile-player-link');
const webPlayerLink = document.getElementById('web-player-link');
const mobileCodeBlock = document.getElementById('mobile-code-block');
const webCodeBlock = document.getElementById('web-code-block');
const link = linkInput.value.trim();
if (!link.startsWith('https://m.bilibili.com/video/') && !link.startsWith('https://www.bilibili.com/video/')) {
alert('请输入B站视频链接，b站短链接请访问后复制解析：'+link);
linkInput.value = "";
return;
}
const bvidMatch = link.match(/\/video\/(BV\w+)/);
if (bvidMatch) {
const bvid = bvidMatch[1];
const mobilePlayerUrl = `https://www.bilibili.com/blackboard/html5mobileplayer.html?bvid=${bvid}&page=1&danmaku=0&high_quality=1`;
const webPlayerUrl = `https://player.bilibili.com/player.html?bvid=${bvid}&page=1&danmaku=0&high_quality=1`;
mobilePlayerLink.textContent = mobilePlayerUrl;
webPlayerLink.textContent = webPlayerUrl;
mobileCodeBlock.textContent = `<iframe src="${mobilePlayerUrl}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>`;
webCodeBlock.textContent = `<iframe src="${webPlayerUrl}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>`;
resultCard.style.display = 'block';
addCopyButtons();
} else {
alert('无法解析该B站视频链接');
}
}
function addCopyButtons() {
document.querySelectorAll('.code-container').forEach(container => {
const codeEl = container.querySelector('code');
if (!codeEl) return;
const button = document.createElement('button');
button.className = 'copy-btn';
button.setAttribute('data-clipboard-target', '#' + codeEl.id);
button.textContent = '复制';
container.appendChild(button);
});
const clipboard = new ClipboardJS('.copy-btn');
clipboard.on('success', function(e) {
e.trigger.textContent = '复制成功!';
setTimeout(() => {
e.trigger.textContent = '复制';
}, 2000);
e.clearSelection();
});
clipboard.on('error', function(e) {
e.trigger.textContent = '复制失败';
setTimeout(() => {
e.trigger.textContent = '复制';
}, 2000);
});
}
</script>
</body>
</html>
