效果图：怎么愉快的把家人们分享的b站视频链接变成视频观看呢，跟着我的步伐带你在论坛中愉快的刷视频
发一条带有b站视频链接的帖子或者评论
[视频名称（随意即可）](b站视频链接 https/http前缀开头)
下载油猴插件
1，首先你需要给你的浏览器下载一个油猴插件，
以Chrome为例 点击右上角三个点->扩展程序->访问Chrome商店
2，搜索油猴 选中第一个（如图下），添加至拓展程序
3，拓展程序授权
点击管理拓展程序
允许油猴篡改网页和后台运行
添加主包我写的脚本
1，点击篡改猴
2，添加脚本
将脚本代码copy进去，ctrl+s保存
脚本代码如下
// ==UserScript==
// @name Flarum B站视频嵌入
// @namespace http://tampermonkey.net/
// @version 1.0
// @description 在Flarum论坛中将B站视频链接替换为可播放的视频
// @author You
// @match https://flarum.incrafttime.top/d/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 提取B站视频ID的函数
function extractBilibiliVideoId(url) {
const patterns = [
/bilibili\.com\/video\/(BV[a-zA-Z0-9]+)/,
/bilibili\.com\/video\/av(\d+)/,
/b23\.tv\/([a-zA-Z0-9]+)/
];
for (const pattern of patterns) {
const match = url.match(pattern);
if (match) {
return match[1];
}
}
return null;
}
// 创建B站视频嵌入iframe
function createBilibiliEmbed(videoId) {
const iframe = document.createElement('iframe');
// 处理不同类型的视频ID
let embedUrl;
if (videoId.startsWith('BV')) {
embedUrl = `https://player.bilibili.com/player.html?bvid=${videoId}&page=1&high_quality=1&danmaku=0`;
} else if (videoId.startsWith('av') || /^\d+$/.test(videoId)) {
const aid = videoId.replace('av', '');
embedUrl = `https://player.bilibili.com/player.html?aid=${aid}&page=1&high_quality=1&danmaku=0`;
} else {
// 可能是短链接，尝试作为BV号处理
embedUrl = `https://player.bilibili.com/player.html?bvid=${videoId}&page=1&high_quality=1&danmaku=0`;
}
iframe.src = embedUrl;
iframe.width = '100%';
iframe.height = '400';
iframe.frameBorder = '0';
iframe.allowFullscreen = true;
iframe.style.maxWidth = '800px';
iframe.style.border = '1px solid #e1e5e9';
iframe.style.borderRadius = '8px';
iframe.style.marginTop = '10px';
iframe.style.marginBottom = '10px';
return iframe;
}
// 处理帖子内容的函数
function processPosts() {
const postBodies = document.querySelectorAll('div.Post-body');
postBodies.forEach(postBody => {
// 避免重复处理
if (postBody.dataset.bilibiliProcessed) {
return;
}
const paragraphs = postBody.querySelectorAll('p');
paragraphs.forEach(p => {
const links = p.querySelectorAll('a[href*="bilibili.com/video"]');
links.forEach(link => {
const href = link.href;
// 检查是否为B站视频链接
if (href.includes('https://www.bilibili.com/video') || href.includes('bilibili.com/video')) {
const videoId = extractBilibiliVideoId(href);
if (videoId) {
// 创建视频嵌入容器
const videoContainer = document.createElement('div');
videoContainer.style.margin = '15px 0';
// 添加原链接信息
const linkInfo = document.createElement('div');
linkInfo.innerHTML = `<small style="color: #666; margin-bottom: 8px; display: block;">🎬 B站视频: <a href="${href}" target="_blank" style="color: #00a1d6;">${link.textContent || href}</a></small>`;
videoContainer.appendChild(linkInfo);
// 添加视频播放器
const iframe = createBilibiliEmbed(videoId);
videoContainer.appendChild(iframe);
// 替换原链接
link.parentNode.insertBefore(videoContainer, link);
link.remove();
}
}
});
});
// 标记已处理
postBody.dataset.bilibiliProcessed = 'true';
});
}
// 初始处理
function init() {
// 等待页面加载完成
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', processPosts);
} else {
processPosts();
}
// 监听动态内容变化（适用于SPA应用）
const observer = new MutationObserver(function(mutations) {
let shouldProcess = false;
mutations.forEach(function(mutation) {
if (mutation.type === 'childList') {
mutation.addedNodes.forEach(function(node) {
if (node.nodeType === 1) { // Element node
if (node.classList && node.classList.contains('Post-body') ||
node.querySelector && node.querySelector('.Post-body')) {
shouldProcess = true;
}
}
});
}
});
if (shouldProcess) {
setTimeout(processPosts, 100); // 延迟处理，确保DOM完全更新
}
});
// 开始观察
observer.observe(document.body, {
childList: true,
subtree: true
});
}
// 启动脚本
init();
// 添加一些样式优化
const style = document.createElement('style');
style.textContent = `
.bilibili-video-container {
margin: 15px 0;
padding: 10px;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #e1e5e9;
}
.bilibili-video-container iframe {
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
`;
document.head.appendChild(style);
})();
保存后可以看到脚本已启用
然后回到帖子刷新一下即可
看视频咯
如果成功下面这个内容应该是视频，而不是评论
ICT b站视频