Popcorn: Multigrain

Suppose you're not just using Popcorn.js to present one video. You have a particular video page and you want it to work whether your selected clip is on YouTube, Vimeo, and WikiMedia (OGV). Let's work through a program that sets up the player, no matter what the source is.

First: decide how you want to read in the source. You could say:

var source = "youtube";
var videoID = "xyzxyz";

But I want to make one page that works for many different videos. If I have a video player on http://mapmeld.com, I can tell it the video using the URL: http://mapmeld.com?source=youtube&id=xyzxyz

Let's borrow a function which reads the source out of those URLs. Don't try to read it, just notice that we can call readURL("source") and figure out what the URL says about that.

Now we have source and videoID set. Let's use if and else to make sure it is sorted into the right category.

if(source == "youtube"){
// video is from YouTube
}
else{
// video is not from YouTube
}

Pay attention to how we've set up these statements:

Because source = "youtube" would change the source to "youtube", we use the double-equals, ==, to test if they are exactly equal.
The first thing we check is if the source is "youtube". If it is, we run the code inside the curly brackets { }
If the source isn't YouTube, we have the option of creating an else and putting code inside a second set of curly brackets.

To make it work for three possibilities (youtube, vimeo, or OGG/OGV from any site, such as WikiMedia) we can use 'else if'

if(source == "youtube"){
// video is from YouTube
}
else if(source == "vimeo"){
// video is not from YouTube so I checked and it is from Vimeo
}
else{
// video is not from YouTube nor from Vimeo
}
alert("matched video");

If the source matches YouTube, we run the first set of brackets and jump to the alert("matched video"); line.
If the source doesn't match YouTube, it continues to the next section. The else if tests if the source matches "vimeo"
If the source matches "vimeo", we run the second set of brackets and jump to the alert("matched video"); line.
If the source didn't match YouTube or Vimeo, we've created a second else and a third set of brackets which catch anything left over. We will then run alert("matched video");

------

You should be careful when setting up if, else, and else if so that every option works. Here's an example of a bad if-elseif-else:

if (orderedRibs) {
  getABib();
}
else if (orderedSundae) {
  getExtraSpoons();
}
else {
  getSilverware();
}

If you ordered ribs, you should get a bib, but then it doesn't check if you ordered a sundae and should get extra spoons. Also, if people order ribs or a sundae, they won't get normal silverware!

Even though you have both true and false scenarios for orderedRibs and orderedSundae, they're not exclusive and they shouldn't be connected to something universal,

like getting silverware. The program should look like this:

getSilverware();
if (orderedRibs) {
getABib();
}
if (orderedSundae) {
getExtraSpoons();
}

You now understand this programming joke:

A wife asks her husband, a computer programmer; "Could you please go to the store for me and buy one carton of milk, and if they have eggs, get 6!"

A short time later the husband comes back with 6 cartons of milk.

The wife asks him, "Why the hell did you buy 6 cartons of milk?"

He replied, "They had eggs."

-----------

Now let's put real (but not yet finished!!!) code inside the if-else if-else statement:

if (source == "youtube") {
  var myPopcorn = Popcorn.youtube('popcornsite','http://www.youtube.com/watch?v=' + videoID, { width: 480 });
}
else if (source == "vimeo") {
  var myPopcorn =
Popcorn.vimeo('popcornsite', 'http://player.vimeo.com/video/'+ videoID);
}
else {
  document.getElementById('popcornsite').src = videoID;
  var myPopcorn = Popcorn('popcornsite');
}
myPopcorn.play(); // this line doesn't work

Why does the last line, myPopcorn.play(), not work? Even though you created myPopcorn before you ran myPopcorn.play(), there's a major error.

When I create myPopcorn using var myPopcorn, the program needs to make sure that myPopcorn couldn't mean two different variables. The way JavaScript does this is limiting variables to the areas where they are created. So when I create myPopcorn inside the if { }, I told JavaScript that I wouldn't need it outside there. By the time I get to myPopcorn.play(), the program has forgotten about myPopcorn.

This is one of the best reasons to indent every line inside your if{} and else{}. As soon as you go up/left one level, you lose all variables created below/right of that level.

Let's change where we create myPopcorn to be the top-most level:

var myPopcorn;
if (source == "youtube") {
myPopcorn = Popcorn.youtube('popcornsite','http://www.youtube.com/watch?v=' + videoID, { width: 480 });

}
else if (source == "vimeo") {
  myPopcorn =
Popcorn.vimeo('popcornsite', 'http://player.vimeo.com/video/'+ videoID);
}
else {
  document.getElementById('popcornsite').src = videoID;
  myPopcorn = Popcorn('popcornsite');
}