dougv.com « Doug Vanderweide

A Simple YouTube Jukebox Using JavaScript / DOM And deconcept's SWFObject

Recently asked on Yahoo! Answers:

HTML Help – Dropbox with Loading Option?

Okay, here’s my issue. I have a decent piece of coding that gives me a dropbox. The dropbox has a ‘go’ button, and it is filled with titles of music videos from YouTube.

Now, used alone, it’s fine. It opens a new page, which plays the youtube video.

However, I was clever enough to grab the *embed* names. So, it doesn’t load a simple youtube page, but simply the video in a website.

So now, I need some HTML help. I would like to create an object that sits next to the dropbox and plays the video when you select ‘go’, instead of it loading a new page.

I know how to make an embedded video. I know how to make the dropbox. Unfortunately, I don’t know how to make the dropbox and the embedded video interact, so that I can select the video I want to play.

This is very easy to do, thanks to deconcept’s excellent SWFObject JavaScript library and the questioner’s work in extracting the Flash FLV player URLs from all the videos he wants to show.

So, let’s get right on making a YouTube jukebox!

Step 1: The Form

Our form couldn’t be simpler: It’s just a SELECT list that holds all the URLs to our files, which also has an onchange event set to a JavaScript function named playVideo(). We’ll create that function soon.

	Select A Video:

Select ...
"The Omega Kawaii Cloud Song" - Nellie Malton
"How Much You Annoy Me" - Dr. Cox
"Resident Evil Montage Rumble" - ShadowLeggy
" Numa Numa" (Resident Evil) - O-Zone
"Beverly Hills" (Halo Version) - Weezer
"He Said, She Said" - Maldroid
"Heck No! (I'll Never Listen to Techno)" - Maldroid
"Wizard Needs Food Badly" - Five Iron Frenzy
"Somewhere Over the Rainbow" - Ted's Band
"Casino Royale" (Casino Royal Theme Version) - Chris Cornell
"Smoke the Wii" - The FanBoiz
"Bananaphone" (Half-Life 2 Version) - sh00rty
"Grand Theft Autumn Parody" - Fall Out Boy (Parody)
"Seven Minutes In Heaven Parody" - Fall Out Boy (Parody)
"Kryptonite" (Resident Evil 4 Version) - Three Doors Down
"Trogdor" (GH2 Version) - Strong Bad
"The Saga Begins" - Weird Al Yankovic
"Couch Potato" (Live) - Weird Al Yankovic
"White and Nerdy" - Weird Al Yankovic
"Dance Dance Parody" - Fall Out Boy (Parody)
"Numb" (Phoenix Wright Version) - Linkin Park
"All Your Base" - Master Samurai
"School of Rock" (GH2 Custom) - School of Rock


	

Step 2: The DIV

We also need a simple DIV in which we will dynamically place the Flash player we get from YouTube. That’s as simple as making a DIV that has an ID of jukePlayer. I’ve also set aside some CSS code to space for the player once it comes in, by fixing the DIV’s height and width to the size of the average Flash player.

div#jukePlayer {
	width: 425px;
	height: 350px;
	margin: 10px 0 10px 0;
}

Step 3: deconcept’s SWFObject JavaScript

We need a way to dynamically change the DIV’s innerHTML to be an embedded instance of the Flash Player. Thankfully, there’s a great JavaScript library out there already that will do that for us: deconcept’s SWFObject.

All we need to do is download the JavaScript they supply, upload the enclosed swfobject.js file to our Web site, and make reference to it with a SCRIPT tag in our page’s HEAD segment.

Step 4: The playVideo() Script

To bring it all together, we need to make a script that gets the chosen item in our SELECT menu and drop its video into our DIV. That’s as easy as getting the SELECT via getElementById, then iterating through all its options until we find the selected item.

Once we find the selected item, we create a new SWFObject, pass it the parameters it needs, and tell it to place the player in our DIV.

Note that we also accept two arguments in the playVideo() function: autoplay and loop. If you send a value of 1 for autoplay, then the video will start playing once it loads; if you send a value of 1 for loop, the video will play back continuously.

You must send values for both parameters, but only values of 1 matter; any other value will be ignored.

function playVideo(autoplay, loop) {
	var theSelect = document.getElementById("jukeVids");
	var theArgs;
	if(autoplay == 1) {
		theArgs = "&autoplay=1";
	}
	if(loop == 1) {
		theArgs += "&loop=1";
	}

	for(var i = 0; i < theSelect.length; i++) {
		if(theSelect.options[i].selected) {
			var so = new SWFObject(theSelect.options[i].value + theArgs, "mymovie", "425", "350", "8", "#fff");
			so.write("jukePlayer");
			break;
		}
	}
}

And that's all there is to it. You can see the script in action here:

http://www.dougv.com/demo/js_youtube_jukebox/

You can simply save the page to your computer and modify it to your content. My work is distributed under the GNU GPL version 3.