7 Replies Latest reply on Feb 12, 2013 9:44 AM by resdesign

    Adding captions to video file in edge animate

    jakeyboyo

      Any ideas if this is possible? Thanks to heathrowe I have been able to add video to my project but I also need to add text to accompany it (think captions or subtitles). I currently have text appearing and reappearing but it is independent to the video timeline, so if a viewer skips the video the captions do not reappear. Any thoughts or workarounds would be massively helpful as i am very new to edge but eager to do some great motion design

        • 1. Re: Adding captions to video file in edge animate
          Baskeyx

          Hi Jakey,

           

          Have you cracked this?

           

          I think I'm pretty close using a plugin called bubbles.js

           

          I've got the plugin working here.

           

          However when I attempt to install the plugin within edge by placing the following code on the stage compositionReady action it's not working. The function seems to be called, however according to the web inspector the english.srt subtitle file isn't being downloaded, any ideas?

           

          Code:

           

          var vid = $("<video width='640' height='360' id='video-srt' controls=''>" +

             "<source src='test.mp4' type='video/mp4' />" +

             "<source src='http://www.w3schools.com/html5/movie.ogg' type='video/ogg' />" +

             "This browser is not compatible with HTML 5" +

          "</video>");

           

          $.getScript("js/bubbles.js", function() {

                              subtitles_test = new Bubbles.video('video-srt');

           

                              subtitles_test.subtitles( false,

                                        {

                                                  'English' :          {

                                                            language          :          'English',

                                                            file                    :          'subs/english.srt'

                                                  }

                                        }

                              );

          });

           

          sym.$("vcontainer").append(vid);

          • 2. Re: Adding captions to video file in edge animate
            resdesign Adobe Community Professional & MVP

            Have you tried to use track instead? Works with vtt and srt files and playr.js:

            <track label="English subtitles-vtt" kind="subtitles" srclang="en" src="script.vtt" default/>

                    <track label="English subtitles-SubRip" kind="subtitles" srclang="en" src="script.srt" default/>

            • 3. Re: Adding captions to video file in edge animate
              resdesign Adobe Community Professional & MVP

              Here is a link for vtt files but it works the same with srt files:

              http://html5doctor.com/video-subtitling-and-webvtt/

              • 4. Re: Adding captions to video file in edge animate
                Baskeyx Level 1

                Hi resdesign, thanks for the quick reply I wasn't even aware of this feature! I've updated my file but am still having trouble getting the srt file to load within Edge, here's my new code:

                 

                I'm using a slightly different approach by placing this in the header:

                 

                <script src="js/videosub-0.9.9.js"></script>

                 

                This is now my stage compositionReady:

                 

                var vid = $("<video controls='controls' width='320' height='176'>" +

                          "<source src='jellies.mp4' type='video/mp4' />" +

                          "<source src='jellies.ogg' type='video/ogg' />" +

                          "<track src='jellies.srt' kind='subtitle' srclang='en-US' label='English' />" +

                          "Your browser does not support HTML5 video." +

                "</video>");

                 

                sym.$("vcontainer").append(vid);

                 

                Works on its own (as a standalone plugin) here

                 

                But fails to load within the composition here :-/

                • 5. Re: Adding captions to video file in edge animate
                  resdesign Adobe Community Professional & MVP

                  Here is how I append the video to the stage but you can use a container instead.

                   

                  sym.$("#Stage").append('<video id="productVideo" width="840" height="400" preload="none" >'+

                  '<source src="videos/jellies.mp4" type="video/mp4" />'+

                  '<source src="videos/jellies.ogg" type="video/ogg" /> +

                  "<track src='jellies.srt' kind='subtitle' srclang='en-US' label='English' />" +

                  "Your browser does not support HTML5 video." +

                  "</video>");

                  • 6. Re: Adding captions to video file in edge animate
                    Baskeyx Level 1

                    That doesn't seem to be working for me when changed to my div and paths.

                     

                    Have you managed to do this is in the past? or have a working version I can take a look at?

                     

                    Thanks again for the help!

                    • 7. Re: Adding captions to video file in edge animate
                      resdesign Adobe Community Professional & MVP

                      Yes. Wait a few I just deleted my sample and need to recreate it.