Spaces:

anyalerob
/

jx

Running

App Files Files Community

anyalerob commited on May 17, 2025

Commit

79ec663

verified ·

1 Parent(s): 95a74bd

Upload 3 files

Browse files

Files changed (3) hide show

index (4).html +183 -0
script.js +14 -142
style.css +1 -40

index (4).html ADDED Viewed

	@@ -0,0 +1,183 @@

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>短视频无水印解析</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&family=Kiwi+Maru:wght@300;400&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
+</head>
+<body>
+    <div id="top-buttons">
+        <button id="theme-btn" class="top-btn"><i class="fas fa-moon"></i></button>
+        <button id="color-btn" class="top-btn"><i class="fas fa-palette"></i></button>
+        <button id="feedback-btn" class="top-btn"><i class="fas fa-comment"></i></button>
+    </div>
+    <div id="main-container">
+        <header id="header">
+            <h1><i class="fas fa-play-circle"></i> 短视频无水印解析</h1>
+            <div id="currentTime"></div>
+            <div id="weatherWidget"></div>
+            <div id="random-quote"></div>
+        </header>
+        <div id="platform-nav">
+            <div class="platform-btn" data-platform="抖音">
+                <img src="https://img.zlee.de/file/logo图片/1747377427291_dy.png" alt="抖音">
+                <span>抖音</span>
+            </div>
+            <div class="platform-btn" data-platform="快手">
+                <img src="https://img.zlee.de/file/logo图片/1747377484677_OIP-C.png" alt="快手">
+                <span>快手</span>
+            </div>
+            <div class="platform-btn" data-platform="火山视频">
+                <img src="https://img.zlee.de/file/logo图片/1747377480732_hssp.png" alt="火山视频">
+                <span>火山视频</span>
+            </div>
+            <div class="platform-btn" data-platform="西瓜视频">
+                <img src="https://img.zlee.de/file/logo图片/1747377479737_xgsp-black.png" alt="西瓜视频">
+                <span>西瓜视频</span>
+            </div>
+            <div class="platform-btn" data-platform="皮皮虾">
+                <img src="https://img.zlee.de/file/logo图片/1747377485180_ppx.png" alt="皮皮虾">
+                <span>皮皮虾</span>
+            </div>
+            <div class="platform-btn" data-platform="秒拍">
+                <img src="https://img.zlee.de/file/logo图片/1747377885467_mp (1).png" alt="秒拍">
+                <span>秒拍</span>
+            </div>
+            <div class="platform-btn" data-platform="头条视频">
+                <img src="https://img.zlee.de/file/logo图片/1747377883945_ttsp.png" alt="头条视频">
+                <span>头条视频</span>
+            </div>
+            <div class="platform-btn" data-platform="腾讯微视">
+                <img src="https://img.zlee.de/file/logo图片/1747377891436_腾讯微视.png" alt="腾讯微视">
+                <span>腾讯微视</span>
+            </div>
+            <div class="platform-btn" data-platform="美图秀秀">
+                <img src="https://img.zlee.de/file/logo图片/1747377886033_mtxx.png" alt="美图秀秀">
+                <span>美图秀秀</span>
+            </div>
+            <div class="platform-btn" data-platform="美拍">
+                <img src="https://img.zlee.de/file/logo图片/1747377887635_mp.png" alt="美拍">
+                <span>美拍</span>
+            </div>
+            <div class="platform-btn" data-platform="微博">
+                <img src="https://img.zlee.de/file/logo图片/1747377888691_wb.png" alt="微博">
+                <span>微博</span>
+            </div>
+            <div class="platform-btn" data-platform="小红书">
+                <img src="https://img.zlee.de/file/logo图片/1747377889452_xhs.png" alt="小红书">
+                <span>小红书</span>
+            </div>
+            <div class="platform-btn" data-platform="网易云">
+                <img src="https://img.zlee.de/file/logo图片/1747377894287_wyy.png" alt="网易云">
+                <span>网易云</span>
+            </div>
+        </div>
+        <div id="parser-container">
+            <div id="input-container">
+                <input type="text" id="urlInput" placeholder="请输入或粘贴视频链接...">
+                <button id="clipboard-btn" title="从剪贴板粘贴"><i class="fas fa-paste"></i></button>
+            </div>
+            <button id="parse-btn" class="btn parse-btn">解析</button>
+            <div id="debugInfo"></div>
+        </div>
+        <div id="contentBox"></div>
+        <div id="share-container" style="display: none;">
+            <button class="share-btn" onclick="copyLink()">复制链接</button>
+            <button class="share-btn" onclick="shareToWeChat()">分享到微信</button>
+            <button class="share-btn" onclick="shareToQQ()">分享到QQ</button>
+        </div>
+        <div id="tutorial-section">
+            <h2 class="section-title"><i class="fas fa-info-circle"></i> 使用教程</h2>
+            <div class="tutorial-item">
+                <div class="tutorial-step">步骤 1</div>
+                <p>打开目标短视频平台，复制分享链接。</p>
+            </div>
+            <div class="tutorial-item">
+                <div class="tutorial-step">步骤 2</div>
+                <p>粘贴链接到上方输入框，点击“解析”按钮。</p>
+            </div>
+            <div class="tutorial-item">
+                <div class="tutorial-step">步骤 3</div>
+                <p>等待解析完成，点击“保存视频”或“打包下载”。</p>
+            </div>
+        </div>
+        <div id="history-section">
+            <h2 class="section-title"><i class="fas fa-history"></i> 解析历史</h2>
+            <ul id="history-list"></ul>
+        </div>
+        <div id="faq-section">
+            <div class="section-title"><i class="fas fa-question-circle"></i> 常见问题</div>
+            <div class="faq-item">
+                <div class="faq-question"><i class="fas fa-question-circle"></i> Android手机上可以用吗？</div>
+                <div class="faq-answer">可以的，Android手机在常用的Chrome、UC、360、QQ等浏览器上都可以很方便的使用本站。</div>
+            </div>
+            <div class="faq-item">
+                <div class="faq-question"><i class="fas fa-question-circle"></i> iOS设备（iPhone、iPad、iPod）上点击下载视频按钮后，跳转到视频页面，并没有直接下载，怎么办？</div>
+                <div class="faq-answer">因Safari及微信内置浏览器均不支持下载文件，所以保存视频需要借助其他浏览器来完成，建议iOS用户在App Store下载免费的火狐浏览器，支持将下载的视频保存到手机相册。参考: <a href="https://example.com/firefox-tutorial" target="_blank">iPhone上利用《Firefox火狐浏览器》下载视频到手机相册的教程</a>。</div>
+            </div>
+            <div class="faq-item">
+                <div class="faq-question"><i class="fas fa-question-circle"></i> 我在电脑上用的是IE浏览器，点下载视频按钮后，出现跟上面那用iPad的哥们一样的情况，跳转到视频页面，如何下载到本地呢？</div>
+                <div class="faq-answer">电脑上少数浏览器不支持直接下载，但可以在下载视频按钮上点击右键，然后选择'目标另存为'或'链接存储为'来下载视频；或者到跳转后的视频页面，在视频画面上点击右键，然后选择'视频另存为'来下载视频。当然，我们更推荐在电脑上使用如谷歌Chrome浏览器、360浏览器极速模式、QQ浏览器极速模式等现代浏览器来获得最佳上网体验。</div>
+            </div>
+            <div class="faq-item">
+                <div class="faq-question"><i class="fas fa-question-circle"></i> 为什么解析成功了，还是有水印？</div>
+                <div class="faq-answer">本站可以解析99%以上的视频。但如果视频作者上传的视频本身就有水印，这种水印暂时无法去除。如何判断原视频是否有水印？请查看该视频在相应的APP里播放时是否有水印。</div>
+            </div>
+            <div class="faq-item">
+                <div class="faq-question"><i class="fas fa-question-circle"></i> 为什么会解析失败？</div>
+                <div class="faq-answer">视频被删除、被设置成私密、或在审核中都有可能导致解析失败。请确保您复制的是完整的分享链接，包含http或https前缀。您也可以通过“切换接口”按钮，重新尝试。如果仍然失败，可能是该平台暂不支持或接口临时故障，您可以反馈给我们。</div>
+            </div>
+        </div>
+        <footer>
+            <p>© 2024-2025 短视频解析 | <a href="javascript:void(0)" id="footer-feedback">意见反馈</a> | 在线访客: <span id="online-users">0</span></p>
+            <div class="copyright">
+                <p>该功能仅供个人娱乐学习，严禁商业用途。Ctrl + D (或 Command + D) 收藏我们，方便下次使用。</p>
+                <p>视频归相关网站及作者所有，本站不存储任何视频及图片。本站不对使用者的行为负担任何法律责任。</p>
+                <p>copyright@聚合短视频去水印</p>
+            </div>
+        </footer>
+    </div>
+    <div id="loading">
+        <div id="loading-spinner"></div>
+        <div>解析中，请稍候...</div>
+        <div id="progress-container">
+            <div id="progress-bar"></div>
+        </div>
+        <div id="progress-info"></div>
+    </div>
+    <div id="feedback-modal">
+        <div id="feedback-content">
+            <button id="close-modal">×</button>
+            <h2>反馈</h2>
+            <form id="feedback-form">
+                <textarea id="feedback-text" placeholder="请输入您的反馈..."></textarea>
+                <button type="submit" class="btn">提交</button>
+                <button type="button" id="cancel-feedback" class="btn">取消</button>
+            </form>
+        </div>
+    </div>
+    <div id="image-modal">
+        <img id="modal-image" alt="全尺寸图片">
+        <button id="close-modal">×</button>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

