Google FINALLY Releases AS3 Player for YouTube

Absolutely wonderful that Google has finally released an AS3 version of their chromeless player for use in Flex/AS3 projects. No more weird proxy hacks!!!

I’ve thrown together a quick example and have posted the code below. Really simple stuff to set up and use. Google seems to be more and more friendly to the Flash world lately. There are at least two major projects I’m going to implement this in as soon as I get the time to do so. Very nice- I’m quite pleased!

View the Example:

This movie requires Flash Player 9

References:
The ActionScript 3 YouTube Chromeless Player is Now Live
YouTube ActionScript 3.0 Player API Reference

Download the Example:
YouTubeAS3.fxp

View Code for Flash Builder 4:

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
<?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" 
			   applicationComplete="init()" width="480" height="500">
	<fx:Script>
		<![CDATA[
			import flash.system.Security;
			import mx.collections.ArrayCollection;
			import mx.events.ListEvent;
			import flash.display.Loader;
			import flash.events.Event;
 
			private var player:Object;
			private var loader:Loader;
			[Bindable] private var vidCollection:ArrayCollection;
 
			private function init():void {
				Security.allowInsecureDomain("*");
				Security.allowDomain("*");
 
				vidCollection = new ArrayCollection();
				vidCollection.addItem({data:"KhAplw0Z8zQ", label:"Wreckage"});
				vidCollection.addItem({data:"d54AA2YWll0", label:"Window View"});
				vidCollection.addItem({data:"Sv83GeuyN8A", label:"The Fearless Man"});
				vidCollection.addItem({data:"9t5guYGbuZs", label:"Ephemeral"});
 
				loader = new Loader();
				loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
				loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
			}
 
			private function onLoaderInit(event:Event):void {
				VidHolder.rawChildren.addChild(loader);
				loader.content.addEventListener("onReady", onPlayerReady);
				loader.content.addEventListener("onError", onPlayerError);
				loader.content.addEventListener("onStateChange", onPlayerStateChange);
				loader.content.addEventListener("onPlaybackQualityChange", onVideoPlaybackQualityChange);
			}
 
			private function onPlayerReady(event:Event):void {
				traceArea.text += "player ready:" + Object(event).data + "\r";
				player = loader.content;
				player.setSize(VidHolder.width, VidHolder.height);
				VidSelection.selectedIndex = 0;
				VidSelection.dispatchEvent(new ListEvent(ListEvent.CHANGE, true, false));
			}
			private function cueVideo(event:ListEvent):void {
				traceArea.text += "switch to:" + event.target.selectedItem.label + "\r";
				player.cueVideoById(event.target.selectedItem.data);
			}
 
			private function onPlayerError(event:Event):void {
				traceArea.text += "player error:" + Object(event).data + "\r";
			}
 
			private function onPlayerStateChange(event:Event):void {
				traceArea.text += "player state:" + Object(event).data + "\r";
			}
 
			private function onVideoPlaybackQualityChange(event:Event):void {
				traceArea.text += "video quality:" + Object(event).data + "\r";
			}
 
		]]>
	</fx:Script>
 
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<mx:Canvas id="VidHolder" left="0" right="0" top="0" bottom="140"></mx:Canvas>
	<mx:ComboBox id="VidSelection" editable="false" dataProvider="{vidCollection}" left="10" right="10" bottom="110" height="22" change="cueVideo(event)"></mx:ComboBox>
	<s:TextArea left="10" right="10" editable="false" top="398" bottom="10" id="traceArea"/>
</s:Application>
This entry was posted in ActionScript and tagged , , , . Bookmark the permalink.

10 Responses to Google FINALLY Releases AS3 Player for YouTube

  1. EZ says:

    Hi,

    I’m looking for a way to integrate a YouTube movie into my Flash application (being able, of course to load, play, pause, get events etc).

    I’d appreciate any help on this issue,
    Thanks,
    EZ

  2. Pascal says:

    Hi,
    very useful…
    I try to integrate your code in a Flash Application with no success :-(
    An error occured :
    *** Security Sandbox Violation ***
    SecurityDomain ‘http://inflagrantedelicto.memoryspiral.com/2009/10/google-finally-releases-as3-player-for-youtube/’ tried to access incompatible context…

    Any idea ?

  3. @EZ – The API Reference Google provides details all that and more. I’ve integrated this fully into two projects and it works very nicely:
    http://blogs.adobe.com/educationleaders/2009/10/youtube_and_flash_platform_as3.html

    @Pascal – It’s strange that you would get a sandbox error specifying this domain – are you trying to load something from here? You can send me the files, if you like. Or detail the relevant code in comments, here.

  4. Pascal says:

    @Joseph :
    Your exemple trigger a sandbox error too ;-)

    *** Security Sandbox Violation ***
    SecurityDomain ‘http://www.youtube.com/apiplayer?version=3′ tried to access incompatible context ‘http://inflagrantedelicto.memoryspiral.com/2009/10/google-finally-releases-as3-player-for-youtube/’

    I fixed the problem with including this :
    Security.allowInsecureDomain(“*”);
    Security.allowDomain(“*”);

  5. “Security Sandbox Violation” is more of a warning message than an error. If I recall, this is expected behavior when running against YouTube stuff even in the AS2 player. Those security settings may remove the message locally, but when on a webserver it shouldn’t matter.

    Also keep in mind that this example was whipped together the night Google released the API and I must have spent all of 15 minutes on the example ;)

  6. EZ says:

    @Joseph,

    I too got the “Security Sandbox Violation” error…

    I’d really appreciate a simple CS4 file, if it is not too much trouble…

    Thanks a lot,
    EZ

  7. Pingback: YouTube AS3 Example Using Flash Professional | In Flagrante Delicto!

  8. EZ says:

    @Joseph

    Working great!
    Thanks a lot.

    One more question:
    I’m trying to sync YouTube’s movie with events in my game.
    When I use the player.getCurrentTime() method I notice that it gets updated only every ~0.1 sec (which is a low rate).

    Does anyone knows if it is possible to get updates at a higher rate?

    Thanks,
    EZ

  9. I want to tell you that you are a good writer. Awsome articles

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">