| <!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 href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&family=Kiwi+Maru:wght@300;400;500&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| :root { |
| --primary-color: #7c4dff; |
| --primary-light: rgba(124, 77, 255, 0.2); |
| --primary-dark: #5e35b1; |
| --text-color: #333; |
| --bg-color: rgba(255, 255, 255, 0.7); |
| --card-bg: rgba(255, 255, 255, 0.8); |
| --shadow-color: rgba(0, 0, 0, 0.1); |
| --border-color: rgba(0, 0, 0, 0.1); |
| --loading-bg: rgba(255, 255, 255, 0.85); |
| } |
| |
| [data-theme="dark"] { |
| --primary-color: #9575cd; |
| --primary-light: rgba(149, 117, 205, 0.2); |
| --primary-dark: #7e57c2; |
| --text-color: #f5f5f5; |
| --bg-color: rgba(35, 35, 45, 0.7); |
| --card-bg: rgba(45, 45, 55, 0.8); |
| --shadow-color: rgba(0, 0, 0, 0.3); |
| --border-color: rgba(255, 255, 255, 0.1); |
| --loading-bg: rgba(35, 35, 45, 0.85); |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Nunito', sans-serif; |
| color: var(--text-color); |
| line-height: 1.6; |
| background-color: #f5f5f5; |
| background-image: url('https://api.suyanw.cn/api/comic3.php'); |
| background-size: cover; |
| background-position: center; |
| background-repeat: no-repeat; |
| background-attachment: fixed; |
| min-height: 100vh; |
| transition: all 0.3s ease; |
| position: relative; |
| overflow-x: hidden; |
| } |
| |
| #main-container { |
| max-width: 1000px; |
| margin: 80px auto 120px; |
| padding: 30px; |
| background: var(--bg-color); |
| border-radius: 15px; |
| box-shadow: 0 10px 30px var(--shadow-color); |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| position: relative; |
| z-index: 10; |
| } |
| |
| #header { |
| text-align: center; |
| margin-bottom: 30px; |
| } |
| |
| h1 { |
| font-family: 'Kiwi Maru', serif; |
| font-weight: 500; |
| color: var(--primary-color); |
| margin-bottom: 15px; |
| font-size: 2.2rem; |
| } |
| |
| p { |
| color: var(--text-color); |
| margin-bottom: 20px; |
| } |
| |
| #platform-nav { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: center; |
| gap: 15px; |
| margin-bottom: 30px; |
| background: var(--card-bg); |
| padding: 20px; |
| border-radius: 12px; |
| box-shadow: 0 5px 15px var(--shadow-color); |
| backdrop-filter: blur(8px); |
| -webkit-backdrop-filter: blur(8px); |
| } |
| |
| .platform-btn { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| padding: 10px; |
| border-radius: 8px; |
| transition: all 0.3s ease; |
| cursor: pointer; |
| background: transparent; |
| border: 1px solid var(--border-color); |
| min-width: 60px; |
| } |
| |
| .platform-btn img { |
| width: 30px; |
| height: 30px; |
| object-fit: contain; |
| margin-bottom: 5px; |
| } |
| |
| .platform-btn span { |
| font-size: 12px; |
| color: var(--text-color); |
| } |
| |
| .platform-btn:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 5px 10px var(--shadow-color); |
| border-color: var(--primary-color); |
| } |
| |
| #parser-container { |
| background: var(--card-bg); |
| padding: 25px; |
| border-radius: 12px; |
| box-shadow: 0 5px 15px var(--shadow-color); |
| margin-bottom: 30px; |
| backdrop-filter: blur(8px); |
| -webkit-backdrop-filter: blur(8px); |
| } |
| |
| #input-container { |
| position: relative; |
| margin-bottom: 20px; |
| } |
| |
| #video-url { |
| width: 100%; |
| padding: 15px; |
| border: 1px solid var(--border-color); |
| border-radius: 8px; |
| font-family: 'Nunito', sans-serif; |
| font-size: 16px; |
| background: var(--bg-color); |
| color: var(--text-color); |
| transition: all 0.3s ease; |
| } |
| |
| #video-url:focus { |
| outline: none; |
| border-color: var(--primary-color); |
| box-shadow: 0 0 0 3px var(--primary-light); |
| } |
| |
| #clipboard-btn { |
| position: absolute; |
| right: 10px; |
| top: 50%; |
| transform: translateY(-50%); |
| background: transparent; |
| border: none; |
| color: var(--primary-color); |
| cursor: pointer; |
| font-size: 20px; |
| } |
| |
| .btn { |
| display: inline-block; |
| padding: 12px 25px; |
| background-color: var(--primary-color); |
| color: white; |
| border: none; |
| border-radius: 8px; |
| font-family: 'Nunito', sans-serif; |
| font-size: 16px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| box-shadow: 0 5px 15px var(--shadow-color); |
| } |
| |
| .btn:hover { |
| background-color: var(--primary-dark); |
| transform: translateY(-2px); |
| box-shadow: 0 7px 18px var(--shadow-color); |
| } |
| |
| .btn:active { |
| transform: translateY(0); |
| box-shadow: 0 2px 8px var(--shadow-color); |
| } |
| |
| #parse-btn { |
| width: 100%; |
| margin-top: 10px; |
| margin-bottom: 20px; |
| } |
| |
| #random-quote { |
| text-align: center; |
| font-style: italic; |
| margin-bottom: 15px; |
| color: var(--text-color); |
| opacity: 0.8; |
| } |
| |
| #result-container { |
| display: none; |
| margin-top: 30px; |
| background: var(--card-bg); |
| padding: 25px; |
| border-radius: 12px; |
| box-shadow: 0 5px 15px var(--shadow-color); |
| backdrop-filter: blur(8px); |
| -webkit-backdrop-filter: blur(8px); |
| } |
| |
| #video-title { |
| font-size: 18px; |
| font-weight: 600; |
| margin-bottom: 15px; |
| color: var(--primary-color); |
| } |
| |
| #video-player-container { |
| margin: 20px 0; |
| position: relative; |
| width: 100%; |
| padding-top: 56.25%; |
| } |
| |
| #video-player { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| border-radius: 8px; |
| box-shadow: 0 5px 15px var(--shadow-color); |
| } |
| |
| #image-gallery { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); |
| gap: 15px; |
| margin: 20px 0; |
| } |
| |
| .gallery-img { |
| width: 100%; |
| height: 150px; |
| object-fit: cover; |
| cursor: pointer; |
| border-radius: 8px; |
| transition: all 0.3s ease; |
| } |
| |
| .gallery-img:hover { |
| transform: scale(1.05); |
| box-shadow: 0 5px 15px var(--shadow-color); |
| } |
| |
| #download-btn { |
| margin-top: 20px; |
| } |
| |
| #loading { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: var(--loading-bg); |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| align-items: center; |
| z-index: 1000; |
| backdrop-filter: blur(5px); |
| -webkit-backdrop-filter: blur(5px); |
| display: none; |
| } |
| |
| #loading-spinner { |
| width: 60px; |
| height: 60px; |
| margin-bottom: 20px; |
| border: 6px solid var(--primary-light); |
| border-radius: 50%; |
| border-top: 6px solid var(--primary-color); |
| animation: spin 1s linear infinite; |
| } |
| |
| #progress-container { |
| width: 300px; |
| background: var(--bg-color); |
| height: 8px; |
| border-radius: 4px; |
| overflow: hidden; |
| margin: 15px 0; |
| } |
| |
| #progress-bar { |
| width: 0; |
| height: 100%; |
| background: var(--primary-color); |
| border-radius: 4px; |
| transition: width 0.3s ease; |
| } |
| |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| |
| .section-title { |
| font-size: 20px; |
| font-weight: 600; |
| color: var(--primary-color); |
| margin: 30px 0 15px; |
| border-left: 4px solid var(--primary-color); |
| padding-left: 10px; |
| } |
| |
| #faq-section { |
| background: var(--card-bg); |
| padding: 25px; |
| border-radius: 12px; |
| box-shadow: 0 5px 15px var(--shadow-color); |
| margin-top: 30px; |
| backdrop-filter: blur(8px); |
| -webkit-backdrop-filter: blur(8px); |
| } |
| |
| .faq-item { |
| margin-bottom: 20px; |
| border-bottom: 1px solid var(--border-color); |
| padding-bottom: 15px; |
| } |
| |
| .faq-question { |
| font-weight: 600; |
| margin-bottom: 8px; |
| display: flex; |
| align-items: center; |
| color: var(--primary-color); |
| } |
| |
| .faq-question i { |
| margin-right: 8px; |
| } |
| |
| .faq-answer { |
| padding-left: 24px; |
| } |
| |
| #history-section { |
| background: var(--card-bg); |
| padding: 25px; |
| border-radius: 12px; |
| box-shadow: 0 5px 15px var(--shadow-color); |
| margin-top: 30px; |
| backdrop-filter: blur(8px); |
| -webkit-backdrop-filter: blur(8px); |
| } |
| |
| #history-list { |
| list-style: none; |
| margin-top: 15px; |
| } |
| |
| .history-item { |
| display: flex; |
| align-items: center; |
| padding: 10px; |
| border-radius: 8px; |
| margin-bottom: 10px; |
| transition: all 0.3s ease; |
| border: 1px solid var(--border-color); |
| } |
| |
| .history-item:hover { |
| background: var(--primary-light); |
| } |
| |
| .history-thumb { |
| width: 60px; |
| height: 60px; |
| object-fit: cover; |
| border-radius: 4px; |
| margin-right: 15px; |
| } |
| |
| .history-info { |
| flex-grow: 1; |
| } |
| |
| .history-title { |
| font-weight: 600; |
| margin-bottom: 5px; |
| color: var(--primary-color); |
| display: -webkit-box; |
| -webkit-line-clamp: 2; |
| -webkit-box-orient: vertical; |
| overflow: hidden; |
| } |
| |
| .history-url { |
| font-size: 12px; |
| color: var(--text-color); |
| opacity: 0.7; |
| word-break: break-all; |
| display: -webkit-box; |
| -webkit-line-clamp: 1; |
| -webkit-box-orient: vertical; |
| overflow: hidden; |
| } |
| |
| .history-actions { |
| display: flex; |
| flex-direction: column; |
| gap: 5px; |
| } |
| |
| .history-btn { |
| font-size: 14px; |
| padding: 5px 8px; |
| background: var(--primary-color); |
| color: white; |
| border: none; |
| border-radius: 4px; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
| |
| .history-btn:hover { |
| background: var(--primary-dark); |
| } |
| |
| footer { |
| text-align: center; |
| padding: 15px; |
| color: var(--text-color); |
| background: var(--bg-color); |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| position: relative; |
| margin-top: 30px; |
| } |
| |
| footer a { |
| color: var(--primary-color); |
| text-decoration: none; |
| } |
| |
| footer a:hover { |
| text-decoration: underline; |
| } |
| |
| |
| #fish-canvas { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| width: 100%; |
| height: 100px; |
| z-index: -1; |
| } |
| |
| |
| #top-buttons { |
| position: fixed; |
| top: 15px; |
| right: 15px; |
| display: flex; |
| gap: 10px; |
| z-index: 100; |
| } |
| |
| .top-btn { |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| background: var(--bg-color); |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| font-size: 18px; |
| color: var(--primary-color); |
| cursor: pointer; |
| border: none; |
| box-shadow: 0 2px 10px var(--shadow-color); |
| transition: all 0.3s ease; |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| } |
| |
| .top-btn:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 5px 15px var(--shadow-color); |
| } |
| |
| |
| #feedback-modal { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: rgba(0, 0, 0, 0.5); |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| z-index: 1000; |
| opacity: 0; |
| visibility: hidden; |
| transition: all 0.3s ease; |
| backdrop-filter: blur(5px); |
| -webkit-backdrop-filter: blur(5px); |
| } |
| |
| #feedback-modal.active { |
| opacity: 1; |
| visibility: visible; |
| } |
| |
| #feedback-content { |
| width: 90%; |
| max-width: 500px; |
| background: var(--card-bg); |
| border-radius: 12px; |
| padding: 25px; |
| box-shadow: 0 10px 30px var(--shadow-color); |
| transform: translateY(-20px); |
| transition: all 0.3s ease; |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| } |
| |
| #feedback-modal.active #feedback-content { |
| transform: translateY(0); |
| } |
| |
| #feedback-form textarea { |
| width: 100%; |
| height: 150px; |
| padding: 15px; |
| border: 1px solid var(--border-color); |
| border-radius: 8px; |
| margin: 15px 0; |
| font-family: 'Nunito', sans-serif; |
| font-size: 16px; |
| background: var(--bg-color); |
| color: var(--text-color); |
| resize: none; |
| } |
| |
| #feedback-form textarea:focus { |
| outline: none; |
| border-color: var(--primary-color); |
| box-shadow: 0 0 0 3px var(--primary-light); |
| } |
| |
| |
| #image-modal { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: rgba(0, 0, 0, 0.9); |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| z-index: 1000; |
| opacity: 0; |
| visibility: hidden; |
| transition: all 0.3s ease; |
| } |
| |
| #image-modal.active { |
| opacity: 1; |
| visibility: visible; |
| } |
| |
| #modal-image { |
| max-width: 90%; |
| max-height: 90%; |
| object-fit: contain; |
| } |
| |
| #close-modal { |
| position: absolute; |
| top: 20px; |
| right: 20px; |
| font-size: 30px; |
| color: white; |
| background: transparent; |
| border: none; |
| cursor: pointer; |
| } |
| |
| |
| @media (max-width: 768px) { |
| #main-container { |
| margin: 60px 15px 90px; |
| padding: 20px; |
| } |
| |
| h1 { |
| font-size: 1.8rem; |
| } |
| |
| .platform-btn { |
| min-width: 50px; |
| padding: 8px; |
| } |
| |
| .platform-btn img { |
| width: 24px; |
| height: 24px; |
| } |
| |
| #parser-container, #result-container, #faq-section, #history-section { |
| padding: 15px; |
| } |
| |
| #image-gallery { |
| grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); |
| } |
| |
| .gallery-img { |
| height: 120px; |
| } |
| |
| #feedback-content { |
| width: 95%; |
| padding: 20px; |
| } |
| } |
| |
| @media (max-width: 480px) { |
| #main-container { |
| margin: 50px 10px 70px; |
| padding: 15px; |
| } |
| |
| h1 { |
| font-size: 1.5rem; |
| } |
| |
| #platform-nav { |
| gap: 8px; |
| padding: 10px; |
| } |
| |
| .platform-btn { |
| min-width: 40px; |
| padding: 5px; |
| } |
| |
| .platform-btn img { |
| width: 20px; |
| height: 20px; |
| } |
| |
| .platform-btn span { |
| font-size: 10px; |
| } |
| |
| .btn { |
| padding: 10px 20px; |
| font-size: 14px; |
| } |
| |
| #video-title { |
| font-size: 16px; |
| } |
| |
| #image-gallery { |
| grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); |
| gap: 10px; |
| } |
| |
| .gallery-img { |
| height: 100px; |
| } |
| |
| .history-thumb { |
| width: 50px; |
| height: 50px; |
| } |
| |
| .history-btn { |
| font-size: 12px; |
| padding: 4px 6px; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div id="top-buttons"> |
| <button id="theme-btn" class="top-btn" title="切换明暗模式"> |
| <i class="fas fa-moon"></i> |
| </button> |
| <button id="color-btn" class="top-btn" title="切换主题色"> |
| <i class="fas fa-palette"></i> |
| </button> |
| <button id="feedback-btn" class="top-btn" title="意见反馈"> |
| <i class="fas fa-comment"></i> |
| </button> |
| </div> |
|
|
| <div id="main-container"> |
| <div id="header"> |
| <h1>短视频无水印解析</h1> |
| <p>支持抖音、快手、火山、小红书等多平台短视频解析下载，去除水印</p> |
| </div> |
|
|
| <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="video-url" placeholder="粘贴短视频分享链接..." autocomplete="off"> |
| <button id="clipboard-btn" title="粘贴"><i class="fas fa-paste"></i></button> |
| </div> |
| <button id="parse-btn" class="btn"><i class="fas fa-magic"></i> 魔法解析</button> |
| <div id="random-quote">加载中...</div> |
| </div> |
|
|
| <div id="result-container"> |
| <div id="video-title"></div> |
| <div id="video-player-container"> |
| <video id="video-player" controls playsinline></video> |
| </div> |
| <div id="image-gallery"></div> |
| <button id="download-btn" class="btn"><i class="fas fa-download"></i> 保存视频</button> |
| </div> |
|
|
| <div id="history-section"> |
| <div class="section-title">解析历史</div> |
| <ul id="history-list"> |
| |
| <li>暂无解析历史</li> |
| </ul> |
| </div> |
|
|
| <div id="faq-section"> |
| <div class="section-title">常见问题</div> |
| |
| <div class="faq-item"> |
| <div class="faq-question"><i class="fas fa-question-circle"></i> 为什么安卓手机无法下载视频？</div> |
| <div class="faq-answer">安卓手机需要长按视频后选择"保存视频"选项。如果没有此选项，请尝试使用系统浏览器或其他下载器。</div> |
| </div> |
| |
| <div class="faq-item"> |
| <div class="faq-question"><i class="fas fa-question-circle"></i> 苹果手机如何保存视频？</div> |
| <div class="faq-answer">苹果设备可以长按视频，然后选择"添加到相册"或"保存视频"选项。或者点击下方的"保存视频"按钮后复制链接，在浏览器中打开并长按保存。</div> |
| </div> |
| |
| <div class="faq-item"> |
| <div class="faq-question"><i class="fas fa-question-circle"></i> 解析后的视频仍有水印怎么办？</div> |
| <div class="faq-answer">部分平台会在视频中嵌入水印，这种情况下无法完全去除。本工具主要去除平台叠加的悬浮水印，提升视频观看体验。</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> |
| </div> |
|
|
| <footer> |
| <p>© 2023 短视频解析 | <a href="javascript:void(0)" id="footer-feedback">意见反馈</a></p> |
| <canvas id="fish-canvas"></canvas> |
| </footer> |
|
|
| <div id="loading"> |
| <div id="loading-spinner"></div> |
| <p>解析中，请稍候...</p> |
| <div id="progress-container"> |
| <div id="progress-bar"></div> |
| </div> |
| </div> |
|
|
| <div id="feedback-modal"> |
| <div id="feedback-content"> |
| <h2 style="color: var(--primary-color);margin-bottom:15px;">意见反馈</h2> |
| <p>如果您遇到问题或有建议，请在下方留言：</p> |
| <form id="feedback-form"> |
| <textarea id="feedback-text" placeholder="请描述您的问题或建议..."></textarea> |
| <div style="display:flex;justify-content:flex-end;gap:10px;"> |
| <button type="button" id="cancel-feedback" class="btn" style="background:gray;">取消</button> |
| <button type="submit" id="send-feedback" class="btn">发送</button> |
| </div> |
| </form> |
| </div> |
| </div> |
|
|
| <div id="image-modal"> |
| <img id="modal-image" src="" alt="预览图"> |
| <button id="close-modal"><i class="fas fa-times"></i></button> |
| </div> |
|
|
| <script> |
| |
| function initTheme() { |
| const savedTheme = localStorage.getItem('theme') || 'light'; |
| document.documentElement.setAttribute('data-theme', savedTheme); |
| |
| const themeBtn = document.getElementById('theme-btn'); |
| if (savedTheme === 'dark') { |
| themeBtn.innerHTML = '<i class="fas fa-sun"></i>'; |
| } else { |
| themeBtn.innerHTML = '<i class="fas fa-moon"></i>'; |
| } |
| } |
| |
| |
| function initThemeColor() { |
| const themeColors = [ |
| {primary: '#7c4dff', light: 'rgba(124, 77, 255, 0.2)', dark: '#5e35b1'}, |
| {primary: '#42a5f5', light: 'rgba(66, 165, 245, 0.2)', dark: '#1976d2'}, |
| {primary: '#ec407a', light: 'rgba(236, 64, 122, 0.2)', dark: '#d81b60'}, |
| {primary: '#66bb6a', light: 'rgba(102, 187, 106, 0.2)', dark: '#43a047'}, |
| {primary: '#ff9800', light: 'rgba(255, 152, 0, 0.2)', dark: '#f57c00'}, |
| ]; |
| |
| const colorIndex = parseInt(localStorage.getItem('colorIndex') || '0'); |
| const color = themeColors[colorIndex]; |
| |
| document.documentElement.style.setProperty('--primary-color', color.primary); |
| document.documentElement.style.setProperty('--primary-light', color.light); |
| document.documentElement.style.setProperty('--primary-dark', color.dark); |
| |
| document.getElementById('color-btn').onclick = function() { |
| const nextIndex = (colorIndex + 1) % themeColors.length; |
| localStorage.setItem('colorIndex', nextIndex); |
| initThemeColor(); |
| }; |
| } |
| |
| |
| function loadSakuraEffect() { |
| const script = document.createElement('script'); |
| script.src = 'https://api.suyanw.cn/api/mouse/yinghua.js'; |
| document.body.appendChild(script); |
| } |
| |
| |
| function loadLive2D() { |
| const live2d_script1 = document.createElement('script'); |
| live2d_script1.src = 'https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js'; |
| document.body.appendChild(live2d_script1); |
| } |
| |
| |
| function initFishAnimation() { |
| const canvas = document.getElementById('fish-canvas'); |
| const ctx = canvas.getContext('2d'); |
| canvas.width = canvas.offsetWidth; |
| canvas.height = canvas.offsetHeight; |
| |
| const fishes = []; |
| for (let i = 0; i < 8; i++) { |
| fishes.push({ |
| x: Math.random() * canvas.width, |
| y: Math.random() * canvas.height, |
| size: 5 + Math.random() * 10, |
| speed: 0.5 + Math.random() * 1.5, |
| angle: Math.random() * Math.PI * 2, |
| color: getComputedStyle(document.documentElement).getPropertyValue('--primary-color') |
| }); |
| } |
| |
| function updateFishes() { |
| ctx.clearRect(0, 0, canvas.width, canvas.height); |
| |
| for (const fish of fishes) { |
| |
| fish.x += Math.cos(fish.angle) * fish.speed; |
| fish.y += Math.sin(fish.angle) * fish.speed; |
| |
| |
| if (fish.x < 0) fish.x = canvas.width; |
| if (fish.x > canvas.width) fish.x = 0; |
| if (fish.y < 0) fish.y = canvas.height; |
| if (fish.y > canvas.height) fish.y = 0; |
| |
| |
| if (Math.random() < 0.02) { |
| fish.angle += (Math.random() - 0.5) * 0.5; |
| } |
| |
| |
| ctx.fillStyle = fish.color; |
| ctx.beginPath(); |
| ctx.moveTo(fish.x, fish.y); |
| ctx.lineTo(fish.x - fish.size * 1.5, fish.y - fish.size / 2); |
| ctx.lineTo(fish.x - fish.size * 1.5, fish.y + fish.size / 2); |
| ctx.closePath(); |
| ctx.fill(); |
| |
| |
| ctx.beginPath(); |
| ctx.moveTo(fish.x - fish.size * 1.2, fish.y); |
| ctx.lineTo(fish.x - fish.size * 1.8, fish.y - fish.size * 0.8); |
| ctx.lineTo(fish.x - fish.size * 1.8, fish.y + fish.size * 0.8); |
| ctx.closePath(); |
| ctx.fill(); |
| } |
| |
| requestAnimationFrame(updateFishes); |
| } |
| |
| updateFishes(); |
| |
| |
| window.addEventListener('resize', () => { |
| canvas.width = canvas.offsetWidth; |
| canvas.height = canvas.offsetHeight; |
| }); |
| } |
| |
| |
| async function fetchRandomQuote() { |
| try { |
| const response = await fetch('https://api.suyanw.cn/api/weimei.php'); |
| if (!response.ok) throw new Error('网络错误'); |
| const text = await response.text(); |
| document.getElementById('random-quote').textContent = text || "每一个视频背后，都有一个想被分享的故事"; |
| } catch (error) { |
| document.getElementById('random-quote').textContent = "每一个视频背后，都有一个想被分享的故事"; |
| console.error('获取随机文案失败:', error); |
| } |
| } |
| |
| |
| function loadHistory() { |
| const historyList = document.getElementById('history-list'); |
| const history = JSON.parse(localStorage.getItem('parseHistory') || '[]'); |
| |
| if (history.length === 0) { |
| historyList.innerHTML = '<li>暂无解析历史</li>'; |
| return; |
| } |
| |
| historyList.innerHTML = ''; |
| history.forEach((item, index) => { |
| const li = document.createElement('li'); |
| li.className = 'history-item'; |
| li.innerHTML = ` |
| <img class="history-thumb" src="${item.cover || 'https://via.placeholder.com/60'}" alt="缩略图"> |
| <div class="history-info"> |
| <div class="history-title">${item.title || '未知标题'}</div> |
| <div class="history-url">${item.url}</div> |
| </div> |
| <div class="history-actions"> |
| <button class="history-btn history-reparse" data-url="${item.url}"><i class="fas fa-redo"></i> 重新解析</button> |
| <button class="history-btn history-delete" data-index="${index}"><i class="fas fa-trash"></i> 删除</button> |
| </div> |
| `; |
| historyList.appendChild(li); |
| }); |
| |
| |
| document.querySelectorAll('.history-reparse').forEach(btn => { |
| btn.addEventListener('click', function() { |
| const url = this.getAttribute('data-url'); |
| document.getElementById('video-url').value = url; |
| document.getElementById('parse-btn').click(); |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.history-delete').forEach(btn => { |
| btn.addEventListener('click', function() { |
| const index = parseInt(this.getAttribute('data-index')); |
| const history = JSON.parse(localStorage.getItem('parseHistory') || '[]'); |
| history.splice(index, 1); |
| localStorage.setItem('parseHistory', JSON.stringify(history)); |
| loadHistory(); |
| }); |
| }); |
| } |
| |
| |
| function saveToHistory(data) { |
| if (!data || !data.url) return; |
| |
| let history = JSON.parse(localStorage.getItem('parseHistory') || '[]'); |
| |
| |
| const exists = history.findIndex(item => item.url === data.url); |
| if (exists > -1) { |
| history.splice(exists, 1); |
| } |
| |
| |
| history.unshift({ |
| url: data.url, |
| title: data.title || '', |
| cover: data.cover || '', |
| timestamp: new Date().getTime() |
| }); |
| |
| |
| if (history.length > 10) { |
| history = history.slice(0, 10); |
| } |
| |
| localStorage.setItem('parseHistory', JSON.stringify(history)); |
| loadHistory(); |
| } |
| |
| |
| async function parseVideo(url) { |
| if (!url) { |
| alert('请输入有效的视频链接'); |
| return; |
| } |
| |
| |
| const loading = document.getElementById('loading'); |
| const progressBar = document.getElementById('progress-bar'); |
| loading.style.display = 'flex'; |
| progressBar.style.width = '0%'; |
| |
| |
| const apiList = [ |
| `https://api.kxzjoker.cn/api/parse?url=${encodeURIComponent(url)}`, |
| `https://api.kxzjoker.cn/api/parse2?url=${encodeURIComponent(url)}`, |
| `https://api.kxzjoker.cn/api/parse3?url=${encodeURIComponent(url)}` |
| ]; |
| |
| let successData = null; |
| let apiIndex = 0; |
| |
| while (apiIndex < apiList.length && !successData) { |
| try { |
| |
| const progress = (apiIndex / apiList.length) * 90; |
| progressBar.style.width = `${progress}%`; |
| |
| |
| await new Promise(resolve => setTimeout(resolve, 800)); |
| |
| const response = await fetch(apiList[apiIndex]); |
| const data = await response.json(); |
| |
| if (data && data.code === 200) { |
| successData = data.data; |
| break; |
| } |
| } catch (error) { |
| console.error(`API ${apiIndex + 1} 解析失败:`, error); |
| } |
| |
| apiIndex++; |
| } |
| |
| |
| progressBar.style.width = '100%'; |
| await new Promise(resolve => setTimeout(resolve, 500)); |
| |
| |
| loading.style.display = 'none'; |
| |
| if (successData) { |
| displayResult(successData, url); |
| saveToHistory({ |
| url: url, |
| title: successData.title || '', |
| cover: successData.cover || successData.thumbnail || '' |
| }); |
| } else { |
| alert('解析失败，请检查链接是否正确或尝试其他平台的视频'); |
| } |
| } |
| |
| |
| function displayResult(data, originalUrl) { |
| const resultContainer = document.getElementById('result-container'); |
| const videoTitle = document.getElementById('video-title'); |
| const videoPlayer = document.getElementById('video-player'); |
| const imageGallery = document.getElementById('image-gallery'); |
| const downloadBtn = document.getElementById('download-btn'); |
| |
| |
| videoTitle.textContent = ''; |
| videoPlayer.src = ''; |
| imageGallery.innerHTML = ''; |
| |
| |
| videoTitle.textContent = data.title || '视频标题'; |
| |
| |
| resultContainer.style.display = 'block'; |
| setTimeout(() => { |
| resultContainer.scrollIntoView({ behavior: 'smooth' }); |
| }, 300); |
| |
| |
| if (data.images && data.images.length > 0) { |
| |
| videoPlayer.style.display = 'none'; |
| imageGallery.style.display = 'grid'; |
| downloadBtn.style.display = 'none'; |
| |
| data.images.forEach(imgUrl => { |
| const imgContainer = document.createElement('div'); |
| imgContainer.className = 'gallery-img-wrapper'; |
| |
| const img = document.createElement('img'); |
| img.className = 'gallery-img'; |
| img.src = imgUrl; |
| img.alt = '图集'; |
| img.onclick = function() { |
| document.getElementById('modal-image').src = imgUrl; |
| document.getElementById('image-modal').classList.add('active'); |
| }; |
| |
| imgContainer.appendChild(img); |
| imageGallery.appendChild(imgContainer); |
| }); |
| } else { |
| |
| videoPlayer.style.display = 'block'; |
| imageGallery.style.display = 'none'; |
| downloadBtn.style.display = 'block'; |
| |
| videoPlayer.src = data.url || ''; |
| videoPlayer.poster = data.cover || data.thumbnail || ''; |
| |
| downloadBtn.onclick = function() { |
| const videoUrl = data.url; |
| if (!videoUrl) { |
| alert('获取下载链接失败'); |
| return; |
| } |
| |
| |
| navigator.clipboard.writeText(videoUrl).then(() => { |
| console.log('视频链接已复制到粘贴板'); |
| }).catch(err => { |
| console.error('复制失败:', err); |
| }); |
| |
| |
| try { |
| const a = document.createElement('a'); |
| a.href = videoUrl; |
| a.download = `${data.title || 'video'}.mp4`; |
| a.target = '_blank'; |
| a.click(); |
| alert('电脑端请右键视频选择"另存为"。手机端请长按视频选择"保存视频"。视频链接已复制到剪贴板，您也可以在浏览器中打开链接下载。'); |
| } catch (error) { |
| alert('请在视频上长按选择保存视频，或使用视频下载器下载'); |
| console.error('下载失败:', error); |
| } |
| }; |
| } |
| } |
| |
| |
| function monitorClipboard() { |
| const videoUrlInput = document.getElementById('video-url'); |
| const pasteButton = document.getElementById('clipboard-btn'); |
| |
| pasteButton.addEventListener('click', async function() { |
| try { |
| const text = await navigator.clipboard.readText(); |
| if (text && (text.includes('http://') || text.includes('https://'))) { |
| videoUrlInput.value = text; |
| } |
| } catch (error) { |
| console.error('无法访问剪贴板:', error); |
| alert('请手动粘贴链接到输入框'); |
| } |
| }); |
| |
| |
| videoUrlInput.addEventListener('focus', async function() { |
| if (this.value === '') { |
| try { |
| const text = await navigator.clipboard.readText(); |
| if (text && (text.includes('http://') || text.includes('https://'))) { |
| this.value = text; |
| } |
| } catch (error) { |
| console.error('无法自动读取剪贴板，用户可能未授权或浏览器不支持'); |
| } |
| } |
| }); |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| initTheme(); |
| initThemeColor(); |
| |
| |
| loadSakuraEffect(); |
| loadLive2D(); |
| initFishAnimation(); |
| |
| |
| fetchRandomQuote(); |
| loadHistory(); |
| |
| |
| monitorClipboard(); |
| |
| |
| document.getElementById('theme-btn').addEventListener('click', function() { |
| const currentTheme = document.documentElement.getAttribute('data-theme'); |
| const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; |
| document.documentElement.setAttribute('data-theme', newTheme); |
| localStorage.setItem('theme', newTheme); |
| |
| |
| this.innerHTML = newTheme === 'dark' ? |
| '<i class="fas fa-sun"></i>' : |
| '<i class="fas fa-moon"></i>'; |
| }); |
| |
| document.getElementById('parse-btn').addEventListener('click', function() { |
| const url = document.getElementById('video-url').value.trim(); |
| parseVideo(url); |
| }); |
| |
| document.getElementById('feedback-btn').addEventListener('click', function() { |
| document.getElementById('feedback-modal').classList.add('active'); |
| }); |
| |
| document.getElementById('footer-feedback').addEventListener('click', function() { |
| document.getElementById('feedback-modal').classList.add('active'); |
| }); |
| |
| document.getElementById('cancel-feedback').addEventListener('click', function() { |
| document.getElementById('feedback-modal').classList.remove('active'); |
| }); |
| |
| document.getElementById('feedback-form').addEventListener('submit', function(e) { |
| e.preventDefault(); |
| const feedback = document.getElementById('feedback-text').value.trim(); |
| if (!feedback) { |
| alert('请输入反馈内容'); |
| return; |
| } |
| console.log('用户反馈:', feedback); |
| alert('感谢您的反馈！我们会尽快处理。'); |
| document.getElementById('feedback-text').value = ''; |
| document.getElementById('feedback-modal').classList.remove('active'); |
| }); |
| |
| document.getElementById('close-modal').addEventListener('click', function() { |
| document.getElementById('image-modal').classList.remove('active'); |
| }); |
| |
| |
| document.querySelectorAll('.platform-btn').forEach(btn => { |
| btn.addEventListener('click', function() { |
| const platform = this.getAttribute('data-platform'); |
| |
| |
| let videoUrl = document.getElementById('video-url'); |
| if (!videoUrl.value) { |
| videoUrl.placeholder = `请粘贴${platform}分享链接...`; |
| } |
| }); |
| }); |
| }); |
| </script> |
| |
| </body> |
| </html> |
