sample interface

8 years ago · ca1883778a
parent 94de73f7aa
commit ca1883778a
1 changed files with 123 additions and 0 deletions
--- a/03/youtube-copyright/pass-fail.html
+++ b/03/youtube-copyright/pass-fail.html
@ -0,0 +1,123 @@
+<html>
+<head>
+	<title></title>
+	<meta charset="utf-8" />
+<style type="text/css">
+#ytplayer {
+	padding: 20px;
+	width: 320px;
+}
+#playerdiv {
+	width: 360px;
+	background: white;
+}
+#playerdiv.detected {
+	background: red;	
+}
+#playerdiv.undetected {
+	background: green;	
+}
+</style>
+</head>
+<body>
+
+<div class="alllinks">
+	<div class="detected">
+		<div>COPYRIGHT DETECTED</div>
+		<div>
+			<a href="https://www.youtube.com/watch?v=4ExUF1khFOQ">pitch-25</a>
+			<a href="https://www.youtube.com/watch?v=06fUhmj3uws">pitch+25</a>
+			<a href="https://www.youtube.com/watch?v=B3Y66QAqoOs">time+25</a>
+			<a href="https://www.youtube.com/watch?v=0B3rpUz_LMc">time-25</a>
+			<a href="https://www.youtube.com/watch?v=AJfvyxbIYlk">resample@11025Hz</a>
+			<a href="https://www.youtube.com/watch?v=u9DS7cFg4G4">noise recording only noise</a>
+			<a href="https://www.youtube.com/watch?v=L3sUb5_jTW8">2songs</a>
+		</div>
+	</div>
+	<div class="undetected">
+		<div>Copyright NOT detected</div>
+		<a href="https://www.youtube.com/watch?v=Lw9GcLTx6qE">reversed</a>
+		<a href="https://www.youtube.com/watch?v=HdWtRLQNzq4">noise recording crowd music same distance</a>
+		<a href="https://www.youtube.com/watch?v=NSNipke4ka8">noise recording crowd music far</a>
+		<a href="https://www.youtube.com/watch?v=0p_5MvfQnWw">chunks mixed 15s</a>
+		<a href="https://www.youtube.com/watch?v=NgPeKflGqtM">vocals isolated</a>
+		<a href="https://www.youtube.com/watch?v=PzlmAnD1JmI">vocals removed</a>
+	</div>
+</div>
+
+<div id="playerdiv" class="">
+	<div id="ytplayer"></div>
+</div>
+
+<script>
+// Load the IFrame Player API code asynchronously.
+var tag = document.createElement('script');
+tag.src = "https://www.youtube.com/player_api";
+var firstScriptTag = document.getElementsByTagName('script')[0];
+firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+// Replace the 'ytplayer' element with an <iframe> and
+// YouTube player after the API code downloads.
+var player = null;
+var playerdiv = document.getElementById("playerdiv");
+
+function onYouTubePlayerAPIReady() {}
+
+function extract_ytid (href) {
+	return href.match(/v=?(.+)/)[1]
+}
+
+function play (youtubeid) {
+	if (player === null) {
+	    player = new YT.Player('ytplayer', {
+	      height: '80',
+	      width: '320',
+	      autoplay: true,
+	      videoId: youtubeid,
+	      events: {
+	      	'onReady': onPlayerReady
+	      }
+	    });		
+	} else {
+		player.loadVideoById({'videoId': youtubeid, 'events': { 'onReady': onPlayerReady }})
+	}
+}
+
+function onPlayerReady () {
+	player.playVideo();
+}
+
+function $ (sel, callback) {
+	var ll = document.querySelectorAll(sel);
+	return Array.prototype.slice.call(ll);
+}
+
+$(".detected a").forEach(function (a) {
+	a.addEventListener("click", function (e) {
+		play(extract_ytid(this.href));
+		e.preventDefault();
+		playerdiv.setAttribute("class", "");
+		// show the "result" after a delay
+		window.setTimeout(function () {
+			playerdiv.setAttribute("class", "detected");
+		}, 2500);
+	});
+});
+$(".undetected a").forEach(function (a) {
+	a.addEventListener("click", function (e) {
+		play(extract_ytid(this.href));
+		e.preventDefault();
+		playerdiv.setAttribute("class", "");
+		// show the "result" after a delay
+		window.setTimeout(function () {
+			playerdiv.setAttribute("class", "undetected");
+		}, 2500);
+	});
+});
+
+</script>
+
+
+
+</body>
+</html>