3 Replies Latest reply on Jul 29, 2009 4:53 PM by saveth

    Get size of video and size of component

    saveth Level 1

      Hi,

       

      I'm trying to create a custom VideoElement and need to know the size of the video loaded and also the size specified for the component through mxml. I just did a quick test below but it reports incorrectly. Is there a specific event that I need to listen to get this info?

       

      package my.components
      {
          import spark.primitives.VideoElement;
          
          public class MyVideoElement extends VideoElement
          {
              public function MyVideoElement()
              {
                  //TODO: implement function
                  super();
                  
                  this.source = "../assets/1-18-08-tlr_h1080p.mov";
                  
                  /* Outputs 320x240 */
                  trace("Display Object Width: " + this.displayObject.width);
                  trace("Display Object Height: " + this.displayObject.height);
                  
                  /* Outputs 320x240 */
                  trace("Video Object Width: " + this.videoObject.width);
                  trace("Video Object Height: " + this.videoObject.height);
                  
                  /* Outputs 0x0 */
                  trace("Video Element Width: " + this.width);
                  trace("Video Element Height: " + this.height);
              }
          }
      }
      

       

      Thanks for any light you can shed on the subject.

       

      -Brian

        • 1. Re: Get size of video and size of component
          Peter deHaan Level 4

          Brian,

           

          Is your video actually 320x240, or were all of those numbers incorrect?

           

          Off the top of my head you may need to listen for a resize event, or look at the video's metadata to get the width/height.

           

          Peter

          • 2. Re: Get size of video and size of component
            Peter deHaan Level 4

            Actually, I may have given you some bad advice.

            There doesnt seem to be a resize event on the VideoElement.

             

            You can get the video dimensions using the metadataReceived event (check the event.metadataInfo.width and evt.metadataInfo.height properties).

            Also, you can get the updated VideoElement dimensions in the ready event.

             

            Here was a simple test app i threw together:

             

            <?xml version="1.0" encoding="utf-8"?>
            <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/halo">
                <s:layout>
                    <s:VerticalLayout paddingLeft="20" paddingTop="20" />
                </s:layout>
                <fx:Script>
                    <![CDATA[
                        import mx.utils.ObjectUtil;
                        import spark.events.VideoEvent;
                        protected function vdElmnt_metadataReceivedHandler(evt:VideoEvent):void {
                            var ve:VideoElement = evt.currentTarget as VideoElement;
                            var obj:Object = {};
                            obj.type = evt.type; /* event type */
                            obj.w = ve.width; /* VideoElement width */
                            obj.h = ve.height; /* VideoElement height */
                            obj.w2 = evt.metadataInfo.width; /* Video's reported metadata width */
                            obj.h2 = evt.metadataInfo.height; /* Video's reported metadata height */
                            obj.time = ve.playheadTime; /* VideoElement playhead time */
                            arrList.addItem(obj);
                        }
                        protected function vdElmnt_readyHandler(evt:VideoEvent):void {
                            var ve:VideoElement = evt.currentTarget as VideoElement;
                            var obj:Object = {};
                            obj.type = evt.type; /* event type */
                            obj.w = ve.width; /* VideoElement width */
                            obj.h = ve.height; /* VideoElement height */
                            obj.time = ve.playheadTime; /* VideoElement playhead time */
                            arrList.addItem(obj);
                        }
                        protected function vdElmnt_playheadUpdateHandler(evt:VideoEvent):void {
                            var ve:VideoElement = evt.currentTarget as VideoElement;
                            var obj:Object = {};
                            obj.type = evt.type; /* event type */
                            obj.w = ve.width; /* VideoElement width */
                            obj.h = ve.height; /* VideoElement height */
                            obj.time = ve.playheadTime; /* VideoElement playhead time */
                            arrList.addItem(obj);
                        }
                        protected function vdElmnt_completeHandler(evt:VideoEvent):void {
                            var ve:VideoElement = evt.currentTarget as VideoElement;
                            var obj:Object = {};
                            obj.type = evt.type; /* event type */
                            obj.w = ve.width; /* VideoElement width */
                            obj.h = ve.height; /* VideoElement height */
                            obj.time = ve.playheadTime; /* VideoElement playhead time */
                            arrList.addItem(obj);
                        }
                    ]]>
                </fx:Script>
                <s:Button id="btn"
                        label="Load video source"
                        click="vdElmnt.source = 'http://helpexamples.com/flash/video/water.flv';" />
                <s:VideoElement id="vdElmnt"
                        metadataReceived="vdElmnt_metadataReceivedHandler(event);"
                        ready="vdElmnt_readyHandler(event);"
                        playheadUpdate="vdElmnt_playheadUpdateHandler(event);"
                        complete="vdElmnt_completeHandler(event);"/>
                <mx:DataGrid id="dg" verticalScrollPolicy="on">
                    <mx:dataProvider>
                        <mx:ArrayList id="arrList" />
                    </mx:dataProvider>
                    <mx:columns>
                        <mx:DataGridColumn dataField="type" headerText="event type:" />
                        <mx:DataGridColumn dataField="w" headerText="VidEl width:" />
                        <mx:DataGridColumn dataField="h" headerText="VidEl height:" />
                        <mx:DataGridColumn dataField="w2" headerText="metadata width:" />
                        <mx:DataGridColumn dataField="h2" headerText="metadata height:" />
                        <mx:DataGridColumn dataField="time" headerText="playhead time:" />
                    </mx:columns>
                </mx:DataGrid>
            </s:Application>
            
            

             

            Peter

            • 3. Re: Get size of video and size of component
              saveth Level 1

              Thanks Peter,

               

              Worked like a charm.

               

              Brian