Nov 30 2009

Embed The YouTube Chromeless Player In Your Flex Application

Category: Developingadmin @ 8:11 pm

Part of the success of Adobe Flex is due to the fact that it makes development for Flash recognizable and readily accessible to mainstream C++ and Java application developers who never programmed for Flash before. But development can come to a screeching halt when confronted with something as simple as integration of a legacy Flash component. Embedding the YouTube chromeless player, written in AS2, in a Flex application is a good example. How does a Flex developer pull this off with no prior knowledge of AS2 or Flash Authoring, and without a copy of CS3 anywhere in sight?

Some Background

For this article we are only concerned with playing a YouTube video in a Flex application using the chromeless player API. We will not be using the YouTube Data APIs, so our starting assumption is that we already have the ID of any video we want to play.

There are three ways to playback YouTube video. You could embed the stock YouTube player using a URL of the form http://www.youtube.com/v/VIDEO_ID but you will not be able to control or interact with the player SWF at all. Secondly, you could access the FLV files directly and play them with the Flex VideoDisplay control. You’ll need to construct the URL to the FLV. See James Ward’s impressive demo using Dough McCune’s cover flow component. Note that to play the FLVs directly you will end up proxying or storing them on your own server.

The third option, and the one we are interested in, is to embed the YouTube chromeless player, located at http://gdata.youtube.com/apiplayer. The advantages of this player are:

* It allows full programmatic control over loading and playback.
* It can be used without a proxy thanks to the presence of a crossdomain.xml at gdata.youtube.com.
* As the name implies, you can skin the player in any way you like.

The catch using this with Flex is that the YouTube player is written in AS2. While there is no issue loading the AS2 SWF in your Flex app, you cannot interact with it from your AS3 code. The solution to this problem is to write a wrapper SWF in AS2 and use LocalConnection objects to enable two-way communication between the AS2 code and your Flex application.

A basic outline of this approach was posted on March 17th on the YouTube developer forum. Still, a Flex-only developer with no tools other than Flex Builder might feel no closer to a solution with this code. At least one developer on the forums was lead to practically beg for help from the AS2/Flash developers.

Writing The AS2 Wrapper

First, to use the chromeless player you must have a YouTube Developer key and you must pass the key as a query argument in the player URL. It only takes a minute to sign up here.

The wrapper follows the same outline as the AS2 code posted in the YouTube developer forums with a few changes. First we are going to use a pair of LocalConnection objects for each instance of the embedded player to enable bi-directional communication. This is required if we want to deliver player status-change events and the current playback position to our Flex application. Secondly, we will give each instance of the embedded player a different name — hopefully the code will support multiple embedded players.

The communication looks like this:
Communication

The Flex code will use one LocalConnection with a fixed name to receive from the wrapper the randomly generated instance name of each player instance. Using this name, a pair of additional LocalConnection objects is created — one for Flex to issue commands that control the player, and one for the wrapper to send status updates to Flex.

Building The Wrapper Without CS3

We can use swfmill and MTASC to build the wrapper without using CS3. Both are very simple to use and Clemans Hofreither posted a nice tutorial about using these two programs together. The result is a ytbridge.swf that we can deploy with our Flex application, and we don’t need a copy of CS3. The full source for the wrapper and the commands used to build it are included in the source ZIP with the Flex demo below so I’m not reposting it here.

Because the required developer key is passed from Flex to the wrapper, you are not required to build ytbridge.swf yourself unless you are making changes to the wrapper. If you want, you can simply take ytbridge.swf as is from the source ZIP and avoid this step completely.

Using The Wrapper from Flex

All that remains is to load ytbridge.swf in our Flex application and communicate with it via the LocalConnection objects. Rather than walk through the details here, just choose View Source on the Flex demo. Click on the image below to view the demo.

ScreenShot

VN:F [1.7.7_1013]
Rating: 7.8/10 (5 votes cast)
VN:F [1.7.7_1013]
Rating: +1 (from 1 vote)


Nov 29 2009

Namespace in PHP 6

Category: Developingadmin @ 11:31 am

Dopo tante discussioni sull’argomento finalmente l’annuncio ufficiale: in PHP6 ci saranno i namespace. Di cosa si tratta? I namespace sono una caratteristica frequentemente implementata dei linguaggi di programmazione ad oggetti e PHP evidentemente iniziava a sentirne la mancanza. I namespace servono a raggruppare in maniera gerarchica i nomi delle classi e delle funzioni in modo da evitare l’uso di nomi lunghi per organizzare grosse collezioni di codice (come Progetto_Database_MySQL_connector).

Per definire l’appartenenza di una funzione o una classe ad un namespace basta porre all’inizio del file che li contiene l’istruzione namespace Nome::del::namespace.

<?php 
namespace Nome::Del::Namespace;
 
class NomeClasse {
}
 
function nome_funzione() {
}
?>

Per riferirsi ad una funzione o classe contenuta in un namespace quindi è possibile sia utilizzare il nome completo Nome::del::namespace::Nome_classe, sia utilizzare la direttiva import che serve a definire degli alias:

<?php 
require 'Nome_classe.php';
// Nome::Del::Namespace diventa semplicemente Namespace::
import Nome::Del::Namespace;
// Nome::Del::Namespace::NomeClasse diventa semplicemente MiaClasse
import Nome::Del::Namespace::NomeClasse as MiaClasse;
 
// nome completo
$x = new Nome::Del::Namespace::Nome_classe();
 
// alias
$y = new Namespace::NomeClasse();
Namespace::nome_funzione();
$z = new MiaClasse();
?>
VN:F [1.7.7_1013]
Rating: 0.0/10 (0 votes cast)
VN:F [1.7.7_1013]
Rating: 0 (from 0 votes)


Nov 27 2009

Replace a string in several files under bash using SED

Category: Developingadmin @ 1:38 pm

This script replaces a string for another in several files.

Save this in a file named script.sh:

#!/bin/bash
# In this case, the string "hello" is replaced for "hello world" in all .txt files, renaming the 
# read files with .txt.old.
for i in *.txt; do
mv $i $i.old
sed "s/hello/hello\/world/g" $i.old > $i
done

Don’t forget to give the script the execution permission.

chmod +x script.php
VN:F [1.7.7_1013]
Rating: 0.0/10 (0 votes cast)
VN:F [1.7.7_1013]
Rating: 0 (from 0 votes)

Tags: ,


Next Page »
Get Adobe Flash playerPlugin by wpburn.com wordpress themes