EasyCaptions

33 Replies to “EasyCaptions”

1. Pingback: pipwerks » For Your Reading Pleasure: EasyCaptions

2. Awesome!! This is perfect for a project I’m working on.

   Question: Is there a way to link to specific time within the ogg, Creating an index of the movie, in html5?

3. The transcript feature can do that for you. Just use index text instead of caption text, such as

   
   
       
   
           
   Introduction 
           
   Scene One 
           
   Scene Two 
       
   
   

   The EasyCaptions code should then point to the div containing your index

   var easy = new EasyCaptions({
       videoElementID: "myVideoID",
       transcriptElementID: "index",
       enableCaptions: false
   });
   

   If you want to do it without using EasyCaptions, I suggest reading up on HTML5 video’s currentTime property

4. I’m doing something wrong as I cannot get the video to play in Firefox or IE (All good in Chrome, Opera, and Safari). When I add the second var is when I seem to start having problems. If you have any suggestions I would really appreciate it. Thank you so much!

   
   /* --- For JW Media Player's caption handling ---
   The following code is specific to JW Media Player.
   You could replace with something else if you
   prefer other Flash video players.
   */
   function playerReady(obj){
   	document.getElementById(obj.id).addModelListener("TIME", "jw_timeupdateHandler");
   }
   
   var jw_timeupdateHandler;
   /* --- END JW Media Player code --- */
   
   
   window.onload = function (){
   
   	var easy = new EasyCaptions({
   		videoElementID: "video-html5",
   		transcriptElementID: "transcript",
   		transcriptEnabledClass: "enabled"
   	});
   
   	var easy = new EasyCaptions({
   		videoElementID: "video-html5",
   		transcriptElementID: "cues",
   		transcriptEnabledClass: false
   	});	
   	
   	easy.addFallback({
   		 
   		 elementID: "video-swf",
   		 
   		 captionHandler: function (video, updateCaption){
   			//Nothing needed here; we're using 
   			//JW Media Player's "playerReady" function
   		 },
   		 
   		 transcriptHandler: function (video, position){
   			 
   			//The following code is specific to JW Media Player.
   			//You could replace with something else if you
   			//prefer other Flash video players.
   			
   			//Ensure video is playing before trying to SEEK
   			if(video.getConfig().state !== "PLAYING"){
   				video.sendEvent("PLAY", "true");				
   			}
   
   			video.sendEvent('SEEK', position);
   			
   		 }
   		 
   	});
   
   
   	//Set up Flash fallback handler. 
   	//The following code is specific to JW Media Player.
   	//You could replace with something else if you
   	//prefer other Flash video players.	
   	jw_timeupdateHandler = function (video){
   		easy.updateCaption(parseInt(video.position, 10));
   	};
   	/*	Progressive enhancement BONUS: 
   		Add notice to transcript letting people know it's clickable  */
   		
   	if(easy.transcript_element){	
   		var target_el = easy.transcript_element.getElementsByTagName("h3")[0].nextSibling;
   		var new_el = document.createElement("h4");
   		new_el.innerHTML = "The following transcript is clickable. Click on any sentence to jump to that point in the video.";
   		easy.transcript_element.insertBefore(new_el, target_el);
   	}
   
    
   
   };
   
   

   Interview

   TITLE
   Introduction to interview……….. Dean Ornish shares new research that shows how adopting healthy lifestyle habits can affect a person at a genetic level. For instance, he says, whIn this a en you live healthier, eat better, exercise, and love more, your brain cells actually increase.

   Click to section:

   Inroductions
   Section 1
   Section 2
   Section 3

   Transcript:

   One way to change our genes is to make new ones,
   as Craig Venter has so elegantly shown.
   Another is to change our lifestyles.
   And what we’re learning is how powerful and dynamic these changes can be,
   that you don’t have to wait very long to see the benefits.
   When you eat healthier, manage stress, exercise and love more,
   your brain actually gets more blood flow and more oxygen.
   But more than that, your brain gets measurably bigger.
   Things that were thought impossible just a few years ago
   can actually be measured now.
   This was figured out by Robin Williams
   a few years before the rest of us.

   Now, there’s some things that you can do
   to make your brain grow new brain cells.
   Some of my favorite things, like chocolate and tea, blueberries,
   alcohol in moderation, stress management
   and canabanoids found in marijuana.
   I’m just the messenger.
   (Laughter)
   What were we just talking about?
   (Laughter)
   And other things that can make it worse,
   that can cause you to lose brain cells.
   The usual suspects, like saturated fat and sugar,
   nicotine, opiates, cocaine, too much alcohol and chronic stress.

   Your skin gets more blood flow when you change your lifestyle,
   so you age less quickly, your skin doesn’t wrinkle as much.
   Your heart gets more blood flow.
   We’ve shown that you can actually reverse heart disease.
   That these clogged arteries that you see on the upper left,
   after only a year become measurably less clogged.
   And the cardiac PET scan shown on the lower left,
   the blue means no blood flow.
   A year later — orange and white is maximum blood flow.
   We’ve shown you may be able to stop and reverse the progression
   of early prostate cancer and, by extension, breast cancer,
   simply by making these changes.
   We’ve found that tumor growth in vitro was inhibited
   70 percent in the group that made these changes,
   whereas only nine percent in the comparison group.

   These differences were highly significant.
   Even your sexual organs get more blood flow,
   so you increase sexual potency.
   One of the most effective anti-smoking ads was done
   by the Department of Health Services,
   showing that nicotine, which constricts your arteries,
   can cause a heart attack or a stroke,
   but it also causes impotence.
   Half of guys who smoke are impotent.
   How sexy is that?

   Now we’re also about to publish a study —
   a study showing you can change gene expression in men with prostate cancer
   This is what’s called a heat map
   and the different colors, and along the side on the right are different genes
   And we found that over 500 genes were favorably changed
   in effect turning on the good genes, the disease-preventing genes
   turning off the disease-promoting genes.

   And so these findings I think are really very powerful
   giving many people new hope and new choices
   And companies like Navigenix and DNA Direct and 23andMe,
   that are giving you your genetic profiles,
   are giving some people a sense of, “Gosh, well what can I do about it?”
   Well, our genes are not our fate, and if we make these changes —
   they’re a predisposition, but if we make bigger changes
   than we might have made otherwise
   we can actually change how our genes are expressed.
   Thank you.
   (Applause)

   Your browser doesn’t support HTML5 video (MP4 or OGG) and doesn’t have Flash Player.
   While you won’t be able to watch the video in your browser, we’ve provided a transcript of the entire video so you won’t be missing out on any important information.
   You can also download the video and view it using your media player of choice:

   Download MP4 version.
   Download OGG version.
   Download FLV version.

   This site works best in Firefox & Chrome.
    

