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:

public var xmlTemplate:XML = <value key="reTrackConfig" type="class">
            <account>UA-26485023-1</account>
            <account>UA-24092711-1</account>
            <url>http://www.netgfx.com/trunk/samplePlayer/sample.html</url>
        <event name="percentWatched" category="video" action="percentWatched">
            <marker percent="0" label="start"/>
            <marker percent="25" label="view"/>
            <marker percent="50" label="view"/>
            <marker percent="75" label="view"/>
        </event>
        <event name="complete" category="video" action="complete" label="trackingTesting" value="1"/>
        <event name="pageView"/><event name="playStateChange" category="video" action="playStateChange" label="play/pause" value="1"/>
        <debug>true</debug>
        <updateInterval>250</updateInterval>
        </value>;

And then we change it:

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;
}

This can be then loaded as follows:

var customPluginConfigXML:XML = createXMLConfig();
pluginResource.addMetadataValue( "http://www.realeyes.com/osmf/plugins/tracking/google", customPluginConfigXML );

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

Enjoy!

Flex audio player with Flowplayer core

I’ll present a simple task that allows to implement the power of the flex framework and flash graphics to a equally powerful core player such as the Flowplayer, bridged with JQuery.

First of all let’s create the graphics for the player, lets assume you have some basic images for the buttons and the background:

<s:Group width=”338″ height=”39″>
<s:Image source=”assets/playerBack.png” smooth=”true” width=”338″ height=”39″/>
<s:Image source=”assets/play.png” smooth=”true” left=”20″ top=”10″ click=”goPlay()” useHandCursor=”true” buttonMode=”true”/>
<s:Image source=”assets/pause.png” smooth=”true” left=”50″ top=”10″ click=”goStop();” useHandCursor=”true” buttonMode=”true”/>

<s:HSlider horizontalCenter=”20″ top=”10″ width=”178″ maximum=”1″ minimum=”0″ showDataTip=”false” stepSize=”0.1″ skinClass=”Skinz.VolumeSkinClass”/>
</s:Group>

!Note: make the <s:Application/> slightly bigger and opaque (height=”45″ width=”360″ backgroundAlpha=”0.0″)

!Note:make sure to include Jquery to your HTML file, I created this with JQuery.1.5.min.js

now a little bit of AS3 script to trigger the Javascript

private function goPlay()
{
ExternalInterface.call(“goPlay”);
}

private function goStop()
{
ExternalInterface.call(“goStop”);
}

Now export a release build and copy the .swf file in your HTML Project folder.

Our Flowplayer lives on a <div/>

<div id=”audiosecure” style=”display:block;” href=”http://releases.flowplayer.org/data/fake_empire.mp3″></div>

!Note: placing it on a div without size makes it invisible but still functional. cool huh!?

Create the flowplayer:

// install flowplayer into container
$f(“audiosecure”, “flowplayer/flowplayer.commercial-3.2.5.swf”, {

// fullscreen button not needed here
plugins: {
controls: {
fullscreen: false,
height: 30,
autoHide: false
}
},
clip: {
autoPlay: false,

// optional: when playback starts close the first audio playback
onBeforeBegin: function() {
$f(“audiosecure”).close();
}
}
});

Our SexyPlayer :

<div id=”sexyPlayer”>
<object width=”360″ height=”45″ wmode=”transparent”>
<param name=”movie” value=”css/assets/player/Action24Player.swf”>
<embed src=”css/assets/player/Action24Player.swf” wmode=”transparent” width=”360″ height=”45″>
</embed>
</object>
</div>

Some CSS:

#audiosecure
{
position:absolute;
left:150px;
top:100px;
}

#sexyPlayer
{
position:absolute;
left:150px;
top:10px;
z-index:9999;
}

!Note: make sure to place the Flowplayer lower than sexyPlayer

Throw in a couple of JS functions and you’re good to go:

function goPlay(){
$f(1).stop();
$f(0).play();
}

function goStop(){
$f(1).stop();
$f(0).stop();
}

Enjoy!

feel free to comment if you found this helpful.

Flex Simple Media Player

Creating a simple media player with Flex is not as hard as it sounds. In this tutorial I’ll go over the MXML code and some simple Action Script. In the next part I’ll describe more advanced functions such as repeat and playlist.

//First off with the MXML code:

<mx:Panel id=”mediaPanel” backgroundColor=”#2e2e2e” borderStyle=”solid” borderColor=”#4193DF” borderThickness=”2″
height=”80″ width=”280″ layout=”horizontal” alpha=”1.0″ headerHeight=”0.0″
roundedBottomCorners=”true” doubleClickEnabled=”true”
paddingTop=”10″ paddingBottom=”10″ paddingLeft=”10″ paddingRight=”10″ verticalScrollPolicy=”off” horizontalAlign=”center” top=”180″ x=”10″ dropShadowEnabled=”true”&gt

<mx:Canvas height=”100%” width=”100%” includeInLayout=”true” autoLayout=”true” borderStyle=”none” verticalScrollPolicy=”off”&gt

//some skining here would be usefull and better looking…
<mx:Button id=”stopButton” y=”10″ click=”stopPlaying();” styleName=”Button” x=”150″/&gt

<mx:Button id=”pauseButton” y=”10″ click=”pausePlaying();” styleName=”Button” x=”100″/&gt

<mx:Button id=”playButton” styleName=”Button” enabled=”true” click=”mediaPlay();” x=”50″ y=”10″/&gt

</mx:Canvas&gt

</mx:Panel&gt
//——————————————————

//Now some simple AS code, for the Play-Pause-Stop

import mx.core.SoundAsset;
import flash.media.*;

public var snd:SoundChannel = new SoundChannel();
public var pauseFlag:int=0;
public var pausePosition:int;
public var Sounds:Sound;
public var repSound:Sound;

//If we started playing from the beginning it simply plays the song, or if we paused first it resumes.
private function mediaPlay():void
{
if(pauseFlag==1)
{
resume();
}
else
{
snd.stop();
var mySound:Sound = new Sound(new URLRequest(/assets/mySong.mp3));
Sounds=mySound;
snd = mySound.play();
snd.addEventListener(Event.SOUND_COMPLETE,soundCompleteHandler1)
}
}

//To Pause the sound channel we stop it and keep track of the timeline the stopping occured. Then we invoke Play from the exact spot we left off.
private function pausePlaying():void
{
pausePosition = snd.position;
snd.stop();
pauseFlag=1;
snd.addEventListener(Event.SOUND_COMPLETE,soundCompleteHandler1)
}

public function resume():void
{
pauseFlag=0;
snd = Sounds.play(pausePosition);
}

//We invoke the sound channel to stop transmitting
private function stopPlaying():void
{
snd.stop();
}

//I’ll get a working example up and running soon, until then Enjoy!