Flex 3 media widget
Requirements
User level
All
This widget, built by Teknision, is meant to be embedded in the context of a larger application or HTML page. It contains an intuitive user interface that enables people to view and listen to MP3 files, videos, and images. In addition to individual media files you can provide the widget an RSS or ATOM feed containing media or pointers to other web pages. When you load this example you'll see the configurator that allows you to experiment with feeds and create the HTML that you can embed in your web page to display the widget.
Download and view the full source.
File descriptions
This project includes two Flex applications:
- AdobeMediaWidget.mxml - a wrapper for the MediaWidget component. It gives the widget access to incoming FlashVars needed for loading content from HTML.
- WidgetConfigurator.mxml - a sample application that allows you to load and test content. It produces simple embed code you can use to quickly embed instances of AdobeMediaWidget.
Flex Builder setup
The Media Widget uses a SWC component that is bundled with the project source. It can be found at /import_assets/swc/LoadingIcon.swc within the project.
It is recommended that when working with this project you add the LoadingIcon.swc document to your Flex Builder project's /libs/ folder.
Supported Types
The Media Widget supports the rendering of the following media types:
Feed Types
- RSS Feeds as URI ─ application/rss+xml
- Atom Feeds as URI ─ application/atom+xml
- RSS or Atom feeds as XML files ─ text/xml | .xml
Image Types
- JPG ─ image/jpeg | .jpg .jpeg .jpe
- PNG ─ image/png | .png
Video Types
- FLV ─ video/x-flv | .flv
- MOV ─ video/quicktime | .mov
- 3GP ─ video/3gpp | .3gp .3g2
- MP4 ─ video/mp4 | .mp4 .mp4v
Audio Types
- MP3 ─ audio/mpeg audio/x-mpeg | .mp3
- AAC ─ audio/aac audio/aacp
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 the following:
<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 widget SWF is served, you may get security errors from 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, use
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.
- com.adobe.xml.syndication
- com.adobe.xml.syndication.rss.Item20 has an addition that supports the media:group attribute in RSS
- Support has been added for ATOM feeds using the following namespace:
http://purl.org/atom/ns#
Flex framework features
Obviously the major features used by the medial widget relate to video and audio playback. However there is also the use of Effects as the widget transitions between listing items in the feed and showing them. The widget also has significant styling and uses custom itemRenderers.
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
Note: You may use the sample code in your products, commercial or not.
