🎬 HLS 播放器调试工具
视频源 URL：
选择加载方式：
方案1：调试模式（查看详细日志）
方案2：自动修复相对路径
方案3：直接加载第二层 URL
方案4：使用旧版本 HLS.js (1.4.12)
▶️ 加载视频
⏹️ 停止播放
🔍 测试 Manifest
清空日志
等待加载视频...
', 'warning'); log('然后重新加载页面', 'warning'); // 仍然尝试加载 loadWithDebug(url); } // 通用事件监听 function addCommonEventListeners() { hls.on(Hls. Events.ERROR, (event, data) => { log(`❌ 错误: ${data.details}`, 'error'); if (data.url) log(` URL: ${data.url}`, 'error'); }); hls. on(Hls.Events. MANIFEST_PARSED, () => { log(`✅ 视频加载成功，可以播放`, 'success'); }); } // 加载视频主函数 function loadVideo() { destroyPlayer(); clearLog(); const url = document.getElementById('videoUrl').value.trim(); const method = document.querySelector('input[name="method"]: checked').value; if (! url) { log('❌ 请输入视频 URL', 'error'); return; } log(`开始加载视频: ${url}`, 'info'); log(`选择的方案: ${method}`, 'info'); log('----------------------------------------', 'info'); if (! Hls.isSupported()) { log('❌ 浏览器不支持 HLS. js', 'error'); if (video.canPlayType('application/vnd.apple.mpegurl')) { log('尝试使用原生播放... ', 'warning'); video.src = url; } return; } switch(method) { case 'debug': loadWithDebug(url); break; case 'fix-path': loadWithPathFix(url); break; case 'direct': loadDirect(); break; case 'old-version': loadWithOldVersion(url); break; } } // 测试 Manifest async function testManifest() { clearLog(); const url = document.getElementById('videoUrl').value.trim(); log(`🔍 开始测试 Manifest 文件...`, 'info'); log(`URL: ${url}`, 'info'); log('----------------------------------------', 'info'); try { // 测试第一层 log(`📥 获取第一层 Manifest...`, 'info'); const res1 = await fetch(url); const text1 = await res1.text(); log(`✅ 第一层 Manifest 获取成功`, 'success'); log(`内容:\n${text1}`, 'info'); log('----------------------------------------', 'info'); // 提取第二层 URL const match = text1.match(/https?:\/\/[^\s]+\.m3u8/); if (match) { const url2 = match[0]; log(`📥 获取第二层 Manifest: ${url2}`, 'info'); const res2 = await fetch(url2); const text2 = await res2.text(); log(`✅ 第二层 Manifest 获取成功`, 'success'); log(`内容:\n${text2}`, 'info'); log('----------------------------------------', 'info'); // 分析相对路径 const relativePath = text2.match(/\n(\/[^\s#]+\. m3u8)/); if (relativePath) { const path = relativePath[1]; const origin = new URL(url2).origin; const fullUrl = origin + path; log(`🔧 发现相对路径: ${path}`, 'warning'); log(`🔧 应该解析为: ${fullUrl}`, 'warning'); log('----------------------------------------', 'info'); // 测试第三层 log(`📥 测试第三层 Manifest: ${fullUrl}`, 'info'); const res3 = await fetch(fullUrl); if (res3.ok) { const text3 = await res3.text(); log(`✅ 第三层 Manifest 获取成功！`, 'success'); log(`内容:\n${text3}`, 'info'); log('✅ 所有 Manifest 文件都可以访问！', 'success'); } else { log(`❌ 第三层 Manifest 获取失败: ${res3.status}`, 'error'); } } } } catch (error) { log(`❌ 测试失败: ${error.message}`, 'error'); console.error(error); } } // 页面加载完成提示 window.onload = function() { log('🎉 HLS 调试工具已就绪', 'success'); log(`HLS.js 版本: ${Hls.version}`, 'info'); log('请选择一个方案并点击"加载视频"按钮', 'info'); };