Difference between revisions of "Popcorn slideshow player"

From CDOT Wiki
Jump to: navigation, search
(About the Player)
(About the Player)
Line 48: Line 48:
 
         wmode: 'transparent'
 
         wmode: 'transparent'
 
       };
 
       };
     swfobject.embedSWF( "http://static.slidesharecdn.com/swf/ssplayer2.swf", containerId, self.offsetWidth, self.offsetHeight, "9.0.0", "expressInstall.swf", flashvars, params, attributes );
+
     swfobject.embedSWF( "http://static.slidesharecdn.com/swf/ssplayer2.swf",
 +
    containerId, self.offsetWidth, self.offsetHeight, "9.0.0", "expressInstall.swf",
 +
    flashvars, params, attributes );
 
     }
 
     }
  

Revision as of 16:57, 11 December 2011

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)

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.

*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 in that it requires a few more parameters to be set.

To embed the slideshow player the following code is used:

   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, attributes );
   }

Project Plan & Description

Project Description

Release Download Release Features/Points Addressed
0.1

Project Leader(s)

Releases

Lighthouse Ticket

Project Notes