5. Oh I wasn’t thinking! Can I send you the file?

6. @jeannine i can’t guarantee i’ll have time to look at it, but if you post a link to your file i’ll try and take a look

   EDIT: i think i see your error. you’re confusing transcriptEnabledClass with enableTranscript. double-check their meanings in the docs (posted above). transcriptEnabledClass takes a string as an argument while enableTranscript takes a boolean.

7. Thanks! If you have a chance to look at it that would be great!

   Here is a url to one of my pages where I’m utilizing easy captions: http://jukebox.uaf.edu/site/railroads/interviews/H86-27

   a copy of the xslt & js files: http://jukebox.uaf.edu/site/help.zipx

   Currently it works great in chrome but not in firefox.

8. Never mind it turns out it was a server setting! I didn’t realize servers aren’t able to handle ogg by default.

9. @jeannine yeah, be sure to check your server’s mime settings! if ogv isn’t specified, the file won’t be served correctly. same goes for other file formats, like m4v and flv. glad you got it sorted out.

10. In
    http://lab.pipwerks.com/video/easycaptions/TED/flash-only-swfobject.html
    line #45
    elementID: “video”,

    seems to me to prove that if videoElementID is not supplied the fallback will still function (assuming it is configured properly).

    Am I right? Thanks for re-opening comments for EasyCaptions.

11. @john in this case, elementID: “video” is referencing an object element with the ID “video” (not a video element). If the elementID is not supplied, or if it’s invalid (doesn’t match an actual element on your page), the addFallback function will silently fail.

