demos/youtube/retrieve-title-description-and-thumbnail.html at master · MagicalDigits/demos · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
<head>
	<link href="../assets/styles.min.css" rel="stylesheet">
	<title>YouTube: Retrieve Title, Description and Thumbnail</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<style>
		#search-bar { margin: 1em 0; overflow: hidden; }
		#search-txt { float: left; width: 60%; }
		#search-btn { float: right; width: 39%; }
		#video-data-1 img { float: right; }
		#video-data-1 p { white-space: pre-line; }
	</style>
</head>
<body>
	<p>Enter YouTube Video ID or URL in the text box below</p>
	<div id="search-bar">
		<input id="search-txt" type="text" value="https://www.youtube.com/watch?v=gzDS-Kfd5XQ" maxlength="100">
		<input id="search-btn" type="button" value="Fetch Video Information">
	</div>
	<div id="video-data-1"></div>
	<ul id="video-data-2"></ul>
	<script>
		/*
		 * YouTube: Retrieve Title, Description and Thumbnail
		 * https://salman-w.blogspot.com/2010/01/retrieve-youtube-video-title.html
		 */
		$(function() {
			$("#search-txt").on("keypress", function(e) {
				if (e.which === 13) {
					e.preventDefault();
					$("#search-btn").trigger("click");
				}
			});
			$("#search-btn").on("click", function() {
				$("#video-data-1, #video-data-2").empty();
				var videoid = $("#search-txt").val();
				var matches = videoid.match(/^https?:\/\/www\.youtube\.com\/.*[?&]v=([^&]+)/i) || videoid.match(/^https?:\/\/youtu\.be\/([^?]+)/i);
				if (matches) {
					videoid = matches[1];
				}
				if (videoid.match(/^[a-z0-9_-]{11}$/i) === null) {
					$("<p style='color: #F00;'>Unable to parse Video ID/URL.</p>").appendTo("#video-data-1");
					return;
				}
				$.getJSON("https://www.googleapis.com/youtube/v3/videos", {
					key: "AIzaSyBs1MVxS8kIxL9BXrxYE0lfvDP-iF_cmeA",
					part: "snippet,statistics",
					id: videoid
				}, function(data) {
					if (data.items.length === 0) {
						$("<p style='color: #F00;'>Video not found.</p>").appendTo("#video-data-1");
						return;
					}
					$("<img>", {
						src: data.items[0].snippet.thumbnails.medium.url,
						width: data.items[0].snippet.thumbnails.medium.width,
						height: data.items[0].snippet.thumbnails.medium.height
					}).appendTo("#video-data-1");
					$("<h1></h1>").text(data.items[0].snippet.title).appendTo("#video-data-1");
					$("<p></p>").text(data.items[0].snippet.description).appendTo("#video-data-1");
					$("<li></li>").text("Published at: " + data.items[0].snippet.publishedAt).appendTo("#video-data-2");
					$("<li></li>").text("View count: " + data.items[0].statistics.viewCount).appendTo("#video-data-2");
					$("<li></li>").text("Favorite count: " + data.items[0].statistics.favoriteCount).appendTo("#video-data-2");
					$("<li></li>").text("Like count: " + data.items[0].statistics.likeCount).appendTo("#video-data-2");
					$("<li></li>").text("Dislike count: " + data.items[0].statistics.dislikeCount).appendTo("#video-data-2");
				}).fail(function(jqXHR, textStatus, errorThrown) {
					$("<p style='color: #F00;'></p>").text(jqXHR.responseText || errorThrown).appendTo("#video-data-1");
				});
			});
		});
	</script>
</body>
</html>