Articles

use youtube videos inside adobe captivate

In adobe captivate, e learning, flash on January 15, 2009 by rajeev kumar Tagged: , ,

for Adobe Captivate 3 users one of the wishes would be how can they insert youtube videos inside their Captivate project file. Here are the ways you can do it.

  • this is based on the documentation YouTube ActionScript 2.0 Player API Reference. Visit this page for some more guidelines about using it for loading multiple videos and unloading etc.
  • Open a flash actionscript 2.0 file. Copy the code from the page mentioned  above under the example section and paste to the flash file you have just created. Make following changes –
    1. var ytplayer:MovieClip = _root.createEmptyMovieClip(“ytplayer”, 1);
      change this line to var ytplayer:MovieClip =  createEmptyMovieClip(“ytplayer”, 1); as captivate gives warning about using _root in the swf being inserted.
    2. go to www.youtube.com and locate the video you want to insert into Captivate project file.
    3. locate the url of that video – it will be in format of http://in.youtube.com/watch?v=SaBb8Wi25Pg
    4. copy the text marked in red – it uniquely identifies  the video on youtube
    5. switch to your actionscript code
    6. Replace the text copied in earlier step 4 with VIDEO_ID in the statement ytPlayerLoader.loadClip(“http://www.youtube.com/v/VIDEO_ID“, ytplayer);
    7. Save the flash file. Publish it to swf. For best results change the document size of flash to 480 x 385 pixels
    8. Open Captivate. Choose Insert – > Animation . Locate the swf file you published in previous step 7 and insert it.
    9. Now insert a button on the same slide so that Captivate movie will pause at that slide till the time user clicks. So that they can view the video before moving to next slide.
    10. Publish the Captivate project and you will see and can play the video

youtube

Pros –

  • totally seamless
  • you need not use those tools to download video files from youtube to your machine and probably face copyright issue
  • no copyright issue as video is being played from youtube site

Cons –

  • You have to manually specify the video ID and regenerate swf before using it in captivate.
  • this is just a proof of concept. It has many bugs like audio not stopping when you move to next slide, video in some stage when you rewind to the slide containing it and possibly many more. But it is all possible by changing the actionscript code by unloading the video properly.
  • you have to add button for slide to pause

ps : watch out for next posts –

  • use flickr apis to create slideshows which fetches data from flickr. Use Flash to create the animation which can be used inside captivate.
  • some improvemets on youtube sample
  • and wait you have a better and elegant solution waiting when Adobe Captivate 4 is released. Update 1 – read step by step guide to create youtube widget for Adobe Captivate 4

Below is the actionscript code for reference –

// create a MovieClip to load the player into
var ytplayer:MovieClip = createEmptyMovieClip(“ytplayer”, 1);

// create a listener object for the MovieClipLoader to use
var ytPlayerLoaderListener:Object = {
  onLoadInit: function() {
    // When the player clip first loads, we start an interval to
    // check for when the player is ready
    this.loadInterval = setInterval(this.checkPlayerLoaded, 250);
  }
};

var loadInterval:Number;
function checkPlayerLoaded():Void {
    // once the player is ready, we can subscribe to events, or in the case of
    // the chromeless player, we could load videos
    if (ytplayer.isPlayerLoaded()) {
        ytplayer.addEventListener(“onStateChange”, onPlayerStateChange);
        ytplayer.addEventListener(“onError”, onPlayerError);
        clearInterval(loadInterval);
    }
}

function onPlayerStateChange(newState:Number) {
    trace(“New player state: “+ newState);
}

function onPlayerError(errorCode:Number) {
    trace(“An error occurred: “+ errorCode);
}

// create a MovieClipLoader to handle the loading of the player
var ytPlayerLoader:MovieClipLoader = new MovieClipLoader();
ytPlayerLoader.addListener(ytPlayerLoaderListener);

// load the player
ytPlayerLoader.loadClip(“http://www.youtube.com/v/iMKGKcxTs6o“, ytplayer);

Advertisements

14 Responses to “use youtube videos inside adobe captivate”

  1. Very technology. I am looking for use it to produce Chinese learning material on my web http://www.chinese-way.com

  2. good use of games created from adobe captivate on your website for learning chinese. I did not realised these games could be used in this way.

    Ping me whenever you need any help.

  3. You mean the Board game? Would you mind telling me more? Thanks.

  4. Thank you so much for the script. I used it successfully for two movie clips I made.
    I want to show two TV intro’s and the youtube streams go longer than I want. In Captivate when it advances to the next slide it plays the audio. Is there a command line to unload the player at a certain time? or stop the player? you mention on your website “But it is all possible by changing the actionscript code by unloading the video properly”

    I did edit the clips but I can’t reload them to youtube because it would be copyright infringement. I need the already loaded youtube videos to play on 30 secs out of a 1.14 min video

    Thank you

  5. Theresa,

    Would APIs like player.getDuration():Number and player.stopVideo():Void help you.
    In OnEnterFrame check for getDuration() and if it exceeds the one you want to stop the video call stopVideo().
    Not sure if it would work or not but going by the functionality looks like it would.

  6. Your blog is very interresting for me, i will come back here..

  7. I would like some help with this. May I contact you?

  8. Rajeev,
    Your posting was very helpful for a non-programmer such as I, and it works great. I am doing a project in captivate that requires me to embed bnet videos, and I am having a hard time modifying your widget to load the videos.
    bnet.com, gives you the following code to embed video:

    Can I use your youtube widget and just replace the appropriate code or do I need to create a new widget all together. I have been trying to get some assistance for it but can’t find it anywhere. Any assistance would be appreciated.
    Thanks,
    Sandra

  9. Sandra,

    the code snippet you mentioned for bnet is missing in the comment. The code snippet might be for html files. If it is supported in flash files than probably you can try to write a new widget. Modifying the current widget might not help fully as the APIs will be different for bnet if at all it supports flash.

    Thanks,
    Rajeev

  10. Do you ever feel like you need to get in touch with the universe/nature and if yes, how do you go about doing so?

  11. Hello, just wanted to say, I liked this article. It
    was helpful. Keep on posting!

  12. I actually desired to show this article, “use youtube videos inside adobe captivate rajeev kumar , technology and life”
    with my personal friends on facebook .com. I reallybasically desired to pass on your outstanding posting!

    Regards, Justine

  13. Way cool! Some very valid points! I appreciate you penning this
    write-up and also the rest of the site is extremely good.

  14. Magnificent beat ! I wish to apprentice even as you amend your
    site, how could i subscribe for a blog web site? The account aided me a appropriate deal.

    I had been tiny bit acquainted of this your broadcast offered brilliant transparent concept

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: