全站通知:
Widget:123
刷
历
编
跳到导航
跳到搜索
<!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> body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; padding: 15px; line-height: 1.6; } button { background: #00a1d6; color: white; border: none; padding: 12px 0; border-radius: 8px; font-size: 16px; width: 100%; margin: 10px 0; } button:disabled { background: #cccccc; } #output { margin-top: 15px; padding: 12px; border: 1px solid #eee; border-radius: 8px; background: #f9f9f9; white-space: pre-wrap; overflow-x: auto; font-family: monospace; font-size: 14px; } .status { margin: 12px 0; padding: 10px; border-radius: 8px; font-size: 14px; } .loading { background: #fff8e1; } .success { background: #e8f5e9; } .error { background: #ffebee; } </style>
</head> <body>
B站视频采集(手机版)
<button id="start-btn">开始采集</button>
<script> // 存储采集到的数据 let videoData = []; // DOM元素 const startBtn = document.getElementById('start-btn'); const statusDiv = document.getElementById('status'); const outputDiv = document.getElementById('output'); // 事件监听 startBtn.addEventListener('click', startCollection); // 开始采集 async function startCollection() { startBtn.disabled = true; statusDiv.textContent = '正在采集数据...'; statusDiv.className = 'status loading'; outputDiv.textContent = ; videoData = []; try { // 使用CORS代理解决跨域问题 const proxyUrl = 'https://cors-anywhere.herokuapp.com/'; const baseApiUrl = 'https://api.bilibili.com/x/web-interface/wbi/search/type'; // 分页采集 for (let page = 1; page <= 3; page++) { statusDiv.textContent = `正在采集第 ${page} 页...`; // 构建请求参数 const params = new URLSearchParams({ search_type: 'video', keyword: '鸣潮', page: page, order: 'pubdate', duration: 4, start_date: '2025-07-01', end_date: '2025-07-31' }); // 发送请求 const response = await fetch(`${proxyUrl}${baseApiUrl}?${params}`, { headers: { 'User-Agent': 'Mozilla/5.0', 'Referer': 'https://www.bilibili.com/' } }); if (!response.ok) { throw new Error(`HTTP错误! 状态码: ${response.status}`); } const data = await response.json(); if (data.code !== 0) { throw new Error(data.message); } // 处理视频数据 const videos = data.data.result || []; if (videos.length === 0) break; // 获取UP主粉丝数 const videosWithFans = await Promise.all( videos.map(async video => { const fans = await fetchUpFans(video.mid); return { title: video.title, author: video.author, fans: fans, play: video.play, url: `https://www.bilibili.com/video/${video.bvid}`, pubdate: formatDate(video.pubdate) }; }) ); videoData.push(...videosWithFans); updateOutput(videosWithFans); // 延迟避免频率限制 await sleep(2000); } statusDiv.textContent = `采集完成,共获取到 ${videoData.length} 条数据`; statusDiv.className = 'status success'; // 生成JSON输出 outputDiv.textContent = JSON.stringify(videoData, null, 2); } catch (error) { statusDiv.textContent = `采集失败: ${error.message}`; statusDiv.className = 'status error'; console.error('采集错误:', error); } finally { startBtn.disabled = false; } } // 获取UP主粉丝数 async function fetchUpFans(mid) { try { const proxyUrl = 'https://cors-anywhere.herokuapp.com/'; const apiUrl = `https://api.bilibili.com/x/relation/stat?vmid=${mid}`; const response = await fetch(`${proxyUrl}${apiUrl}`, { headers: { 'User-Agent': 'Mozilla/5.0', 'Referer': `https://space.bilibili.com/${mid}/` } }); const data = await response.json(); return data.data.follower || 0; } catch (error) { console.error('获取粉丝数失败:', error); return 0; } } // 更新输出内容 function updateOutput(newData) { newData.forEach(video => { outputDiv.textContent += `标题: ${video.title}\n`; outputDiv.textContent += `UP主: ${video.author} (粉丝: ${video.fans.toLocaleString()})\n`; outputDiv.textContent += `播放量: ${video.play.toLocaleString()}\n`; outputDiv.textContent += `发布时间: ${video.pubdate}\n`; outputDiv.textContent += `链接: ${video.url}\n\n`; }); } // 辅助函数 function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } function formatDate(timestamp) { const date = new Date(timestamp * 1000); return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())}`; } function padZero(num) { return num < 10 ? `0${num}` : num; } </script>
</body> </html>