142 lines
8.0 KiB
HTML
142 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>VIP视频解析 - 工具合集</title>
|
||
<link rel="icon" href="../../favicon.svg" type="image/svg+xml">
|
||
<link rel="shortcut icon" href="../../favicon.svg" type="image/svg+xml">
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<link rel="stylesheet" href="../../styles.css">
|
||
</head>
|
||
<body class="bg-gray-50 text-gray-900 min-h-screen flex flex-col">
|
||
<!-- 导航栏 -->
|
||
<nav class="bg-white shadow-sm border-b border-gray-200">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="flex justify-between h-16">
|
||
<div class="flex items-center">
|
||
<a href="index.html" class="flex items-center">
|
||
<i class="fas fa-chevron-left mr-2"></i>
|
||
<span class="text-xl font-bold">工具集</span>
|
||
</a>
|
||
</div>
|
||
<div class="flex items-center space-x-4">
|
||
<button id="dark-mode-toggle" class="p-2 rounded-full hover:bg-gray-200">
|
||
<i class="fas fa-moon"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 主要内容 -->
|
||
<main class="flex-grow container mx-auto px-4 py-8">
|
||
<!-- 工具标题 -->
|
||
<div class="text-center mb-8">
|
||
<h1 class="text-3xl font-bold mb-2">VIP视频解析</h1>
|
||
<p class="text-gray-600 max-w-2xl mx-auto">解析各大视频网站VIP资源，输入视频链接即可免费观看</p>
|
||
</div>
|
||
|
||
<!-- 视频解析工具 -->
|
||
<div class="max-w-4xl mx-auto bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
||
<!-- 输入区域 -->
|
||
<div class="p-6 border-b border-gray-200">
|
||
<div class="flex flex-col md:flex-row gap-4">
|
||
<div class="flex-grow">
|
||
<input type="text" id="video-url" placeholder="请输入需要解析的视频链接..."
|
||
class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500">
|
||
</div>
|
||
<button id="parse-button" class="bg-gray-800 hover:bg-black text-white font-medium py-3 px-6 rounded-md transition-colors">
|
||
立即解析
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 常用视频网站快捷入口 -->
|
||
<div class="mt-5">
|
||
<h3 class="text-sm text-gray-500 mb-3">热门视频网站：</h3>
|
||
<div class="flex flex-wrap gap-2">
|
||
<a href="https://v.qq.com/" target="_blank" class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded-full transition-colors">腾讯视频</a>
|
||
<a href="https://www.iqiyi.com/" target="_blank" class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded-full transition-colors">爱奇艺</a>
|
||
<a href="https://www.youku.com/" target="_blank" class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded-full transition-colors">优酷</a>
|
||
<a href="https://www.mgtv.com/" target="_blank" class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded-full transition-colors">芒果TV</a>
|
||
<a href="https://tv.sohu.com/" target="_blank" class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded-full transition-colors">搜狐视频</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 视频播放区域 -->
|
||
<div class="bg-black p-0">
|
||
<div id="video-container" class="relative w-full" style="height: 500px;">
|
||
<!-- 初始状态 -->
|
||
<div id="video-placeholder" class="absolute inset-0 flex items-center justify-center text-white">
|
||
<div class="text-center">
|
||
<i class="fas fa-film text-5xl mb-4 opacity-30"></i>
|
||
<p class="opacity-60">输入视频链接后点击解析按钮播放</p>
|
||
</div>
|
||
</div>
|
||
<!-- 视频将在这里显示 -->
|
||
<iframe id="video-iframe" class="w-full h-full hidden" frameborder="0" allowfullscreen></iframe>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 说明和提示 -->
|
||
<div class="p-6 bg-gray-50 border-t border-gray-200">
|
||
<h3 class="font-medium mb-2">使用说明：</h3>
|
||
<ul class="list-disc pl-5 text-gray-600 space-y-1 text-sm">
|
||
<li>支持解析爱奇艺、腾讯视频、优酷、芒果TV等各大视频网站的VIP视频</li>
|
||
<li>复制视频页面地址，粘贴到上方输入框，点击解析按钮即可观看</li>
|
||
<li>部分视频可能无法解析，请尝试更换其他解析接口</li>
|
||
<li>本工具仅用于学习交流，请支持正版视频</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="bg-white border-t border-gray-200 py-6">
|
||
<div class="container mx-auto px-4">
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
<div>
|
||
<h3 class="text-lg font-semibold mb-3">IT工具合集</h3>
|
||
<p class="text-gray-500 text-sm">提供多种实用工具，帮助您提高效率，解决问题。所有工具完全免费使用，无需注册。</p>
|
||
<div class="flex space-x-4 mt-3 social-links">
|
||
<a href="javascript:void(0)" class="text-gray-400 hover:text-gray-800 cursor-pointer" data-platform="github">
|
||
<i class="fab fa-github text-xl"></i>
|
||
</a>
|
||
<a href="javascript:void(0)" class="text-gray-400 hover:text-gray-800 cursor-pointer" data-platform="twitter">
|
||
<i class="fab fa-twitter text-xl"></i>
|
||
</a>
|
||
<a href="javascript:void(0)" class="text-gray-400 hover:text-gray-800 cursor-pointer" data-platform="wechat">
|
||
<i class="fab fa-weixin text-xl"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-lg font-semibold mb-3">快速链接</h3>
|
||
<ul class="space-y-2 text-sm text-gray-500 quick-links">
|
||
<li><a href="#" class="hover:text-black" data-link-type="about">关于我们</a></li>
|
||
<li><a href="#" class="hover:text-black" data-link-type="terms">使用条款</a></li>
|
||
<li><a href="#" class="hover:text-black" data-link-type="privacy">隐私政策</a></li>
|
||
<li><a href="#" class="hover:text-black" data-link-type="faq">常见问题</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-lg font-semibold mb-3">返回主页</h3>
|
||
<p class="text-gray-500 text-sm mb-3">查看更多实用的在线工具</p>
|
||
<a href="../../index.html" class="inline-flex items-center bg-gray-800 hover:bg-black text-white font-medium py-2 px-4 rounded-md transition-colors">
|
||
<i class="fas fa-home mr-2"></i>回到主页
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="border-t border-gray-200 mt-6 pt-4 text-center text-gray-500 text-sm">
|
||
<p>© 2025 工具集 | 一站式工具合集网站</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="../../script.js"></script>
|
||
<script src="../../footer.js"></script>
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html> |