Popcorn slideshow player

Project Name

Popcorn Slideshow PLayer - This is a slideshow player for Popcorn. It will run slideshows created and/or uploaded to Slideshare. The slideshows will work with popcorn events.

Requirements for working with this project

The following steps are required to work on this project.

github Link - Connect to this github repo and fork a copy to your github account.

Coding and editing the .js file can be done with notepad++, Sublime, Textpad or most any text editor. However, to test whether your code works, the entire popcorn directory you cloned as well as the slideshow.js file you worked on will need to be uploaded and run from a web server as the flash events will not execute due to Flash's security model.

About the Player

The player itself is just a modified version of the vimeo player for popcorn and essentially works the same way. When invoked from an HTML file, the javascript file needs to be passed a URL file that points to the slideshow. The player will then embed the slideshow to the HTML file while adding popcorn events to the slideshow much like the other players. The key difference in this case, is that being a slideshow, the passage of time will not trigger the popcorn event but going through each slide (ie: in a video player at a minute and a half into playing the video a popcorn event gets triggered, in the slideshow player, hitting slide 20 will trigger the popcorn event.)

The application runs in two parts (although at the time of writing there is still a number of components that need to be figured out)

Loading the Slideshow

The first part handles the loading and embedding of the slideshow player. This is done by setting parameters and calling swfobject which is a tool that embeds flash objects into web pages. The swfobject is obtained by running Popcorn's getScript method and passing the url where the swfobject javascript file is located.

- Popcorn.getScript( "http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" );

*Important: In the slideshare webpage there is documentation on how to invoke the swfobject in order to embed the slideshow, popcorn works slightly differently from this however in that it requires a few more parameters to be set.

To embed the slideshow player the following code is used, this is essentially the same method used by the youtube and vimeo players to embed their flash players:

   function makeSwf( self, slideId, containerId ) {
   
     if ( !window.swfobject ) {
       setTimeout( function() {
         makeSwf( self, slideId, containerId );
       }, 1);
       return;
     }
     var params,
         flashvars,
         attributes = {};
     flashvars = {
       doc : slideId,
       show_portrait: 1,
       show_byline: 1,
       show_title: 1,
       js_api: 1,
       js_onLoad: 'Popcorn.slideshow.onLoad',
       js_swf_id: containerId
     };
     params = {
       allowscriptaccess: 'always',
       allowfullscreen: 'true',
       wmode: 'transparent'
     };
    swfobject.embedSWF( "http://static.slidesharecdn.com/swf/ssplayer2.swf",
    containerId, self.offsetWidth, self.offsetHeight, "9.0.0", "expressInstall.swf",
    flashvars, params);
   }

A breakdown and explanation of the various parameters of swfobject are as follows:

"http://static.slidesharecdn.com/swf/ssplayer2.swf" - This is the url of the slideshow player for the flash oejbect that plays the slideshare slides

self.offsetWidth, self.offsetHeight - These set the size, in X/Y pixel values, of the slideshow player to be displayed.

expressInstall.swf - this is the flash player that is embedded and runs the slideshow player.

flashvars - These are the parameters that are set for the flash player to run the slide. This includes the name of the slideshow to be played, settings to display a title and the popcorn method to be called for loading the slideshow.

params - parameters on how the slideshow player will behave. In this case, the slideshow player allows for full screen display of the slideshow player.

Project Plan & Description

Project Description

Release	Download Release	Features/Points Addressed
0.1

Project Leader(s)

• Rueen Fiez (rueen) Rueen's blog - (Point of Contact)
• Vincent Lam (vlam6) Vince's blog
• Armen Zambrano (armenzg) Armen's blog about the project