15 Replies Latest reply on Mar 17, 2010 7:27 PM by lisamarienyc

    Traits for Audio elements?

    lisamarienyc

      I am trying to create a very simple player example that responds to the type of media being loaded.

       

      I can get it to display a play button for video, and not display it for a JPG. However, I can't seem to get it to work for audio; none of the traits you'd expect are being detected on the element when I specify an MP3 file (e.g. play trait, audio trait, time trait).

       

      Below is my code for the player. I thought maybe the file wasn't loaded completely before I was trying to get its traits, so I tried an if statement -- but that's not the case for the other media types, and the if statement didn't seem to make a difference. Can you see a problem with my code below? Am I missing a step here?

       

      TIA,

      // Lisa

       

      package
      {
          import flash.display.Sprite;
         
          import org.osmf.containers.MediaContainer;
          import org.osmf.media.DefaultMediaFactory;
          import org.osmf.media.MediaElement;
          import org.osmf.media.MediaPlayer;
          import org.osmf.media.URLResource;
         import org.osmf.utils.URL;
          import org.osmf.traits.*;
          import flash.display.Graphics;
         import flash.display.Sprite;
         import flash.events.MouseEvent;
         import org.osmf.events.PlayEvent;
         import org.osmf.layout.LayoutUtils;

          /**
           * The metadata sets the SWF size to match that of the video.
          **/
          [SWF(width="640", height="480")]
          public class HelloPlayButton extends Sprite
          {
              public function HelloPlayButton()
              {
                  // Create the container class that displays the media.
                   var container:MediaContainer = new MediaContainer();
                  addChild(container);
                 
                  // Create URL
                  //var mediaURL:URL = new URL("../images/swing.jpg");
                  var mediaURL:URL = new URL("../audio/train_1500.mp3");
                  //var mediaURL:URL = new URL("../videos/S0004_VP6_1Mbps.flv");
                 
                  // Create the resource to play
                  var resource:URLResource = new URLResource(mediaURL);
                 
                  // Create a mediafactory instance
                  var mediaFactory:DefaultMediaFactory = new DefaultMediaFactory();
                 
                  // Create the MediaElement and add it to our container class.
                  var myMediaElement:MediaElement =  mediaFactory.createMediaElement(resource);
                  container.addMediaElement(myMediaElement);
                 
                  // Create a media player
                  var mediaPlayer:MediaPlayer = new MediaPlayer();
                  // Stop from autoplaying
                  mediaPlayer.autoPlay = false;
                  // Then assign the media
                  mediaPlayer.media = myMediaElement;
                                 
                  var playButton:Sprite = constructPlayButton();
                  
                  // Add event listeners
                  playButton.addEventListener(MouseEvent.CLICK, function():void {

                                     mediaPlayer.play();
                     });
                  mediaPlayer.addEventListener(PlayEvent.PLAY_STATE_CHANGE, function():void {
                     playButton.visible = !mediaPlayer.playing;
                     });


      //tried this...
                  if (myMediaElement.hasTrait(MediaTraitType.AUDIO)) {
                          var audio:AudioTrait = myMediaElement.getTrait(MediaTraitType.AUDIO) as AudioTrait;
                          trace("has audio trait");
                  }

      // and also this...
                  var loadable:LoadTrait = myMediaElement.getTrait(MediaTraitType.LOAD) as LoadTrait;
                  var playable:PlayTrait = myMediaElement.getTrait(MediaTraitType.PLAY) as PlayTrait;
                  if (loadable != null) {
                      trace("This mediaElement is loadable!");
                  }
                  if (playable !=null) {
                      trace("This mediaElement is playable!");
                      addChild(playButton);
                  }
                  if (audio !=null) {
                      trace("This mediaElement has an audio track!");
                      addChild(playButton);
                  }
                 
                  function constructPlayButton():Sprite {
                  var size = 100;
                      var x = 330;
                      var y = 225;
                      var f = 1.2;
                      var result:Sprite = new Sprite();
                  var buttonArt:Graphics = result.graphics;
                  buttonArt.lineStyle(1, 0, 0.5);
                  buttonArt.beginFill(0xA0A0A0, 0.5);
                  buttonArt.moveTo(x - size / f, y - size);
                  buttonArt.lineTo(x + size / f, y);
                  buttonArt.lineTo(x - size / f, y + size);
                  buttonArt.lineTo(x - size / f, y - size);
                  buttonArt.endFill();
                  return result;
              }
                 
              }
          }
      }

        • 1. Re: Traits for Audio elements?
          bringrags Level 4

          As a general practice, I'd recommend listening for the READY state on MediaPlayer (mediaPlayerStateChange via MediaPlayerStateChangeEvent).  Different media have different loading characteristics, but all will have the appropriate traits exposed once they reach the READY state.

           

          I suspect you see the traits appear earlier for the other media types because progressive video "loads" instantly (since we just do a NetConnection.connect(null), and don't begin the download until playback begins) and images tend to load fairly quickly (particularly when they're local).  Progressive audio may take a bit longer, since we have to wait until we receive enough bytes to know that the load is progressing.  If you're really curious, you could add some event listeners with trace statements to see exactly when each event is firing for each media type (though again, the timing may vary from case to case, and based on network conditions).

          1 person found this helpful
          • 2. Re: Traits for Audio elements?
            lisamarienyc Level 1

            Thanks, Brian, that was helpful... but it has introduced a new problem. Now the video will not play, but the JPG and MP3 operate as expected.

             

            I've added listeners for both trait changes and mediaplayer state changes in the code below, but neither event is being fired when a video is loaded. Any suggestions?

             

            Thanks,

            // Lisa

             

            package
            {
                import flash.display.Sprite;
               
                import org.osmf.containers.MediaContainer;
                import org.osmf.media.DefaultMediaFactory;
                import org.osmf.media.MediaElement;
                import org.osmf.media.MediaPlayer;
                import org.osmf.media.URLResource;
                import org.osmf.utils.URL;
                import org.osmf.traits.*;
                import flash.display.Graphics;
                import flash.display.Sprite;
                import flash.events.MouseEvent;
                import org.osmf.events.PlayEvent;
                import org.osmf.events.MediaElementEvent;
                import org.osmf.events.MediaPlayerStateChangeEvent;
                import org.osmf.media.MediaPlayerState;

                /**
                 * The metadata sets the SWF size to match that of the video.
                **/
                [SWF(width="640", height="480")]
                public class HelloPlayButton extends Sprite
                {
                    public function HelloPlayButton()
                    {
                        // Create the container class that displays the media.
                         var container:MediaContainer = new MediaContainer();
                        addChild(container);
                       
                        // Create URL
                        var mediaURL:URL = new URL("../videos/S0004_VP6_1Mbps.flv");
                        //var mediaURL:URL = new URL("../images/swing.jpg");
                        //var mediaURL:URL = new URL("../audio/train_1500.mp3");
                       
                        // Create the resource to play
                        var resource:URLResource = new URLResource(mediaURL);
                       
                        // Create a mediafactory instance
                        var mediaFactory:DefaultMediaFactory = new DefaultMediaFactory();
                       
                        // Create the MediaElement and add it to our container class.
                        var myMediaElement:MediaElement =  mediaFactory.createMediaElement(resource);
                        container.addMediaElement(myMediaElement);
                       
                        // Create a media player
                        var mediaPlayer:MediaPlayer = new MediaPlayer();
                        // Stop from autoplaying
                        mediaPlayer.autoPlay = false;
                        // Then assign the media
                        mediaPlayer.media = myMediaElement;
                                       
                        var playButton:Sprite = constructPlayButton();
                     addChild(playButton);
                        playButton.visible = false;
                       
                        // Add event listeners
                     playButton.addEventListener(MouseEvent.CLICK, function():void {
                        mediaPlayer.play();
                        });
                     mediaPlayer.addEventListener(PlayEvent.PLAY_STATE_CHANGE, function():void {
                        playButton.visible = !mediaPlayer.playing;
                        });

            //********added these two listeners**********        
                     myMediaElement.addEventListener(MediaElementEvent.TRAIT_ADD, function():void {
                        registerTraits();
                        });
                     mediaPlayer.addEventListener(MediaPlayerStateChangeEvent.MEDIA_PLAYER_STATE_CHANGE,

                                      function():void {   

                                          if(MediaPlayerState.READY){registerTraits();}

                                      });


                        function registerTraits() {
                            trace("register traits");
                            if (myMediaElement.hasTrait(MediaTraitType.LOAD)) {
                                var loadable:LoadTrait = myMediaElement.getTrait(MediaTraitType.LOAD) as LoadTrait;
                                trace("This mediaElement is loadable!");
                            }
                            if (myMediaElement.hasTrait(MediaTraitType.PLAY)) {
                                var playable:PlayTrait = myMediaElement.getTrait(MediaTraitType.PLAY) as PlayTrait;
                                trace("This mediaElement is playable!");
                                playButton.visible = true;
                            }
                            if (myMediaElement.hasTrait(MediaTraitType.AUDIO)) {
                                var audio:AudioTrait = myMediaElement.getTrait(MediaTraitType.AUDIO) as AudioTrait;
                                trace("This mediaElement has an audio track!");
                                playButton.visible = true;
                            }
                        };
                       
                         function constructPlayButton():Sprite {
                        var size = 100;
                            var x = 330;
                            var y = 225;
                            var f = 1.2;
                            var result:Sprite = new Sprite();
                        var buttonArt:Graphics = result.graphics;
                        buttonArt.lineStyle(1, 0, 0.5);
                        buttonArt.beginFill(0xA0A0A0, 0.5);
                        buttonArt.moveTo(x - size / f, y - size);
                        buttonArt.lineTo(x + size / f, y);
                        buttonArt.lineTo(x - size / f, y + size);
                        buttonArt.lineTo(x - size / f, y - size);
                        buttonArt.endFill();
                        return result;
                    }
                       
                    }
                }
            }
                

            • 3. Re: Traits for Audio elements?
              jerryhamby

              Another way to detect elements:

               

              switch (true) {

              case pPlayer.media is VideoElement :

              break;

              case pPlayer.media is ImageElement :

              break;

              case pPlayer.media is AudioElement :

              break;

              case pPlayer.media is SWFElement :

              break;

              case pPlayer.media is SerialElement :

              break;

              }

              1 person found this helpful
              • 4. Re: Traits for Audio elements?
                lisamarienyc Level 1

                Jerry,

                Thanks for the reply.

                 

                Tried this, but must be missing a step. I'm getting this error:

                 

                ReferenceError: Error #1065: Variable org.osmf.elements::VideoElement is not defined.
                    at HelloPlayButton()

                 

                I imported the classes:

                    import org.osmf.elements.VideoElement;
                    import org.osmf.elements.ImageElement;
                    import org.osmf.elements.AudioElement;
                    import org.osmf.elements.SWFElement;

                 

                Do I need to also define VideoElement prior to using it in the switch statement?

                 

                Thanks,

                // Lisa

                • 5. Re: Traits for Audio elements?
                  lisamarienyc Level 1

                  It seems that none of the events are fired when the video loads, only when it begins to play. Is this expected behavior, and if so, what do I need to listen for to get the mime type (or trait) of the FLV before playing it?

                   

                  Currently listening for:

                  PlayEvent.PLAY_STATE_CHANGE

                  MediaElementEvent.TRAIT_ADD

                  MediaPlayerStateChangeEvent.MEDIA_PLAYER_STATE_CHANGE

                  MediaPlayerCapabilityChangeEvent.CAN_PLAY_CHANGE

                   

                  Thanks,

                  // Lisa

                  • 6. Re: Traits for Audio elements?
                    jerryhamby Level 1

                    Yes you need to load something (VideoElement, AudioElement, etc)

                    before the switch statement will work.

                     

                    After you have loaded an element into the media player, this event

                    will detect the different types of elements currently in use by the player.

                     

                    I use it like this:

                     

                    public var pPlayer:MediaPlayer;

                    pPlayer.addEventListener(MediaPlayerStateChangeEvent.MEDIA_PLAYER_STATE_CHANGE,mMediaPlaye rStateChange);

                     

                    private function mMediaPlayerStateChange(evt:MediaPlayerStateChangeEvent):void {

                     

                    if (evt.state==MediaPlayerState.READY) {

                    switch (true) {

                       case pPlayer.media is VideoElement :

                            trace("player has a video element");

                       break;

                     

                       case pPlayer.media is ImageElement :

                           trace("player has a image image");

                       break;

                     

                       case pPlayer.media is AudioElement :

                            trace("player has a audio element");

                       break;

                     

                       case pPlayer.media is SWFElement :

                       break;

                     

                       case pPlayer.media is SerialElement :

                       break;

                      }

                     

                    }

                    }

                    • 7. Re: Traits for Audio elements?
                      lisamarienyc Level 1

                      This definitely helped clean up my code a bit, waiting for the mediaplayer to be READY... but I'm still not getting any events firing when loading an FLV. The JPG and the MP3 work as expected, but nothing, just nothing with an FLV. Shouldn't this event fire when the FLV is loaded? It seems to fire for the other media types...

                       

                                  mediaPlayer.addEventListener(MediaPlayerStateChangeEvent.MEDIA_PLAYER_STATE_CHANGE, mediaPlayerStateChanged);

                       

                      Also, this statement seems to be throwing an error:

                       

                         case pPlayer.media is VideoElement :

                       

                      VideoElement here is not being recognized? Still getting this error:

                      ReferenceError: Error #1065: Variable org.osmf.elements::VideoElement is not defined.
                          at HelloPlayButton()

                       

                      Any insight would be greatly appreciated!

                       

                      Thanks,

                      // Lisa

                      • 8. Re: Traits for Audio elements?
                        jerryhamby Level 1

                        try this and see what happens:

                         

                        Import all the OSMF classes (especially for testing):

                        import org.osmf.containers.*;

                        import org.osmf.elements.*;

                        import org.osmf.events.*;

                        import org.osmf.layout.*;

                        import org.osmf.media.*;

                        import org.osmf.metadata.*;

                        import org.osmf.net.*;

                        import org.osmf.net.dvr.*;

                        import org.osmf.net.httpstreaming.*;

                        import org.osmf.net.rtmpstreaming.*;

                        import org.osmf.traits.*;

                        import org.osmf.utils.*;

                         

                         

                        convert var mediaURL to a string, I think URLResource

                        now needs a string rather than an URL.

                         

                        var mediaURL:String = "../images/swing.jpg";

                        var mediaURL:String = "../audio/train_1500.mp3";

                        var mediaURL:String = "../videos/S0004_VP6_1Mbps.flv";

                        make sure you don't have any misspellings and the files exist

                         

                        var resource:URLResource = new URLResource(mediaURL);

                        • 9. Re: Traits for Audio elements?
                          lisamarienyc Level 1

                          Hmm... yes, I did see that change, in the release notes:

                           

                          URLResource
                          Changed type of "url" property from URL to String. To specify a URL with an FMS
                          application instance name, use StreamingURLResource with the new
                          urlIncludesFMSApplicationInstance parameter.

                           

                          But when I change it to a string as you've shown it throws an error:

                           

                          1067: Implicit coercion of a value of type String to an unrelated type org.osmf.utils:URL.

                          • 10. Re: Traits for Audio elements?
                            jerryhamby Level 1

                            post your current code

                            • 11. Re: Traits for Audio elements?
                              lisamarienyc Level 1

                              Current code, with comments...

                               

                              package
                              {
                                  import flash.display.Sprite;
                                 
                                  import org.osmf.containers.MediaContainer;
                                  import org.osmf.media.DefaultMediaFactory;
                                  import org.osmf.media.MediaElement;
                                  import org.osmf.media.MediaPlayer;
                                  import org.osmf.media.URLResource;
                                  import org.osmf.utils.URL;
                                  import org.osmf.traits.*;
                                  import flash.display.Graphics;
                                  import flash.display.Sprite;
                                  import flash.events.MouseEvent;
                                     
                                  import org.osmf.containers.*;
                                  import org.osmf.elements.*;
                                  import org.osmf.events.*;
                                  import org.osmf.layout.*;
                                  import org.osmf.media.*;
                                  import org.osmf.metadata.*;
                                  import org.osmf.net.*;
                                  import org.osmf.net.dvr.*;
                                  import org.osmf.net.httpstreaming.*;
                                  import org.osmf.net.rtmpstreaming.*;
                                  import org.osmf.traits.*;
                                  import org.osmf.utils.*;

                                  /**
                                   * The metadata sets the SWF size to match that of the video.
                                  **/
                                  [SWF(width="640", height="480")]
                                  public class HelloPlayButton extends Sprite {

                                      public function HelloPlayButton() {
                                          // Create the container class that displays the media.
                                          var container:MediaContainer = new MediaContainer();
                                          addChild(container);
                                         
                                          // Create URL
                                          //var mediaURL:URL = new URL("../videos/S0004_VP6_1Mbps.flv");
                                          var mediaURL:URL = new URL("../images/swing.jpg");
                                          //var mediaURL:URL = new URL("../audio/train_1500.mp3");
                              //**THIS THROWS AN ERROR
                                          //var mediaURL:String = "../videos/S0004_VP6_1Mbps.flv";

                                          // Create the resource to play
                                          var resource:URLResource = new URLResource(mediaURL);
                                         
                                          // Create a mediafactory instance
                                          var mediaFactory:DefaultMediaFactory = new DefaultMediaFactory();
                                         
                                          // Create the MediaElement and add it to our container class.
                                          var myMediaElement:MediaElement =  mediaFactory.createMediaElement(resource);
                                          container.addMediaElement(myMediaElement);
                                         
                                          // Create a media player
                                          var mediaPlayer:MediaPlayer = new MediaPlayer();
                                          // Stop from autoplaying
                                          mediaPlayer.autoPlay = false;
                                          // Then assign the media
                                          mediaPlayer.media = myMediaElement;

                                          var playButton:Sprite = constructPlayButton();
                                          addChild(playButton);
                                          playButton.visible = false;
                                         
                                          // Add event listeners
                                       playButton.addEventListener(MouseEvent.CLICK, function():void {mediaPlayer.play();});
                                          mediaPlayer.addEventListener(PlayEvent.PLAY_STATE_CHANGE, function():void {playButton.visible = !mediaPlayer.playing; });
                                 
                                          mediaPlayer.addEventListener(MediaPlayerStateChangeEvent.MEDIA_PLAYER_STATE_CHANGE, mediaPlayerStateChanged);

                                          function mediaPlayerStateChanged(evt:MediaPlayerStateChangeEvent):void {
                              //***THIS DOESN'T FIRE FOR FLV, ONLY MP3 AND JPG
                                                  if (evt.state==MediaPlayerState.READY) {
                                                      trace("MediaPlayerState -- READY!");
                                                      registerTraits();
                                                  }
                                          }
                                         
                                          function registerTraits() {
                                              trace("register traits");
                                              if (myMediaElement.hasTrait(MediaTraitType.LOAD)) {
                                                  var loadable:LoadTrait = myMediaElement.getTrait(MediaTraitType.LOAD) as LoadTrait;
                                                  trace("This mediaElement is loadable!");
                                              }
                                              if (myMediaElement.hasTrait(MediaTraitType.PLAY)) {
                                                  var playable:PlayTrait = myMediaElement.getTrait(MediaTraitType.PLAY) as PlayTrait;
                                                  trace("This mediaElement is playable!");
                                                  addChild(playButton);
                                                  playButton.visible=true;
                                              }
                                              if (myMediaElement.hasTrait(MediaTraitType.AUDIO)) {
                                                  var audio:AudioTrait = myMediaElement.getTrait(MediaTraitType.AUDIO) as AudioTrait;
                                                  trace("This mediaElement has an audio track!");
                                                  addChild(playButton);
                                                  playButton.visible=true;
                                              }
                              //**IF I USE THIS SWITCH STATEMENT INSTEAD OF BASING ON TRAITS (ABOVE)
                              //**I GET A COMPILER ERROR
                              //**Error #1065: Variable org.osmf.elements::VideoElement is not defined.
                                                  /*switch (true) {
                                                      case myMediaElement is VideoElement :
                                                      trace("This is a VideoElement");
                                                      playButton.visible=true;
                                                  break;
                                                      case mediaPlayer.media is ImageElement :
                                                  break;
                                                      case mediaPlayer.media is AudioElement :
                                                      playButton.visible=true;
                                                  break;
                                                      case mediaPlayer.media is SWFElement :
                                                      playButton.visible=true;
                                                  break;
                                                  }*/
                                          };
                                                 
                                           function constructPlayButton():Sprite {
                                          var size = 100;
                                              var x = 330;
                                              var y = 225;
                                              var f = 1.2;
                                              var result:Sprite = new Sprite();
                                          var buttonArt:Graphics = result.graphics;
                                          buttonArt.lineStyle(1, 0, 0.5);
                                          buttonArt.beginFill(0xA0A0A0, 0.5);
                                          buttonArt.moveTo(x - size / f, y - size);
                                          buttonArt.lineTo(x + size / f, y);
                                          buttonArt.lineTo(x - size / f, y + size);
                                          buttonArt.lineTo(x - size / f, y - size);
                                          buttonArt.endFill();
                                          return result;
                                      }
                                         
                                      }
                                  }
                              }
                                  

                              • 12. Re: Traits for Audio elements?
                                jerryhamby Level 1

                                Your code still is using URL instead of string.

                                var mediaURL:URL = new URL("../images/swing.jpg");

                                 

                                my test:

                                var mediaURL:String="./images/image1.jpg";

                                 

                                add this to the mediaPlayerStateChanged function

                                trace("mediaPlayerStateChanged evt.state = "+evt.state);

                                I was getting a playBackError

                                 

                                So, I removed one of the dots in the string (see above)

                                and it all started to work. I've had problems getting this local

                                path stuff to work before.

                                 

                                use this:

                                var mediaURL:String = "./images/swing.jpg";

                                • 13. Re: Traits for Audio elements?
                                  lisamarienyc Level 1

                                  Jerry,

                                   

                                  I appreciate your help in getting to the bottom of this. I've tried your suggestions...

                                   

                                  Your code still is using URL instead of string.

                                  var mediaURL:URL = new URL("../images/swing.jpg");

                                   

                                  my test:

                                  var mediaURL:String="./images/image1.jpg";

                                   

                                  When I change the URL to a string I get this error:

                                  1067: Implicit coercion of a value of type String to an unrelated type org.osmf.utils:URL.�

                                   

                                  add this to the mediaPlayerStateChanged function

                                  trace("mediaPlayerStateChanged evt.state = "+evt.state);

                                  I was getting a playBackError

                                   

                                  I added this trace; it's tracing out mediaPlayerStateChanged evt.state = ready

                                   

                                  So, I removed one of the dots in the string (see above)

                                  and it all started to work. I've had problems getting this local

                                  path stuff to work before.

                                   

                                  use this:

                                  var mediaURL:String = "./images/swing.jpg";

                                   

                                  Strangely, when *I* change the path to one dot instead of two I get:

                                  mediaPlayerStateChanged evt.state = playbackError

                                   

                                  I think I should start a new thread for this issue, as the problem is now with the FLV and why this event isn't firing when it's loaded:

                                              mediaPlayer.addEventListener(MediaPlayerStateChangeEvent.MEDIA_PLAYER_STATE_CHANGE, mediaPlayerStateChanged);


                                  // Lisa

                                  • 14. Re: Traits for Audio elements?
                                    jerryhamby Level 1

                                    Lisa,

                                     

                                    Look at your code, you have duplicate import statements,

                                    remove these:

                                     

                                    import org.osmf.containers.MediaContainer;
                                    import org.osmf.media.DefaultMediaFactory;

                                    import org.osmf.media.MediaElement;
                                    import org.osmf.media.MediaPlayer;
                                    import org.osmf.media.URLResource;
                                    import org.osmf.utils.URL;  (this is not in Sprint 10 APIs)
                                    import org.osmf.traits.*;

                                     

                                     

                                    http://help.adobe.com/en_US/OSMF/1.0/AS3LR/org/osmf/utils/package-detail.html

                                    • 15. Re: Traits for Audio elements?
                                      lisamarienyc Level 1

                                      Ah, right, thanks for catching that.

                                       

                                      This is maddening!! I couldn't figure out why the URL was still being asked for, and why your other switch statement wasn't recognizing VideoElement... I deleted the .093 swc and reinstalled... and voila -- both issues were resolved. Still looking into the FLV issue, though.

                                       

                                      Thank you so much for your patience and persistence on this.

                                       

                                      Final lesson learned? If all else fails, download and reinstall the SWC!

                                       

                                      best,

                                      // Lisa