Create your own youtube + slideshare presentation with popcorn.js.
I created a demo of youtube + slideshare presentation quite a long ago. Many asked me to explain how to do it. Specially this guy Michael Britt So here it is.
First of all some basics about popcorn.js. As given on their website -
Popcorn.js is an HTML5 media framework written in JavaScript for filmmakers, web developers, and anyone who wants to create time-based interactive media on the web. Popcorn.js is part of Mozilla's Popcorn project.Now the presentation.
What to do?
We are gonna synchronize the youtube video hosted on youtube.com with slideshare presentation hosted on slideshare.net. We'll specify for what duration which slide to be opened?
How?
Youtube and slideshare give the facility to embed the videos and presentations hosted on their sites respectively on our webpage. Popcorn.js has youtube player which enables synchronizing youtube video to run the jobs specified in plugins. Slideshare player API let us jump to any slide we want using jumpTo function in API. (Slideshare player API)
popcorn.js has many plugins for some of the popular websites like facebook, twitter, flicker, etc. The one we are using is a "code" plugin. This plugin let us run the javascript code on the same page when the specified video duration is reached.
So lets start..
First we have to add the youtube video and slideshare presentation. Remember we are not gonna use youtube embed player instead we will be using popcorn.js youtube player to embed the video so that we can monitor the video duration.
add script to the head section of code.
JavaScript
<script type="text/javascript" src="http://popcornjs.org/code/dist/popcorn-complete.min.js"> </script>
Now following code will embed the youtube player with given link to the page
JavaScript
<script type="text/javascript">
// ensure the web page (DOM) has loaded
document.addEventListener("DOMContentLoaded", function () {
var vstart=1;
// Create a popcorn instance by calling the Youtube player plugin
var example = Popcorn.youtube(
'#video',
'http://www.youtube.com/watch?v=Zm1c2WTD93w&rel=0' );
example.play();
});
</script>
Code Description
1st line with a eventlistner ensures that the video has been loaded. After that the function starts. Here we are creating a popcorn instance by calling youtube player plugin. The plugin has 2 necessary attributes - id and link. id attribute specifies the id of the page element where the player will be embedded. In our case we have a div tag with id - video. Hence first attribute #video and second attribute is a link to the youtube video that has to be embed.
To start the video we must use the event "play" instance_name.play(). In our case example.play().
Now let us add slideshare presentation with slideshare player api.
JavaScript
<script type="text/javascript">
var flashMovie;
//Load the flash player. Properties for the player can be changed here.
function loadPlayer() {
//allowScriptAccess from other domains
var params = { allowScriptAccess: "always" };
var atts = { id: "player" };
//doc: The path of the file to be used
//startSlide: The number of the slide to start from
/*rel: Whether to show a screen with related slideshows
at the end or not. 0 means false and 1 is true.. */
var flashvars = { doc : "linux-100419010247-phpapp01", startSlide : 1, rel : 0 };
//Generate the embed SWF file
swfobject.embedSWF("http://static.slidesharecdn.com/swf/ssplayer2.swf", "player", "598", "480", "8", null, flashvars, params, atts);
//Get a reference to the player
flashMovie = document.getElementById("player");
}
//Jump to the appropriate slide
function jumpTo() {
flashMovie.jumpTo(parseInt(document.getElementById("slidenumber").value));
}
//Update the slide number in the field for the same
function updateSlideNumber() {
document.getElementById("slidenumber").value = flashMovie.getCurrentSlide();
}
</script>
Code description
This code will embed the slideshare player with specified ppt in the code by the attribute flashvars.
Most of the attributes and functions in the code are self explanatory. The one which is hard to extract from a slides is a "doc" attribute of flashvar variable in code. It is the path of the file to be used but this path is not a link to that presentation. It can be extracted by a simple json request as follows.
http://www.slideshare.net/api/oembed/2?url=http://www.slideshare.net/haraldf/business-quotes-for-2011&format=json
This link will give a json formatted response in which a attribute named "slide_image_baseurl" gives a value like this.
//image.slidesharecdn.com/110103quotes2010-12-110103073149-phpapp01/95/slide-
When you trim down "//image.slidesharecdn.com/" this part and "/95/slide-" this part you will get the value for doc variable.The function jumpTo()is the function which will when called with a slidenumber shows the specified slide. So in our code plugin we will be calling this function to change the slide. The updateSlideNumber() will update the changed slide number.
Now the code plugin.
According to its description on popcornjs.org
Allows for the ability to run arbitrary code ( JavaScript functions ) according to video timing.so we will be using this plugin to call our slideshare player functions.
The plugin has following attributes that we will be using in our code. You can read about other options on http://popcornjs.org/popcorn-docs/plugins/ .
Start : Start of plugin working.
End : End of plugin working.
OnStart : The function to call on starting of the code plugin.
OnEnd : The function to call on end of the code plugin.
Here When I was making this demo I wanted to change my slides on 2nd and 5th sec of the video to the 2nd and 3rd slide so what I did is simply add this code to the function we called on the "DOMContentLoaded" event.
JavaScript
example.code({
start: 2,
end: 5,
onStart: function() {
flashMovie.jumpTo("2");
},
onEnd: function() {
flashMovie.jumpTo("3");
}
});
For other slides I simple added more "code" plugin options. Thats it. Some space for both players on the page using simple table and my video + slides presentation is ready. You can have a look on the demo here. If any questions feel free to ask.