12. People using EasyCaptions may be interested in trying the free (GPLed) Advene software ( http://www.advene.org/ ) to generate the timestamped data: Advene offers many ways to annotate videos with timestamped data (through video bookmarks, note-taking while watching the video, importing from many others formats such as srt…), and thereafter to generate files based on this timestamp data through templates. So just define your template once, and easily generate your easycaption data.

    You can see an example of generated data (and download the original data file) at http://liris.cnrs.fr/advene/examples/tbl_linked_data_html5/index.html for instance. For fun, note that the textual Summary actually drives the video player to play a new montage of the video.

13. I am making a little perl script to convert srt to EasyCaptions format available at
    http://silvervalleyreview.com/se_filters/srt2ezcaps.zip
    I tested it with windows and linux output srt files, on linux and windows.

    I have not tested with output from a native mac subtitle editor, nor any that are java based. A prototype of this script has been tested on a mac.

    Anyone who cares to share a sample srt file output from native mac or java based subtitle editors is invited to send it to

    jbdough (at) gmail (dot) com

14. @john thanks for sharing

15. Hi Philip,

    Is it possible to use easycaptions with an embedded video from youtube?

    1. yes, you’d just need to use the YouTube Player API for querying and controlling the video.

16. Is there any way to stop the playback using data-end tag in addition to data-begin tag?
    Thanks!

17. @sk not sure what you mean… stop the video from playing? you’d need to refer to your player’s API to handle stopping a video. for HTML5, you’d use the video.pause() method. see Opera’s site for a nice overview of HTML5 video scripting.

18. instead of data-begin tag can i usen timestamp to make interacive transcript.

    1. @karuppu sure, you’d just need to modify the code to look for timestamp instead of data-begin

19. Hi Philip
    I am kind of stuck making EasyCaptions work with jwplayer version 6.

    How do I get what would be the callback function to work with how jwplayer now handles fallback itself, instead of embedding the swfobject like your examples ?

    I’m trying to do this with a youtube stream. Thanks!

20. @john I haven’t tried JW Player 6, but after a quick peek at the API, this should work (or point you in the right direction). It’s untested, so please let me know if it works.

    The code shown below was written to replace the JavaScript found in this example: http://lab.pipwerks.com/video/easycaptions/TED/flash-fallback.html

    /* The following code is specific to JW Player 6. */
    
    jwplayer().onReady(function(){
        
        var easy = new EasyCaptions({
            videoElementID: "video-html5",
            transcriptElementID: "transcript",
            transcriptEnabledClass: "enabled"
        });
    
        easy.addFallback({
             
             elementID: "video-swf",
             
             captionHandler: function (video, updateCaption){
                //Nothing needed here; we're using 
                //JW Media Player's "playerReady" function
             },
             
             transcriptHandler: function (video, position){
                            
                //Ensure video is playing before trying to SEEK
                if(jwplayer().getState() !== "PLAYING"){
                    jwplayer().play(true);                
                }
    
                jwplayer().seek(position);
                
             }
             
        });
    
        //update caption whenever the playback position gets updated
        jwplayer().onTime(function (ev){
            easy.updateCaption(parseInt(ev.position, 10));
        });
        
    });
    

21. thanks Philip – look at what I have when you get the chance –
    I basically defined the var callback the same old way, and then

    
        jwplayer('video').setup({
            file: 'http://www.youtube.com/watch?v=N76ByvA25ag',
    	image: 'shot0001.png',
            width: '420',
            height: '315'
        });
        jwplayer().onReady(callback);
    
    

    I know the onReady is firing because the styling onHover and the clickable notice appears. Now to debug – maybe it has something to do with playerReady being deprecated.

22. @john your code is not taking into account the jwplayer API changes, as outlined in my code sample above (eg jwplayer().getState() replacing video.getConfig().state). Have you tried using the code I supplied?

23. breaks it – no styling appears, no clickable notice . I think we’re on the right track though. Just how to implement …

24. It works!!
    Sorry Philip, I blew it pasting
    
jwplayer().onTime(function (ev){
easy.updateCaption(parseInt(ev.position, 10));
});

    I messed up on that last bracket-paren-semicolon with what was there before.

25. Hi philip, is there any tool to make an easycaption for video or audio files in windows.

    1. not that i’m aware of

26. Hi, just came across this great source and doing some testing. Should enableCaptions: false work with the video plus flash (fallback) version? I can’t get the the captions to not appear with this demo.

27. @chris yes, it should work. i haven’t tried it for a while, so i’ll have to test.

28. Hi, I would like to ask if Easycaptions could involuntarily highlight the text from the transcript while playing the related video or audio? Below is an example:
    http://www.subply.com/en/Products/InterActiveTranscript.htm

    Thanks and I am grateful for developing EasyCaptions!

    1. @anthony The EasyCaptions code is not configured to handle your use case, but it can be added pretty easily. I don’t have time to play with it this week, but if you submit a feature request on GitHub I will try to get to it when I have time.

29. Thanks, I appreciate the quick reply! I’ve submitted an Issue on Github instead of Pull Request because I am not familiar in using Github.

Comments are closed.