Personal tools

Views

Flex 3:Demo Media Widget

From Adobe Labs

Table of contents
1 Media Widget Demo Application

1.1 Setting up the project in Flex Builder 3
1.2 Supported Types

1.2.1 Feed Types
1.2.2 Image Types
1.2.3 Video Types
1.2.4 In Flash Player Beta ("Rockstar")
1.2.5 Audio Types

1.3 Using the media widget in html
1.4 Using the media widget in ActionScript
1.5 Using a Proxy
1.6 About the Adobe CoreLib

Media Widget Demo Application

The Adobe Media Widget is an embeddable media player created in Adobe Flex, that allows you to embed any of the supported media types into a web page. This project includes 2 Flex applications:

Setting up the project in Flex Builder 3

The Media Widget uses ans SWC component that is bundled with the project source. It can be found at the following location within the project:

It is recommended that when working with this project that you add /import_assets/swc/ as an SWC folder in the project build path.

To do so,

  1. Right click on the project and select Properties.
  2. Select : Flex Build Path in the list on the left of the window.
  3. Select The Tab called Library Path
  4. Click the Add SWC Folder button
  5. Find and add the folder in the project located at: /import_assets/swc/

Supported Types

The Media Widget supports the rendering of the following media types:

Feed Types

Image Types

Video Types

In Flash Player Beta ("Rockstar")

Audio Types

Using the media widget in html

The Media Widget allows you to load and play content of any media type that the player supports from HTML FlashVars. The FlashVar is named "source". Observe the following example:

<embed src="http://preview.teknision.com/secure/adobe/flexdemoapps/mediaplayer/20070907/StandAloneWidget.swf?source=http%3A//feeds.feedburner.com/OnAirVideoDataFeed" quality="high" bgcolor="#ffffff" width="325" height="347" name="StandAloneWidget" align="middle" play="true" loop="false" quality="high" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" flashVars="source=http%3A//feeds.feedburner.com/OnAirVideoDataFeed" pluginspage="http://www.adobe.com/go/getflashplayer"></embed>

When a URL is passed to the Widget as the source FlashVar, it must be escaped. If it is not the Flash Player may not parse the URL correctly as it will see anything after a "&" as other FlashVars.

Using the media widget in ActionScript

You may use the Media Widget as a component of another Flex project. In the source provided, the MXML applications that compile at the root of the project only wrap the Media Widget component and provide access to incoming FlashVars, as well as other functionality. The Media Widget Class may be instantiated using MXML or Actionscript. The location of the class is:

com.adobesamples.mediawidget.MediaWidget

You may instantiate in Actionscript in the following way:

import com.adobesamples.mediawidget.MediaWidget;
var mywidget:MediaWidget=new MediaWidget();
mywidget.percentWidth=100;
mywidget.percentHeight=100;
mywidget.source="http://www.myfeed.com/rss";


In MXML you may instantiate it like so:

<mediawidget:MediaWidget id="mywidget" :source="http://www.myfeed.com/rss" width="100%" height="100%" :xmlns:mediawidget="com.adobesamples.mediawidget.*"/>

Using a Proxy

If you are using the Media Widget to load content that is outside of the domain from which the the widget SWF is served, you may get security errors from the Flash Player. To get around this you must implement a proxy.

The Media Widget has proxy capabilities built-in, and you may supply a URL to a proxy on the same server as the SWF by defining the proxy FlashVar parameter.

If a proxy is defined the Media Widget will call out to it for all feed requests. The HTTP request to the proxy will carry a variable submitted via the GET method named 'url'. The value of that variable will be the url that the MediaWidget wants to load. The URL will be escaped and must be unescaped by the proxy.

A simple proxy written in PHP is bundled with this project and a sample proxy can be used located at:

http://www.teknision.com/services/proxy/proxy.php

If you are using the widget in Actionscript you may also set the proxy using the class:

com.adobesamples.mediawidget.net.feeds.FeedLoaderProxy

To set the proxy use the Actionscript below:

import com.adobesamples.mediawidget.net.feeds.*;
FeedLoaderProxy.proxyurl="http://www.teknision.com/services/proxy/proxy.php";

If you wish to turn the proxy off:

FeedLoaderProxy.proxyurl=null;

Setting this value applies to all instances of the Media Widget that are running.

About the Adobe CoreLib

The Media Widget uses a slightly modified version of the Adobe CoreLib that adds support to the XML syndication packages.

Retrieved from "http://labs.adobe.com/wiki/index.php/Flex_3:Demo_Media_Widget"