script.js CHANGED Viewed

@@ -119,10 +119,22 @@ async function updateBackgroundImage() {
     } catch (error) {
         console.error('获取背景图片失败:', error);
         showDebugInfo('背景图片加载失败，将使用默认背景');
-        document.body.style.backgroundImage = `url('https://img.zlee.de/file/1747479255036_【哲风壁纸】优香-少女-蔚蓝档案.png')`;
     }
 }
 // URL提取
 function extractURL(text) {
@@ -228,7 +240,7 @@ async function parseContent(urlToParse) {
         toggleLoading(true);
         showDebugInfo(`正在解析中: ${url}`);
-        const apiUrl = `https://api.kxzjoker.cn/api/jiexi_video_2?url=${encodeURIComponent(url)}`;
         const response = await fetch(apiUrl);
         showDebugInfo(`收到响应状态: ${response.status}`);
@@ -644,146 +656,6 @@ document.addEventListener('DOMContentLoaded', function() {
         console.warn('JSZip 未加载！打包下载功能不可用');
         showDebugInfo('警告：打包下载需要 JSZip 库支持');
     }
-  unction extractDouyinVariant(text) {
-  const re = /(https?:\/\/v\.douyin\.com\/[^\s]+)(?:\s+\d{2}\/\d{2})?/i;
-  const m = text.match(re);
-  if (!m) return null;
-  return {
-    displayUrl: m[0],  // 完整变体，用于 UI 展示
-    cleanUrl:   m[1]   // 纯短链，用于调用接口
-  };
-}
-// —— 2. 修复粘贴按钮 ——
-document.getElementById('clipboard-btn').addEventListener('click', async () => {
-  const videoUrlInput = document.getElementById('urlInput');
-  try {
-    const text = await navigator.clipboard.readText();
-    if (!text) throw new Error('剪贴板为空');
-    videoUrlInput.value = text;
-    const variant = extractDouyinVariant(text);
-    if (variant) {
-      showDebugInfo(`已提取：${variant.displayUrl}`);
-      parseContent(variant.cleanUrl);
-    } else {
-      showAlert('未检测到有效的短链，请检查复制的内容');
-    }
-  } catch (err) {
-    console.warn('读取剪贴板失败', err);
-    showAlert('无法访问剪贴板，请手动粘贴链接');
-    videoUrlInput.focus();
-  }
-});
-// —— 3. “解析”按钮 & 回车 同样使用新提取 ——
-document.getElementById('parse-btn').addEventListener('click', () => {
-  const raw = document.getElementById('urlInput').value.trim();
-  const variant = extractDouyinVariant(raw);
-  if (variant) {
-    showDebugInfo(`调用接口：${variant.cleanUrl}`);
-    parseContent(variant.cleanUrl);
-  } else {
-    showAlert('请输入或粘贴有效的抖音短链');
-  }
-});
-document.getElementById('urlInput').addEventListener('keypress', e => {
-  if (e.key === 'Enter') {
-    const raw = e.target.value.trim();
-    const variant = extractDouyinVariant(raw);
-    if (variant) parseContent(variant.cleanUrl);
-    else showAlert('请输入或粘贴有效的抖音短链');
-  }
-});
-// —— 4. 修改 parseContent 接口调用，直接用 cleanUrl ——
-async function parseContent(cleanUrl) {
-  if (isParsing) return;
-  isParsing = true;
-  toggleLoading(true);
-  try {
-    showDebugInfo(`开始解析：${cleanUrl}`);
-    const apiUrl = `https://api.kxzjoker.cn/api/jiexi_video?url=${encodeURIComponent(cleanUrl)}`;
-    const resp = await fetch(apiUrl);
-    const data = await resp.json();
-    if (!data.success) throw new Error(data.message || '解析失败');
-    renderContent(data.data);
-    saveToHistory({ url: cleanUrl, title: data.data.video_title, cover: data.data.image_url });
-    document.getElementById('share-container').style.display = 'flex';
-  } catch (err) {
-    showDebugInfo(`错误：${err.message}`);
-    showAlert(`❌ 解析失败：${err.message}`);
-  } finally {
-    toggleLoading(false);
-    isParsing = false;
-  }
-}
-// —— 5. 图集预览：闭包变量 & 批量绑定 ——
-let galleryImages = [];
-let currentIndex = 0;
-function updateModalImage() {
-  document.getElementById('modal-image').src = galleryImages[currentIndex];
-}
-document.getElementById('image-close').addEventListener('click', () => {
-  document.getElementById('image-modal').style.display = 'none';
-});
-document.getElementById('image-prev').addEventListener('click', () => {
-  if (currentIndex > 0) {
-    currentIndex--;
-    updateModalImage();
-  }
-});
-document.getElementById('image-next').addEventListener('click', () => {
-  if (currentIndex < galleryImages.length - 1) {
-    currentIndex++;
-    updateModalImage();
-  }
-});
-// —— 6. renderContent 中图集渲染改造示例 ——
-function renderContent(data) {
-  const contentBox = document.getElementById('contentBox');
-  contentBox.innerHTML = '';
-  if (data.images) {
-    // 把 images 赋给闭包
-    galleryImages = data.images;
-    // 生成只带 data-index 的缩略图
-    const galleryHTML = data.images.map((img, idx) => `
-      <div class="gallery-item" data-index="${idx}">
-        < img src="${img}" alt="图集 ${idx + 1}"
-             loading="lazy"
-             style="width:100%;aspect-ratio:1/1;object-fit:cover;cursor:pointer;">
-        <div class="image-index">${idx+1}</div>
-      </div>
-    `).join('');
-    contentBox.innerHTML = `
-      <div class="media-card">
-        <h2 style="color: var(--primary-color);"><i class="fas fa-images"></i>${data.title||'未命名图集'}</h2>
-        <div id="gallery-grid" style="display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));">
-          ${galleryHTML}
-        </div>
-        <div style="text-align:center;margin-top:15px;">
-          <i class="fas fa-file-archive"></i> 打包下载
-        </div>
-      </div>
-    `;
-    contentBox.style.display = 'block';
-    contentBox.scrollIntoView({ behavior: 'smooth' });
-    // 批量绑定点击事件
-    document.querySelectorAll('#gallery-grid .gallery-item').forEach(el => {
-      el.addEventListener('click', () => {
-        currentIndex = parseInt(el.getAttribute('data-index'), 10);
-        updateModalImage();
-        document.getElementById('image-modal').style.display = 'flex';
-      });
-    });
     setInterval(updateTime, 1000);
     updateTime();

     } catch (error) {
         console.error('获取背景图片失败:', error);
         showDebugInfo('背景图片加载失败，将使用默认背景');
+        document.body.style.backgroundImage = `url('https://via.placeholder.com/1920x1080?text=Default+Background')`;
     }
 }
+// 获取在线访客人数（假设 API）
+async function updateOnlineUsers() {
+    try {
+        const response = await fetch('https://api.example.com/online-users');
+        const data = await response.json();
+        const onlineUsers = data.count || 0;
+        document.getElementById('online-users').textContent = onlineUsers;
+    } catch (error) {
+        console.error('获取在线人数失败:', error);
+        document.getElementById('online-users').textContent = '未知';
+    }
+}
 // URL提取
 function extractURL(text) {
         toggleLoading(true);
         showDebugInfo(`正在解析中: ${url}`);
+        const apiUrl = `https://api.kxzjoker.cn/api/jiexi_video?url=${encodeURIComponent(url)}`;
         const response = await fetch(apiUrl);
         showDebugInfo(`收到响应状态: ${response.status}`);
         console.warn('JSZip 未加载！打包下载功能不可用');
         showDebugInfo('警告：打包下载需要 JSZip 库支持');
     }
     setInterval(updateTime, 1000);
     updateTime();

style.css CHANGED Viewed

@@ -575,43 +575,4 @@ footer a:hover {
     position: fixed;
     pointer-events: none;
     z-index: 5;
-}
-/* —— 图集预览模态框 —— */
-#image-modal {
-    display: none;
-    position: fixed;
-    top: 0; left: 0;
-    width: 100%; height: 100%;
-    background: rgba(0,0,0,0.8);
-    z-index: 2000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-#image-modal img {
-    max-width: 90%;
-    max-height: 90%;
-    border-radius: 8px;
-}
-.modal-close {
-    position: absolute;
-    top: 1rem; right: 1rem;
-    background: none; border: none;
-    font-size: 2rem;
-    color: var(--primary-color);
-    cursor: pointer;
-}
-.modal-nav {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    background: rgba(0,0,0,0.3);
-    border: none;
-    font-size: 3rem;
-    color: white;
-    width: 2rem; height: 3rem;
-    cursor: pointer;
-    border-radius: 0.3rem;
-}
-#image-prev { left: 1rem; }
-#image-next { right: 1rem; }

     position: fixed;
     pointer-events: none;
     z-index: 5;
+}