VideoDisplay Improvements

// April 3rd, 2009 // Actionscript 3, Flash, Flex, Programming


Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3643

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3643

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3651

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3651

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3654

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3654

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3643

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3643

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3651

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3651

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3654

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3654

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 1925

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 1925

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 2290

Warning: implode() [function.implode]: Argument must be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3242

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3265

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3265

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3306

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3357

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3357

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3502

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3502

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3643

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3643

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3651

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3651

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3654

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3654

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3643

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3643

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3651

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3651

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3654

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3654

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 1925

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 1925

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 2290

Warning: implode() [function.implode]: Argument must be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3242

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3265

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3265

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3306

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3357

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3357

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3502

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3502

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3643

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3643

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3651

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3651

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3654

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3654

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3643

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3643

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3651

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3651

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3654

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3654

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 1925

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 1925

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 2290

Warning: implode() [function.implode]: Argument must be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3242

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3265

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3265

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3306

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3357

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3357

Warning: array_keys() [function.array-keys]: The first argument should be an array in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3502

Warning: Invalid argument supplied for foreach() in /nfs/c01/h13/mnt/12290/domains/themathiseasy.com/html/blog/wp-content/plugins/devformatter/geshi/geshi.php on line 3502

VideoDisplay has no doubt been the source of many headaches and much wasted time for any developer that has touched it. A lot has been written about it, and here’s my contribution, which is an evolutionary improvement over others’ work. It’s a fix that adds video smoothing and a source propert setter that doesn’t break the component and still allow you to set autoPlay. (This will all make sense in a minute.)

First I watched my friend Justin Stander (appallingly lacking a website to point to) do what I’ve known has been happening for a while by adding smoothing to VideoDisplay, which for some odd reason is absent from Adobe’s code. Then Ryan Taylor goes and writes about his VideoDisplay tweaks, adding in the ability to use a playlist without rendering VideoDisplay useless. This was a great improvement that would have saved me more time than I’d care to admit, had I paid attention to that post a month ago. Basically, the problem with Adobe’s class is that when you change the source, it calls a private method autoPlaying(), which immediately tries seeking the video. During this process, chaos ensues and the VideoDisplay instance gets stuck in an unresponsive state, metadata breaks, video controls rebel, and your girlfriend leaves you. Ryan’s code prevents all of that, but forces you to ditch the ability to turn autoPlay off. And here we are now, ready to add autoPlay back in.

Let’s take a look at the code.

001
package com.themathiseasy.ui.video
002
{
003
	import flash.events.Event;
004
 
005
	import mx.controls.VideoDisplay;
006
	import mx.core.mx_internal;
007
 
008
	use namespace mx_internal;
009
 
010
	/**
011
	 * Dispatched when the <code>smoothing</code> property
012
	 * changes.
013
	 */	
014
	[Event(name="smoothingChanged",type="flash.events.Event")]
015
 
016
	/**
017
	 * VideoDisplay mutation that fixes some of the original components flaws.
018
	 * @author danielwilliams
019
	 * 
020
	 */	
021
	public class CustomVideoDisplay extends VideoDisplay
022
	{
023
		/**
024
		 * @private
025
		 * 
026
		 * A workaround for the weird VideoDisplay bug, this replaces
027
		 * VideoDisplay's _autoPlay property.
028
		 */		
029
		private var _customAutoPlay:Boolean = true;
030
 
031
		/**
032
		 * @private
033
		 * 
034
		 * Internal storage for <code>smoothing</code> to be applied on the
035
		 * instance of <code>VideoPlayer</code>. 
036
		 */		
037
		private var _smoothing:Boolean;
038
 
039
		/**
040
		 * @private
041
		 * 
042
		 * Flag indicating that the <code>smoothing</code> property has changed.
043
		 */
044
		private var smoothingChanged:Boolean;
045
 
046
		/**
047
		 * Constructor 
048
		 * 
049
		 */		
050
		public function CustomVideoDisplay()
051
		{
052
			super();
053
 
054
			// damn you, broken autoplay.
055
			super.autoPlay = false;
056
		}
057
 
058
		[Inspectable]
059
		[Bindable("smoothingChanged")]
060
		/**
061
		 * Allows you to choose between performance and the pretty.
062
		 * @return Boolean
063
		 * 
064
		 */		
065
		public function get smoothing():Boolean{ return _smoothing; }
066
		public function set smoothing( value:Boolean ):void
067
		{
068
			if( _smoothing != value )
069
			{
070
				_smoothing = value ;
071
				smoothingChanged = true;
072
				invalidateProperties();
073
				dispatchEvent( new Event("smoothingChanged") );
074
			}
075
		}
076
 
077
		[Bindable]
078
		/**
079
		 * @inheritDoc
080
		 * @return 
081
		 * 
082
		 */		
083
		override public function get source():String
084
		{
085
			return super.source;
086
		}
087
 
088
		override public function set source(value:String):void
089
		{
090
			super.source = value;
091
			if( _customAutoPlay ) play();
092
		}
093
 
094
		[Inspectable(category="General", defaultValue="true")]
095
		/**
096
		 * @inheritDoc
097
		 * 
098
		 */		
099
		override public function get autoPlay():Boolean
100
		{
101
			return _customAutoPlay;
102
		}
103
 
104
		override public function set autoPlay(value:Boolean):void
105
		{
106
			_customAutoPlay = value;
107
		}
108
 
109
		/**
110
		 * @inheritDoc 
111
		 * 
112
		 */		
113
		override protected function commitProperties():void
114
		{
115
			super.commitProperties();
116
 
117
			if( smoothingChanged )
118
			{
119
				if( mx_internal::videoPlayer != null )
120
				{
121
					smoothingChanged = false ;
122
					mx_internal::videoPlayer.smoothing = _smoothing ;
123
				}
124
			}
125
		}
126
	}
127
 
128
}

Most of this is lifted almost directly from Ryan’s custom video class, so let’s take a look at the one real addition:

01
/**
02
 * @private
03
 * 
04
 * A workaround for the weird VideoDisplay bug, this replaces
05
 * VideoDisplay's _autoPlay property.
06
 */		
07
private var _customAutoPlay:Boolean = false;
08
 
09
[Inspectable(category="General", defaultValue="true")]
10
/**
11
 * @inheritDoc
12
 * 
13
 */		
14
override public function get autoPlay():Boolean
15
{
16
	return _customAutoPlay;
17
}
18
 
19
override public function set autoPlay(value:Boolean):void
20
{
21
	_customAutoPlay = value;
22
}

In VideoDisplay, autoPlay is the essentially the culprit in the playlisting bug, so here I handle autoPlay on my own by leaving _autoPlay alone once I set that value (via super.autoplay = false in my constructor) so that super.source doesn’t bother calling autoPlaying(). The last thing to do is make use of our autoPlay in source’s method like so:

1
override public function set source(value:String):void
2
{
3
	super.source = value;
4
	if( _customAutoPlay ) play();
5
}

And that’s it. Now, on top of smoothing and correcting VideoDisplay’s faulty source/autoPlay logic, we now have a video component that can run through a playlist and look good doing it. And your girlfriend will take you back, too.*

One Response to “VideoDisplay Improvements”

  1. Jason says:
    April 7, 2010 at 4:50 pm

    I owe you a beer for this one.

Leave a Reply