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

<!DOCTYPE html>
<html>
<head>
	<title>快手解析工具</title>
	<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;
			margin-bottom: 10px;
			max-width: 100%;
			height: auto;
			display: block;
			margin: 0 auto;
		}
		.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;
		}
	</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>