Created
April 24, 2011 18:28
-
-
Save tzafrir/939775 to your computer and use it in GitHub Desktop.
Youtube Remixer draft
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <doctype html> | |
| <html><head><title>Youtube Mixer</title> | |
| <script src="http://www.google.com/jsapi" type="text/javascript"></script> | |
| <script type="text/javascript"> | |
| google.load("swfobject", "2.1"); | |
| function _run() { | |
| var videoID = "HgzGwKwLmgM" | |
| var params = { allowScriptAccess: "always" }; | |
| var atts = { id: "y1", allowFullScreen: true }; | |
| var urlParams = '&enablejsapi=1&fs=1'; | |
| swfobject.embedSWF("http://www.youtube.com/v/" + videoID + urlParams + "&playerapiid=v1", | |
| "v1", "480", "295", "8", null, null, params, atts); | |
| atts.id = "y2"; | |
| swfobject.embedSWF("http://www.youtube.com/v/" + videoID + urlParams + "&playerapiid=v2", | |
| "v2", "480", "295", "8", null, null, params, atts); | |
| yt1 = document.getElementById('y1'); | |
| yt2 = document.getElementById('y2'); | |
| vol1 = document.getElementById('vol1'); | |
| vol2 = document.getElementById('vol2'); | |
| window.setInterval(updateVolumeBars, 50); | |
| } | |
| google.setOnLoadCallback(_run); | |
| /** | |
| * Input: Something like http://www.youtube.com/watch?v=16h6vLy6n4A&NR=1 OR 16h6vLy6n4A | |
| * Output: Something like 16h6vLy6n4A | |
| */ | |
| function getId(videoUrl) { | |
| var a = videoUrl.split('v='); | |
| return a[a.length - 1].split('&')[0]; | |
| } | |
| function setVolV1() { | |
| if (yt1 && yt1.setVolume) { | |
| yt1.setVolume(voll.value); | |
| } | |
| } | |
| function updateV1() { | |
| if (yt1 && yt1.loadVideoById) { | |
| yt1.loadVideoById(getId(document.getElementById('nv1').value)); | |
| } | |
| } | |
| function setVolV2() { | |
| if (yt2 && yt2.setVolume) { | |
| yt2.setVolume(vol2.value); | |
| } | |
| } | |
| function updateV2() { | |
| if (yt2 && yt2.loadVideoById) { | |
| yt2.loadVideoById(getId(document.getElementById('nv2').value)); | |
| } | |
| } | |
| function onYouTubePlayerReady(id) { | |
| if (id == "v1") { | |
| yt1.setVolume(100); | |
| } else if (id == "v2") { | |
| yt2.setVolume(0); | |
| } | |
| } | |
| function updateVolumeBars() { | |
| if (yt1 && yt2 && yt1.getVolume && yt2.getVolume) { | |
| vol1.value = yt1.getVolume(); | |
| vol2.value = yt2.getVolume(); | |
| } | |
| } | |
| </script> | |
| <style> | |
| .vid { | |
| float: left; | |
| margin-right: 3em; | |
| text-align: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="vid"> | |
| <div id="v1">...</div> | |
| <p><input type="text" id="nv1" size="40" placeholder="Video url"/><input type="button" value="Change" onclick="updateV1()" /></p> | |
| <p><input type="range" id="vol1" min="0" max="100" onchange="setVolV1()" value="100" /></p> | |
| </div> <!-- vid --> | |
| <div class="vid"> | |
| <div id="v2">...</div> | |
| <p><input type="text" id="nv2" size="40" placeholder="Video url"/><input type="button" value="Change" onclick="updateV2()" /></p> | |
| <p><input type="range" id="vol2" min="0" max="100" onchange="setVolV2()" value="0" /></p> | |
| </div> <!-- vid --> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment