4 Replies Latest reply on Mar 24, 2010 3:37 AM by Edwin van Rijkom

    HtmlMediaContainer help

    codingNub Level 1

      I'm having some trouble implementing an HTMLMediaContainer.  The example HTMLMediaContainerSample works fine but the implementation is different than how I'm creating my player.

       

      The fiest difference is I am using MediaPlayerSprite to add the mediaElements to. Then I create a MediaPlayer that  points to the MediaPlayerSprite.

       

      _player = new MediaPlayer();
      _player.media
                               = controlBar.element
                               = _sprite.mediaElement;
      

       

      In creating my htmlContainer code I'm doing this.

       

      var htmlContainer:HTMLMediaContainer = new HTMLMediaContainer('bannerContainer');
      var rootElement:ParallelElement = new ParallelElement();
                          
      var banner:HTMLElement = new HTMLElement();
      banner.resource = new URLResource(new URL(BANNER_1));
      rootElement.addChild(banner);
      _container.addMediaElement(rootElement);
      htmlContainer.addMediaElement(banner);
      _player.media = rootElement;
      

       

      I wasn't using the MediaContainer before as I was attaching a MediaPlayerSprite to a flex UI component.  My banner is being loaded from a VAST ad but for testing purposes I'm using the link from the example.

       

      private static const BANNER_1:String
                     = "http://www.iab.net/media/image/468x60.gif";
      

       

      When I run the app I can see the java traces coming back.

       

      JavaScript says: Container bannerContainer added.
      JavaScript says: element_0 added.
      JavaScript says: url http://www.iab.net/media/image/468x60.gif
      JavaScript says: element_0 loading.
      JavaScript says: activeBanner [object Object]
      

       

      If I try and trace the activebanner element the code seems to break right there.

       

      osmf.trace("**bannerImage** " + bannerImage);
      

       

      I have the bannerImage in a div like the example.

       

      <div id="bannerRegion">
           <img id="bannerImage" src="" alt="banner" name="banner">
      </div>
      

       

      Another difference is I am using the flashembed tool instead of swfobject, not sure if that would be an issue.  Another issue I have is in an external playlist when I select a new movie I get an externalInterface error in flex.

       

      Error: A container by the name of vid_player_bannerContainer has already been registered.
      

       

      Any help is appreciated!

       

      Thanks,

      evan

        • 1. Re: HtmlMediaContainer help
          Edwin van Rijkom Level 2

          The last error indicates that another instance of HTMLMediaContainer with the id "bannerContainer" is still around while a new instance is being created. Since the ID needs to be unique, this throws an error. Somehow, I think your code hits the "new HTMLMediaContainer(....)" part of your code when you process your playlist?

           

          From the traces, it looks llike the URL has been passed from AS to JS correctly. How do things break on issuing the trace statement: do you get an error?

          • 2. Re: HtmlMediaContainer help
            codingNub Level 1

            I'm creating the htmlContainer when the video player realizes it has a companion ad. If I select a new video from an html playlist this function gets called again. I notice in the example it switches the ad in the javascript, how can I tell the container to load a new ad instead of recreating it?

             

            I don't get an error with the trace in java script.  It just stops at that line and outputs nothing, where I'm trying to trace  osmf.trace(bannerImage).  The code stops on this line.

             

            bannerImage.src = url;
            

             

            Now if I add this to the top of the function onHTMLMediaContainerConstructed to declare that variable point to the htmlElement like so (not sure why the example works without this?).

             

            var bannerImage = document['bannerImage'];
            

             

            I see more traces..

             

            JavaScript says: Container bannerContainer added.
            JavaScript says: element_0 added.
            JavaScript says: url http://www.iab.net/media/image/468x60.gif
            JavaScript says: element_0 loading.
            JavaScript says: activeBanner [object Object]
            JavaScript says: **bannerImage** [object HTMLImageElement]
            JavaScript says: element_0 UNloading.
            

             

            I then get an erro in flash on the url.

             

            Error: ReferenceError: url is not defined
                 at flash.external::ExternalInterface$/_toAS()
                 at flash.external::ExternalInterface$/call()
            

             

            I just realized after I stop debug mode in flex the banner appears with the reference to... added

             

            var bannerImage = document['bannerImage'];

             

             

            thanks,

            evan

            • 3. Re: HtmlMediaContainer help
              codingNub Level 1

              I commented out  element.unload = function(), that takes away the url error.  Think the same thing is happening with the url variable that's happening with the bannerImage.  So now if i add

               

              var url = null;
              

               

              at the beginning of the onHTMLMediaContainerConstructed function I can uncomment element.unload.  It appears to be calling that immediately though and the bannerImager just shows the 'banner' text. I can see ContentLoadTrait being loaded which I think happens when LoadState.READY.  Immediately after that I see this trace from element.unload.

               

              JavaScript says: element_0 UNloading.
              JavaScript says: element_0unloading null
              

               

               

              That last null is the url.

              • 4. Re: HtmlMediaContainer help
                Edwin van Rijkom Level 2

                Thanks for posting all the additional info. In order to help you debug further, could you post your application (either here, or offline to evrijkom at you know where)?