Adding a Flash Video Component in MXML

Posted by Ian Serlin | Tweet This | Filed under Actionscript 3, Video, problem solution

Problem

Ok, this one is incredibly simple, but I see people in forums asking this question over and over. The heavyweight Flex video components include a lot of niceties but also a lot of extraneous features depending on your application and you’d like to use the lightweight built-in Flash Video component in your Flex project instead. The issue is that Video extends directly from DisplayObject and not UIComponent so it can’t be directly embedded in an MXML file.

Solution

This simple wrapper class gives you direct access to the Video component API without much else and is embeddable in an MXML file. What’s the much else? You can call dispose() on it to actually ensure the video is no longer visible on the screen, something that’s not always guaranteed to happen when you call clear() on Video. If you want to attach a new Camera or NetStream you can do so directly or you can call init() to reinitialize the Video component.

VideoComponent.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

package vokle.components.screens {
 
	import flash.media.Camera;
	import flash.media.Video;
	import flash.net.NetStream;
 
	import mx.core.UIComponent;
 
	public class VideoComponent extends UIComponent {
 
		private var _video:Video;
 
		public function VideoComponent( width:int = 320, height:int = 240 ){
			this.width  = width;
			this.height = height;
		}
 
		public function dispose():void {
			if( _video != null && this.contains( _video ) ){
				this.removeChild( _video );
				_video.clear();
			}
			_video = null;
		}
 
		public function get deblocking():int {
			if( _video != null ){
				return _video.deblocking;
			}
			return 0;
		}
 
		public function set deblocking( value:int ):void {
			if( _video != null ){
				_video.deblocking = value;
			}
		} 
 
		public function get smoothing():Boolean {
			if( _video != null ){
				return _video.smoothing;
			}
			return false;
		}
 
		public function set smoothing( value:Boolean ):void {
			if( _video != null ){
				_video.smoothing = value;
			}
		} 
 
		public function get videoHeight():int {
			if( _video != null ){
				return _video.videoHeight;
			}
			return -1;
		}
 
		public function get videoWidth():int {
			if( _video != null ){
				return _video.videoHeight;
			}
			return -1;
		}
 
		public function attachCamera( camera:Camera ):void {
			init();
			if( _video != null ){
				_video.attachCamera( camera );
			}
		}
 
		public function attachNetStream( netStream:NetStream ):void {
			init();
			if( _video != null ){
				_video.attachNetStream( netStream );
			}
		}
 
		public function clear():void {
			if( _video != null ){
				_video.clear();
			}
		}
 
		public function init():void {
			if( _video == null ){
				_video = new Video( this.width, this.height );
				this.addChild( _video );	
			}
		}
 
		override protected function createChildren():void {
			super.createChildren();
			init();
		}
 
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
			super.updateDisplayList( unscaledWidth, unscaledHeight );
			_video.width = unscaledWidth;
			_video.height = unscaledHeight;
			_video.x = 0;
			_video.y = 0;
		}
 
	}
}

If you have a badass video component that you wrote or a better way to solve this problem share it with us by linking to it in the comments!

Comments (0)

Leave a Reply