Difference between revisions of "Popcorn slideshow player"
(→About the Player) |
(→About the Player) |
||
Line 31: | Line 31: | ||
return; | return; | ||
} | } | ||
− | |||
var params, | var params, | ||
flashvars, | flashvars, | ||
attributes = {}; | attributes = {}; | ||
− | |||
flashvars = { | flashvars = { | ||
doc : slideId, | doc : slideId, | ||
Line 41: | Line 39: | ||
show_byline: 1, | show_byline: 1, | ||
show_title: 1, | show_title: 1, | ||
− | |||
js_api: 1, | js_api: 1, | ||
− | |||
js_onLoad: 'Popcorn.slideshow.onLoad', | js_onLoad: 'Popcorn.slideshow.onLoad', | ||
− | |||
js_swf_id: containerId | js_swf_id: containerId | ||
}; | }; | ||
Line 51: | Line 46: | ||
allowscriptaccess: 'always', | allowscriptaccess: 'always', | ||
allowfullscreen: 'true', | allowfullscreen: 'true', | ||
− | |||
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
Contents
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)
- Rueen Fiez (rueen) Rueen's blog - (Point of Contact)
- Vincent Lam (vlam6) Vince's blog
- Armen Zambrano (armenzg) Armen's blog about the project