Saturday, December 29, 2012

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.

2 comments: