快手视频解析工具 - 在线解析快手作品链接 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>快手视频解析工具</title>
	<meta charset="UTF-8">
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<style>
		body {
			font-family: Arial;
			background-color: #f2f2f2;
		}
		h1 {
			text-align: center;
		}
		.container {
			margin: 0 auto;
			max-width: 800px;
		}
		.card {
			background-color: #fff;
			border-radius: 5px;
			box-shadow: 0 2px 4px rgba(0,0,0,0.1);
			padding: 20px;
			margin-bottom: 20px;
		}
		.card img {
			border-radius: 5px;
			max-width: 100%;
			height: auto;
			display: block;
			margin: 0 auto 10px;
		}
		.card h2 {
			font-size: 24px;
			margin-bottom: 10px;
			text-align: center;
		}
		.card p {
			font-size: 16px;
			line-height: 1.5;
			margin-bottom: 10px;
		}
		.card .music {
			margin-top: 10px;
			background-color: #f2f2f2;
			padding: 10px;
			border-radius: 5px;
			display: flex;
			align-items: center;
		}
		.card .music img {
			border-radius: 50%;
			margin-right: 10px;
			width: 40px;
			height: 40px;
			object-fit: cover;
		}
		.card .music p {
			font-size: 14px;
			margin: 0;
		}
		form {
			display: flex;
			align-items: center;
			margin-bottom: 20px;
		}
		label {
			margin-right: 10px;
			font-size: 16px;
		}
		input[type="text"] {
			padding: 10px;
			font-size: 16px;
			border-radius: 5px;
			border: none;
			flex: 1;
		}
		button[type="submit"] {
			background-color: #4CAF50;
			color: #fff;
			border: none;
			border-radius: 5px;
			padding: 10px 20px;
			font-size: 16px;
			cursor: pointer;
		}
		button[type="submit"]:hover {
			background-color: #3e8e41;
		}
		.result p {
			font-size: 16px;
			color: red;
			text-align: center;
		}
	</style>
</head>
<body>
	<h1>快手视频解析工具</h1>
	<div class="container">
		<form>
			<label for="url">请输入快手作品链接：</label>
			<input type="text" id="url" name="url" required>
			<button type="submit">解析</button>
		</form>
		<div class="result"></div>
	</div>
	<script>
		$(document).ready(function(){
			$('form').submit(function(e){
				e.preventDefault();
				var url = $('#url').val();
				$.getJSON('http://y.ovoa.cc/api/kuaishou.php?url='+url, function(result){
					if(result.code == 200){
						var data = result.data;
						var html = '<div class="card"><img src=''+data.cover+''><h2>'+data.title+'</h2><p><img src=''+data.avatar+'' style="border-radius: 50%; width: 20px; height: 20px; object-fit: cover;'> '+data.author+'</p><p><a href=''+data.url+'' target="_blank">点击查看作品</a></p>';
						if(data.music){
							html += '<div class="music"><img src=''+data.music.musicAvatar+''><p>'+data.music.musicName+' - '+data.music.musicBgm+'</p></div>';
						}
						html += '</div>';
						$('.result').html(html);
					}else{
						$('.result').html('<p>'+result.msg+'</p>');
					}
				});
			});
		});
	</script>
</body>
</html>