133 lines
5.1 KiB
HTML
133 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>抖音视频解析助手</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
font-family: 'Poppins', sans-serif;
|
|
background: linear-gradient(135deg, #f3e7e9 0%, #e3eeff 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.glow-box {
|
|
box-shadow: 0 0 30px rgba(99, 102, 241, 0.1);
|
|
}
|
|
|
|
.multi-line-ellipsis {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 5;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
line-height: 1.5em;
|
|
max-height: 7.5em;
|
|
transition: max-height 0.3s ease;
|
|
}
|
|
|
|
.multi-line-ellipsis:hover {
|
|
-webkit-line-clamp: unset;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="flex items-center justify-center p-4">
|
|
<div class="w-full max-w-2xl bg-white rounded-2xl p-8 glow-box">
|
|
<h1 class="text-3xl font-bold text-indigo-600 mb-6 text-center">
|
|
🎥 抖音视频解析器
|
|
</h1>
|
|
|
|
<div class="space-y-6">
|
|
<div class="relative">
|
|
<input
|
|
type="text"
|
|
id="videoUrl"
|
|
placeholder="粘贴抖音视频链接..."
|
|
class="w-full px-4 py-3 rounded-lg border-2 border-indigo-100 focus:border-indigo-400 focus:ring-2 focus:ring-indigo-200 transition-all"
|
|
>
|
|
<button
|
|
onclick="fetchVideoInfo()"
|
|
class="absolute right-2 top-2 bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-2 rounded-md hover:scale-105 transition-transform"
|
|
>
|
|
立即解析
|
|
</button>
|
|
</div>
|
|
|
|
<div id="resultContainer" class="hidden">
|
|
<div class="bg-gray-50 p-6 rounded-xl animate-fade-in space-y-4">
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
|
|
<svg class="w-6 h-6 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
|
</svg>
|
|
解析结果
|
|
</h3>
|
|
|
|
<div class="grid grid-cols-1 gap-4">
|
|
<!-- 视频地址 -->
|
|
<div class="bg-white p-4 rounded-lg shadow-sm">
|
|
<label class="text-indigo-600 font-medium block mb-2">视频地址</label>
|
|
<a id="videoUrlLink" target="_blank"
|
|
class="text-blue-600 break-all hover:underline hover:text-blue-800 transition-colors">
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 背景音乐 -->
|
|
<div class="bg-white p-4 rounded-lg shadow-sm">
|
|
<label class="text-purple-600 font-medium block mb-2">背景音乐</label>
|
|
<a id="musicUrlLink" target="_blank"
|
|
class="text-blue-600 break-all hover:underline hover:text-blue-800 transition-colors">
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 视频文案 -->
|
|
<div class="bg-white p-4 rounded-lg shadow-sm">
|
|
<label class="text-green-600 font-medium block mb-2">视频文案</label>
|
|
<div id="contentText" class="text-gray-700 leading-relaxed multi-line-ellipsis scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
async function fetchVideoInfo() {
|
|
const url = document.getElementById('videoUrl').value;
|
|
const resultContainer = document.getElementById('resultContainer');
|
|
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('video_url', url);
|
|
|
|
const response = await fetch('/douyin', {
|
|
method: 'POST',
|
|
body: formData,
|
|
credentials: 'include'
|
|
});
|
|
|
|
const responseData = await response.json();
|
|
|
|
if (responseData.code === 200) {
|
|
// 填充结构化数据
|
|
document.getElementById('videoUrlLink').href = responseData.data.video_url;
|
|
document.getElementById('videoUrlLink').textContent = responseData.data.video_url;
|
|
|
|
document.getElementById('musicUrlLink').href = responseData.data.video_music;
|
|
document.getElementById('musicUrlLink').textContent = responseData.data.video_music;
|
|
|
|
document.getElementById('contentText').textContent = responseData.data.content;
|
|
resultContainer.classList.remove('hidden');
|
|
} else {
|
|
alert(`错误代码 ${responseData.code}: ${responseData.message}`);
|
|
}
|
|
} catch (error) {
|
|
alert('解析失败，请检查链接有效性');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |