10 Replies Latest reply on Jul 20, 2010 3:38 PM by leaflashdev

    Close Caption

    leaflashdev Level 1

      Hello ,

       

      I try to use the closeCaption plugin on my project  , I have the flex sample source code.

      But when I try to do that on my project (Flash project ) my close caption doesnt work

       

      Does anyone has a simple example of the closeCaption working in Flash ?

       

      The video is playing but the function showCaption is never call

      captionMetadata.addEventListener(TimelineMetadataEvent.MARKER_TIME_REACHED, onShowCaption);

       

      (its been two days that i am trying to fix that )

       

      Thanks for your help

        • 1. Re: Close Caption
          rshin Level 3

          There is CaptioningSample in the depot if you haven't looked at it yet.  apps > samples > plugins.

          The event should get fired to do your login in "onShowCaption".   Can you post your code?

           

          Ryan

          • 2. Re: Close Caption
            leaflashdev Level 1

            Thank you for your reply

             

            Yes I tried the sample in flex and it works fine

             

            Here is my code

             

                mediaFactory = new MediaFactory();
                loadPlugin("org.osmf.captioning.CaptioningPluginInfo");
                mediaPlayer = new MediaPlayer();
                mediaPlayer.currentTimeUpdateInterval = DEFAULT_PROGRESS_DELAY;
                mediaContainer = new MediaContainer();    

             

                 loadMedia('videos/'+url );             

             

             

            private function loadMedia(url:String):void
                        {
                            var resource:URLResource = new URLResource(url);
                       
                            // Assign to the resource the metadata that indicates that it should have a Timed Text
                            // document applied (and include the URL of that document).
                            var metadata:Metadata = new Metadata();
                                                           
                            metadata.addValue(CaptioningPluginInfo.CAPTIONING_METADATA_KEY_URI, CAPTION_URL);
                            resource.addMetadataValue(CaptioningPluginInfo.CAPTIONING_METADATA_NAMESPACE, metadata);

             

                            var netLoader:NetLoader = new NetLoader();
                            netLoader.addEventListener( LoaderEvent.LOAD_STATE_CHANGE, onLoaderStateChange );
                            videoElement = new VideoElement(resource,  netLoader) ;
                            //    mediaFactory.addItem(new MediaFactoryItem("org.osmf.elements.video", netLoader.canHandleResource, createVideoElement));
                            var mediaElement:MediaElement = videoElement;

             

                            captionMetadata = mediaElement.getMetadata(CaptioningPluginInfo.CAPTIONING_TEMPORAL_METADATA_NAMESPACE) as TimelineMetadata;
                            if (captionMetadata == null)
                            {
                                captionMetadata = new TimelineMetadata(mediaElement);
                                trace('captionMetadata '+ captionMetadata );
                                mediaElement.addMetadata(CaptioningPluginInfo.CAPTIONING_TEMPORAL_METADATA_NAMESPACE, captionMetadata);
                            }
                            captionMetadata.addEventListener(TimelineMetadataEvent.MARKER_TIME_REACHED, onShowCaption);
                            captionMetadata.addEventListener(TimelineMetadataEvent.MARKER_ADD, onHideCaption);

             

                            mediaElement.addEventListener(MediaErrorEvent.MEDIA_ERROR, onMediaError, false, 0, true);
                                           
                            setMediaElement(mediaElement);
                           
                        }

             

             

                        private function setMediaElement(value:MediaElement):void
                        {
                            if (mediaPlayer.media != null)
                            {
                                mediaContainer.removeMediaElement(mediaPlayer.media);
                            }
                           
                            if (value != null)
                            {
                                trace('setmediaeelement '+ value)
                                mediaContainer.addMediaElement(value);
                            }
                                _presentationView.addvideoOnstage(mediaContainer);
                                mediaPlayer.media = value;
                        }

             

                            private function createVideoElement():MediaElement
                        {
                            return new VideoElement();
                        }
                        private function loadPlugin(source:String):void
                        {
                            var pluginResource:MediaResourceBase;
                            if (source.substr(0, 4) == "http" || source.substr(0, 4) == "file")
                            {
                                // This is a URL, create a URLResource
                                pluginResource = new URLResource(source);
                            }
                            else
                            {
                                // Assume this is a class
                                var pluginInfoRef:Class = getDefinitionByName(source) as Class;
                                pluginResource = new PluginInfoResource(new pluginInfoRef);
                            }
                           
                            loadPluginFromResource(pluginResource);
                        }
                        private function loadPluginFromResource(pluginResource:MediaResourceBase):void
                        {
                            mediaFactory.addEventListener(MediaFactoryEvent.PLUGIN_LOAD, onPluginLoaded);
                            mediaFactory.addEventListener(MediaFactoryEvent.PLUGIN_LOAD_ERROR, onPluginLoadFailed);
                            mediaFactory.loadPlugin(pluginResource);
                        }
                       
                        private function onPluginLoaded(event:MediaFactoryEvent):void
                        {
                            trace("Plugin LOADED!");
                        }

             

             

             

             

            I get the  trace("Plugin LOADED!");

             

             

            Thank you very much

            • 3. Re: Close Caption
              leaflashdev Level 1

              any ideas ?

              • 4. Re: Close Caption
                rshin Level 3

                It appears you've created a video element before the MediaFactoryItem is added to MediaFactory.  Did you intentionally comment out adding the MediaFactory Item?

                 

                /////////

                      var netLoader:NetLoader = new NetLoader();
                                netLoader.addEventListener( LoaderEvent.LOAD_STATE_CHANGE, onLoaderStateChange );
                                videoElement = new VideoElement(resource,  netLoader) ;
                                //    mediaFactory.addItem(new MediaFactoryItem("org.osmf.elements.video", netLoader.canHandleResource, createVideoElement));
                                var mediaElement:MediaElement = videoElement;

                /////////////

                 

                Also, is there any reason you wanted to create a videoelement then assigned it to mediaElement later?

                 

                If you create the media element by MediaFactory after adding FactoryItem, it works fine.

                 

                // ///

                 

                    var netLoader:NetLoader = new NetLoader();

                 

                                mediaFactory.addItem(new MediaFactoryItem("org.osmf.elements.video", netLoader.canHandleResource, createVideoElement));

                var mediaElement:MediaElement = mediaFactory.createMediaElement(resource);

                 

                Ryan

                1 person found this helpful
                • 5. Re: Close Caption
                  leaflashdev Level 1

                  Thanks Ryan ,

                   

                  Yes I comment out that because the video is not playing otherwise

                   

                  here is the new code, I follow your advice

                   

                  http://lea.benichou.free.fr/VideoController.as

                   

                  But the video is not playing

                  • 6. Re: Close Caption
                    leaflashdev Level 1

                    and I got those TRACE

                     

                     

                    Plugin LOADED!
                    captionMetadata [object TimelineMetadata]
                    setmediaeelement [object CaptioningProxyElement]

                    • 7. Re: Close Caption
                      rshin Level 3

                      I am not sure what your presentationView does but assume a container that displays video..

                      I suspect that this may be a usage of MediaContainer.  Since you don't seem to use MediaContainerUIComponent, if you want to use "MediaContainer", you'd do something like below to use "MediaContainer", addMediaElement to your container, and assign your element to your mediaPlayer, probably in setMediaElement().

                       

                          public function HelloWorld2()
                              {
                                  // Create the container class that displays the media.
                                   var container:MediaContainer = new MediaContainer();
                                  addChild(container);

                       

                                  // Create the resource to play.
                                  var resource:URLResource = new URLResource("http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.f lv");
                                 
                                  // Create the MediaElement and add it to our container class.
                                  var videoElement:VideoElement =  new VideoElement(resource);
                                  container.addMediaElement(videoElement);
                                 
                                  // Set the MediaElement on a MediaPlayer.  Because autoPlay
                                  // defaults to true, playback begins immediately.
                                  var mediaPlayer:MediaPlayer = new MediaPlayer();
                                  mediaPlayer.media = videoElement;
                              }
                      Ryan

                      • 8. Re: Close Caption
                        leaflashdev Level 1

                        I think I am doing what you said on the setMediaElement function

                         

                            private function setMediaElement(value:MediaElement):void
                                    {
                                           
                                        if (mediaPlayer.media != null)
                                        {
                                            mediaContainer.removeMediaElement(mediaPlayer.media);
                                        }
                                       
                                        if (value != null)
                                        {
                                            trace('setmediaeelement '+ value)
                                            mediaContainer.addMediaElement(value);
                                        }
                                            _presentationView.addvideoOnstage(mediaContainer);
                                            mediaPlayer.media = value;
                                    }

                         

                         

                        The addVideoOnstage its to display

                         

                                public function addvideoOnstage(mediaContainer:*){
                                    _mediaContainer = mediaContainer
                                    flvContainer.addChild(mediaContainer);
                                   
                                    flvContainer.x = model.screenFLVX;
                                    flvContainer.y = model.screenFLVY;
                                   
                                }

                         

                        My question now is do I have to do

                         

                        var videoElement:VideoElement =  new VideoElement(resource);
                        container.addMediaElement(videoElement);

                        (I know that will play the video )

                         

                        or keep those line ?

                         

                        var netLoader:NetLoader = new NetLoader();
                        mediaFactory.addItem(new MediaFactoryItem("org.osmf.elements.video", netLoader.canHandleResource, createVideoElement));
                        var mediaElement:MediaElement = mediaFactory.createMediaElement(resource);

                        (this seems not working  )

                         

                        Thanks

                        • 9. Re: Close Caption
                          rshin Level 3

                          Not sure why videoelement displays not CaptioningProxyElement in your container.  The latter ensures you use CaptioningProxyElement which has Captioning logic implemented.  If you use a simple video element, you'd not likely to get Captioning object working unless you implement on your own.


                          Another possibly way is to create a caption class that extends CaptioningProxyElement,  and a captionEvent that fires an event when caption is requested, where you put your logic to redraw your captioning text on your stage.

                           

                          Ryan

                          • 10. Re: Close Caption
                            leaflashdev Level 1

                            not sure I understand that 


                            but its ok I will figure out and try something else

                             

                            Thanks a lot for your help Ryan