Video captioning made easy with the YouTube JavaScript API

14 Responses to “Video captioning made easy with the YouTube JavaScript API”

1. stefield Says:
   March 12th, 2008 at 7:18 pm

   Does this mean I can create my gallery of Britney Spears nipple slip videos then?

   It’d be cool if you grab the frame at pause point as an image to quickly create a slide show too.

2. Marin Says:
   March 12th, 2008 at 10:19 pm

   Ho man, that will make the transcription works so easy :)

   Finally we have an easy way of providing skiplinks and alternative content for those (sometimes not so) interesting movies

3. diana Says:
   March 13th, 2008 at 9:22 am

   it doesn’t work for me, not in Opera, nor in Firefox??

4. this field is required Says:
   March 16th, 2008 at 10:21 pm

   > One thing that has been annoying me for ages is that no video player on the web allows you to write comments for a specific time in the video that get displayed as plain text. Viddler allows you to comment at a certain time and it appears in the video, but the benefits of time based captioning both in terms of accessibility and SEO didn’t quite transpire to any video site maintainers yet.

   Are you retarded? “No one does X. Y does X.” We should also not forget http://en.wikipedia.org/wiki/Nico_Nico_Douga which is nearly completely devoted to having text overlayed on video at specific times even if it does normally consist of??????????????or ?????????.

   Edit: Good information. Bad style. Thanks anyways.

5. Thom Shannon Says:
   March 17th, 2008 at 4:00 pm

   @”a brain is required”

   I think you missed the point, what Chris was saying is “No one does X. Y almost does X but not quite”. He said no video sites appear to make the comments available in the source for SEO, Screenreaders and other such things. Nico may have the comments in the source but you have to login so it’s certainly not search engine friendly! (Viddler do actually seem to write time coded comments out below the video though)

6. Sarah Bourne Says:
   March 18th, 2008 at 7:01 pm

   I recently came across this site, free for now anyway, that not only has a widget for captioning, but lets other folks in on the fun by letting them add transcriptions in other languages: http://www.dotsub.com/ It looks like it uses a very similar approach to yours, but then again, how many different ways could there be? But a “poor man’s” YouTube API would be wicked awesome (note the local dialect!) – it would solve some accessibility issues we’re struggling with here in Massachusetts.

7. Carlos Says:
   March 19th, 2008 at 9:13 am

   The only thing I get when I click on the “give me the transcript” button is a dialog box asking me to save or open a json file. Is there something I’m missing?

8. diana Says:
   April 9th, 2008 at 1:11 pm

   @Carlos: I have the same prob

9. Chris Says:
   April 9th, 2008 at 1:26 pm

   @carlos, diana: This is what it is for now. I am trying to work out a player for it, but haven’t come around to that yet.

10. Bill Says:
    July 22nd, 2008 at 11:07 pm

    Anxiously awaiting more….

11. hernan Says:
    October 10th, 2008 at 7:54 pm

    Check out this implementation of youtube api for subtitles:

    http://www.captiongrabber.com

12. harald Says:
    November 14th, 2008 at 6:22 pm

    i need such thing for “google videos”. do you have one?

13. mk Says:
    April 20th, 2009 at 11:55 am

    Hi!
    I’m not an expert about js and youtub api! :(
    I’m seeing your script, showed here:
    http://icant.co.uk/sandbox/youtube-captioning.html

    I want to use your same structure but I want to load all functions and objects needed after an event like a click on a link, so onclick=”javascript:loadPlayer()”;

    My function is:
    function caricaPlayer(){
    var vid = document.createElement(‘div’);
    vid.id=’videoForm’;
    vid.setAttribute(’style’,'float:left; margin: 4px;’);

    var env_var = document.createElement(‘input’);
    env_var.type = ‘hidden’;
    env_var.name = ‘objuri’;

    var script_header = document.createElement(’script’);
    script_header.type = ‘text/javascript’;
    script_header.src = ‘http://swfobject.googlecode.com/svn/tags/rc3/
    swfobject/src/swfobject.js’;

    var script_header2 = document.createElement(’script’);
    script_header2.type = ‘text/javascript’;
    script_header2.src = ‘http://lamp.local/madcow_bk/videoCMD.js’;

    var div_video = document.createElement(‘div’);
    div_video.id = ‘ytapiplayer’;
    div_video.innerHTML = \” You need Flash player 8+ and JavaScript enabled
    to view this video.\”;

    document.documentElement.getElementsByTagName(‘HEAD’)⁰.appendChild
    (script_header);
    vid.appendChild(div_video);
    vid.appendChild(script_header2);
    vid.appendChild(env_var);
    vid.innerHTML += \”Player state: –\”;
    vid.innerHTML += \”Play | Pause | Stop | Mute | Unmute |\”;
    document.body.appendChild(vid);
    }

    videoCMD.js contains all functions and the script that has to start the player:

    var params = {allowScriptAccess:”always”};
    var atts = {id:”myytplayer”};
    swfobject.embedSWF(“http://www.youtube.com/v/
    T4y6M2AeQ00&border=0&enablejsapi=1&playerapiid=ytplayer”,
    “ytapiplayer”, “425″, “356″, “8″, null, null, params, atts);

    So I can see the command link like play, stop, ecc…
    but in firebugs js error I read
    “ytplayer is not defined
    if (ytplayer) {“

    Why?
    The player doesen’t start because whan I click I read the div message:
    “You need Flash player 8+ and JavaScript enabled to view this video.” but it diseppear in some second without showing the video! :(

    Can you help me?
    Thank’s

    Mk

14. Mirko Says:
    December 7th, 2009 at 5:50 pm

    Would you mind sharing your PHP code too? Does it require a backend DB or could one do without one too?
    Thanks!

Leave a Reply