Change the event category in the GTrack OSMF plugin (dynamically)

This is somewhat a spin-off from the Media Player Anatomy series of tutorials that I’m working on, but since there is nothing to be found out there I thought to post this in case it helps anyone.
From a series of emails that I had with a representative of the RealEyes Media the only way to change the event category that is being send to the server is by changing the config.xml file.
It seemed rather insane to have a single config.xml for each category so I thought to create one on the fly as it only needs to be xml (file or build with as3 makes no difference).
FYI this is the reops tutorial on the GTrack plugin (a really nice plugin and one of the few left for free nowadays…)
GTrack Plugin Tutorial

We assume that the initial load has been done and now we want to change the category into “music”
we declare an XML template:
[cc lang=”Actionscript”]
public var xmlTemplate:XML =
UA-26485023-1
UA-24092711-1
http://www.netgfx.com/trunk/samplePlayer/sample.html








true
250
;
[/cc]

And then we change it:
[cc lang=”Actionscript”]
public function createXMLConfig(cat:String = ‘music’):XML
{
var attr:XML = new XML(xmlTemplate);

var arr:XMLList = new XMLList();
arr = attr.event;
for(var i:Number=0;i {
attr.event[i].@category = cat;
}

return attr;
}
[/cc]

This can be then loaded as follows:
[cc lang=”Actionscript”]
var customPluginConfigXML:XML = createXMLConfig();
pluginResource.addMetadataValue( “http://www.realeyes.com/osmf/plugins/tracking/google”, customPluginConfigXML );
[/cc]

At this point you might want to remove the previous MetadataValue before assigning the new one.

Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

OSMF Strobe Media Player into Flex Mobile Project (Hero)

I have worked with Strobe media player before and it is a nice player with many features and allows a great level of customization if done properly.

So I’ll explain how to import the Strobe Media player into your Mobile Flex builder Projects successfully and create a dynamic Stream with it.

First Download Strobe Media Player: http://sourceforge.net/projects/smp.adobe/files/ (currently I work with 1.5.1)

Export the contents into a folder.

Create a new Mobile Project on Flash/Flex Builder

Copy from the Strobe Media player folder the “src/player/StrobeMediaPlayback/src” and from the same folder the “/assets” folder

Also copy from “/StrobeMediaPlayback_1.5.1-full/src/framework” the OSMF.swc

and place them on the src folder of your project. Refresh the folder tree from Flash/Flex builder.

Place the OSMF.swc into your lib folder.

Now on to some Configurations:

On the Project/Properties

On Build Path/Library Path add the assets.swc from the assets folder

On Compiler arguments add: -define CONFIG::LOGGING false -define CONFIG::FLASH_10_1 true

 

At last Coding time!

Create a new View component, open a fx:Script tag and enter the following:
[cc lang=”actionscript” width=”480″ height=”500″]
import mx.core.UIComponent;

import spark.components.Button;
import spark.components.Group;

public var $playerInstance:StrobeMediaPlayback;
var grp:Group = new Group();
protected function init(event:Event):void
{

_stage = systemManager.stage;
_stage.align = StageAlign.TOP_LEFT;
_parameters  =
{
src:”http://osmf.org/dev/videos/cathy1_SD.mp4″
, controlBarMode:”docked”
, controlBarAutoHide: true
, autoPlay: true
, playButtonOverlay:true
, showVideoInfoOverlayOnStartUp: true
};

var playerInstance:StrobeMediaPlayback = new StrobeMediaPlayback();
playerInstance.initialize(_parameters, _stage, systemManager.loaderInfo, null);
$playerInstance = playerInstance;

var ui:UIComponent = new UIComponent();
ui.addChild($playerInstance as DisplayObject);

grp.percentWidth = 100;
grp.percentHeight = 100;
addElement(grp);
grp.addElement(ui);

}

private var urlLoader:URLLoader;
private var urlRequest:URLRequest;
private var loader:Loader;
private var _stage:Stage;
private var _parameters:Object;
/* static */
private static const ALLOW_LOAD_BYTES_CODE_EXECUTION:String = “allowLoadBytesCodeExecution”;

function emptyCache()
{
$playerInstance.player.pause();
grp.removeAllElements();
this.destructionPolicy = “auto”;
}
[/cc]
Note!

Make sure to call init() on ViewActivate, or CreationComplete event. Also I recoment to assign on ViewDeactivate the emptyCache() function otherwize the sound of the video might keep on playing…

As a side note here, its better to create components in Actionscript even spark ones, than in mxml at least at this point where Flex Hero framework is still in Beta.

So thats it, now you have Strobe Media Player in your Mobile Application, especially now with 10.2 and stage video that focuses on low CPU consumption its essential for any mobile application with a video player.

!Important: In case you are not viewing a controlBar there is a chance that the default ActionBar is pushing the ControlBar downwards, so if that is the case try a different percentage for grp.percent=90, or disable the ActionBar -> set actionBarVisible = false in the View component properties.

Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin