Skip to content

Popcorn.js: Pausing video when link is clicked

March 7, 2011

For my second bug for my 0.2 release for OSD600, I decided to find a bug that would allow me to work more with the core of the popcorn code.  So far, I’ve only really worked with plugins and havnt had a chance to hack on any code in the main popcorn.js file.  I was searching through the list of potential bugs and come across this one.  It seemed like a good opportunity to look over the popcorn.js code and begin understand how it works.

Essentially, the bug states that popcorn should have the functionality to pause the video currently playing if the user clicks any of the content that would take them off the current page.  I began thinking as to how I was going to know when a link was clicked, and how that would in turn interact with the video playing.  I remember from INT222 (and I don’t know how) that there was an onclick attribute for links, and what would happen when that link was clicked would be set using onclick.  The next order of business was to find out how to get a list of all the links on the page.  After some searching I found that using document.links would allow me to access any links currently on the page.  After looking at the set of attributes that go along with document.links, I had the idea of iterating through each link on the page using a for loop, and setting the onclick attribute for each link to pause the video.  I began implementing this and ran into a few problems.

My first version of my fix looked something like this:

for ( i = 0; i < document.links.length; i++ ){
document.links[ i ].setAttribute( “onclick”, “Popcorn(‘#video’).pause()” );
}

The problem with this was, that I had to pass code to onclick that would get executed when the link was clicked.  The problem with this was that I couldnt simply do something like, this.video.pause(); because onclick isnt executed inside of popcorn.  The problem with this was, you needed to know the name of the video that you wanted to pause, as in, hardcode the name in.  That was definately not an appropriate fix.  Back to the drawing board.  I needed a way to save the name of the current video, and access that when onclick was stored, without screwing with anything else going on.  I had thoughts of appending the name of the video to the end of the links url, and then removing it if the link was clicked, but then realized that if there was multiple videos running, I could possibly lose track of the names I had appended, so that idea was scratched.  I went back to google searches in order to find some help.  After some more thinking, and a crap ton of searches later, I actually came across a problem with .setAttribute that actually turned out to be a fix for me haha (check it out here).  The problem with setting the code to be executed on onclick, was that, if you didnt pass code in ” “, then it was going to get executed immediately.  This meant that, I could set an attribute that would be part of the current link, that would hold the name of the video that I was currently getting the links for.  Perfect.  After a quick flurry of coding, I had it working.  My final fix for this bug was a staggering 4 lines of code, and boy did it make me proud :D.  Here is what the end product looked like:

for ( i = 0; i < document.links.length; i++ ){
document.links[ i ].setAttribute( “vidId”,  that.video.id);
document.links[ i ].setAttribute( “onclick”, “Popcorn(‘#’+ this.getAttribute(‘vidId’)).pause()” );
}

I basically added this code to a part of popcorn that updated the current time and previous time in the video.  This allowed me to constantly update what links were on the page, as many plugins could be displaying new links at any point in time during the video.

So in general, this bug was on the smaller side of bugs, but really gave me a chance to look over the popcorn.js code and start understanding how stuff was working, how functions were called and so on.  It also serves a pretty cool purpose if I don’t say so myself.

Advertisements

From → school

3 Comments
  1. Well, this is very interesting indeed. Would love to read a little more of this. Nice post. Thanks for the heads-up.

  2. What line or lines did you stick this in?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: