Friday, August 20, 2010

Apply Smoothing to Video in Spark VideoPlayer or VideoDisplay Component

Problem:
I want to allow smoothing on the video that is being played by a Spark VideoPlayer or VideoDisplay component but those components don't have a property for this.

Solution:
To smooth a video being played by one of these components, you have to access the video object once it is loaded. These components do not provide a smoothing option directly. To determine when a video has loaded, we will detect a state change on the component itself by adding a MediaPlayerStateChangeEvent listener.

MXML:
<s:VideoDisplay id="vid_player" top="0" left="0" right="0" bottom="0" source="video.flv"  mediaPlayerStateChange="checkState(event)" />

AS3 (MXML Alternative) - attach the listener with AS3:
vid_player.addEventListener(MediaPlayerStateChangeEvent.MEDIA_PLAYER_STATE_CHANGE, checkState)

The checkState method will do more to check is the video has successfully loaded.

AS3 - checkState Method:
import org.osmf.events.MediaPlayerStateChangeEvent;
private function checkState(e:MediaPlayerStateChangeEvent):void{
    if(e.state == "playing") 
        vid_player.videoObject.smoothing = true;
}

 If you try to access the videoObject before the "playing" state, you will get a null reference.

Please let me know if you come across any questions with this code.

4 comments:

Elias_T said...

Thanks! Worked like a Charm.

Mhsdklfjadfjks said...

It's even better to listen to the 'ready' event. When listening for 'playing', there are situations in which the vidoeObject is still returning null.

shadetyler said...

@Mhsdklfjadfjks - The documentation specifies that the MediaPlayerState ready event is for when the MediaPlayer is ready, not the MediaPlayer source. However, if this is working, I can't argue with success. :)

Mike Holly said...

Thanks for the tip!