Popcorn slideshow player

From CDOT Wiki
Revision as of 18:01, 11 December 2011 by Dvillase (talk | contribs) (About the Player)
Jump to: navigation, search

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


sdafsadfasfasf

Project Plan & Description

Project Description

Release Download Release Features/Points Addressed
0.1

Project Leader(s)

Releases

Lighthouse Ticket

Project Notes