Resizing videos in Flex using the mx.controls.VideoDisplay component often results in less than spectacular results. The video is resized, but the image quality looks very rough and pixelated. It turns out that the underlying video component that the VideoDisplay component uses, does support smoothing, but the component does not give the developer a way to access this property directly.
The solution? Extend the VideoDisplay component and enable this functionality to be exposed. And while we’re at it, we’ll also expose the “deblocking” property to remove those artifacts left over from a bit too much compression.
(There’s another method out there for doing something similar, but it relies on calling the setSmoothing() function after the video loads or using a creationComplete() handler. Our method allows you to reuse the video player for more than one video file without needing to call setSmoothing().)
Here is the source code for SmoothVideoDisplay:
package com.tuftandco.video.smoother
{
import flash.display.DisplayObject;
import mx.controls.VideoDisplay;
import mx.controls.videoClasses.VideoPlayer;
public class SmoothVideoDisplay extends VideoDisplay
{
public var smoothing:Boolean=false;
public var deblocking:int=0;
public function SmoothVideoDisplay()
{
super();
}
override public function addChild(child:DisplayObject):DisplayObject
{
var video:VideoPlayer = VideoPlayer(child);
video.smoothing=smoothing;
video.deblocking=deblocking;
return super.addChild(child);
}
}
}
Once you have this new class in you path, it is now easy to get nice smooth video resized to your needs.
xmlns:smoother="com.tuftandco.video.smoother.*"
<smoother:SmoothVideoDisplay id="videoDisplay" width="720" height="540" source="{source}"
smoothing="true" />
