Flowplayer auto focus with JS (FF too)

I was asked to find a way to enable auto focus on flowplayer without the user to click anything at all. After much search and thought... I figured out an easy way to do this using the Flowplayer API and JS.
In this example I give auto focus the moment the player is done loading in HTML and by pressing num-key: "2" it toggles FullScreen.

note: This works on Firefox too.

("player", "../flowplayer/flowplayer.commercial-3.2.5.swf", {
clip: {
url: 'SOMEURL',
provider: 'rtmp',
},
onLoad:function(){
window.document.playerElementID.focus();
},
onKeyPress:(function(e){
if(e == 50){
this.toggleFullscreen();
}
}),
plugins: {
rtmp: {
url: '../flowplayer/flowplayer.rtmp-3.2.3.swf',
netConnectionUrl: 'rtmp://SOMEURL'
}
}
});

Special thanks to @Havoc24k

Compile FlowPlayer and add a simple button tutorial

First of you need to have the following:

ANT: http://ant.apache.org/bindownload.cgi

Flex SDK: http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3 (download the latest 3.+ build)

Java SDK: http://developers.sun.com/downloads/ (or google "java SDK")

now you need to place all of them in a folder and extract

Next step is to add those as environmental variables, at PATH(if it doesn't exist create it) add all the paths to the SDK bin folders separated by ;

to verify each installation go to command prompt and type:

ant -version

mxmlc -version

javac -version

if you see results to all 3 you're good to go.


COMPILING CONTROLS SOURCE CODE (without any changes for now)

You need the flowplayer.devkit, and the controls plugin, as well as the flowplayer source code witch contains an example to test your builds.

All of these are provided by the flowplayer website, it might take a while searching for them but its worth it.

once you download all, extract them, and place the plugins.controls folder inside the flowplayer.devkit/flowplayer.devkit folder

next you'll need to checkout some code from the svn, I use toirtoise svn: http://tortoisesvn.net/downloads once you install go to the above folder and check out:

http://flowplayer-plugins.googlecode.com/svn/flash/common/trunk/

http://flowplayer-plugins.googlecode.com/svn/flash/controls/trunk/ (if you don't have flowplayer.controls yet).


Now on to the configuration (we're getting there soon...)

go to the devkit folder which contains "plugin-build.properties"


# you need to adjust following to point to your Flex SDK
flex3dir=C:/SDK/flex_sdk_3.5.0.12683

# change this if you want the compiled plugin to be copied to some dir
deploy_dir=C:/SDK/TEST

# change following to point to .exe files when running on Windows

mxmlc_bin= ${flex3bindir}/mxmlc.exe

compc_bin= ${flex3bindir}/compc.exe

asdoc_bin= {flex3bindir}/asdoc.exe

# following can usually be left as they are

flex3bindir=${flex3dir}/bin

flex3libsdir=${flex3dir}/frameworks/libs

flashplayer_bin=

framerate=31

bgcolor=0xFFFFFF

width=500

height=350

next we go to the flowplayer.controls folder and edit the "build.xml" and change the following code block:

<!-- location of the skin swd, anc swc -->
<property name="library-path" value="src/flash/air" />

<property name="extra-sources" value="../common/src/actionscript" />


<property file="../plugin-build.properties" />
<import file="../plugin-build.xml"/>
<property name="flowplayer_lib" value="../flowplayer.swc" />

<property name="plugin-binary" value="${basename}.swf" />
<property name="plugin-binary-versioned" value="${basename}-${version}.swf" />
<property name="plugin-main-class" value="org/flowplayer/controls/Controls.as" />
<property name="compiler-define" value="CONFIG::skin,'true' -define=CONFIG::hasSlowMotion,'false'" />


on a side note if you want to compile the tube skin, it usually is missing the dragger component, so you'll need to recompile the tube.fla adding the dragger icon.

go to command prompt and navigate to the flowplayer.controls folder, and type "ant" you should see some text and finaly "BUILD SUCCESSFUL" if not go up and try to identify the error, usually it tells you which line to look and which file.

Adding a button to the flowPlayer with ActionScript:

First of you'll need to create the graphic for the button: go to Flash Professional and open one of the sample .fla in the flowplayer.controls/src/flash

add a new symbol and draw you graphic or simply add a picture (make sure the dimensions match the other graphics) name it and save it as a movieClip of the class fp.buttonName in the Skin Classes tree

now create the same graphic and save it as symbol with the name buttoNameIcon in the Symbols tree.


now export your build as a movie .swf and replace the old .swf

Now... some coding much occur...but fear not!

the files we are going to edit are:


Controls.as

SkinClasses.as


Tooltips.as


WidgetBooleanStates.as


and we will create the buttonName.as


first we create the class for our button, for showcase reasons I used a button named "gBtn" which when clicked opens a browser in the google home page (my idea of a Hello World)

package org.flowplayer.controls.button {

import flash.display.DisplayObjectContainer;

import org.flowplayer.controls.config.Config;

import org.flowplayer.controls.button.AbstractButton;

import org.flowplayer.view.AnimationEngine;

/**

* @author api

*/

public class gBtn extends AbstractButton {

public function gBtn(config:Config, animationEngine:AnimationEngine) {

super(config, animationEngine);

}

override public function get name():String {

return "google";

}

override protected function createFace():DisplayObjectContainer {

return SkinClasses.getgBtn();

}

override protected function get tooltipLabel():String {

return config.tooltips.gBtn;

}

}

}

now lets change some source code!


SkinClasses.as:

private var gbtn:fp.gBtn; //buttonName for you if you havent named your button "gBtn" too...

public static function getgBtn():DisplayObjectContainer{

return getDisplayObject("fp.gBtn") as DisplayObjectContainer;} //at the end of the file


Controls.as:

import org.flowplayer.controls.button.gBtn;

//at createChildren add:

_gBtn = addChildWidget(createWidget(_gBtn,"google",gBtn,_config,animationEngine),ButtonEvent.CLICK,goToUrl);

//launcher

//gbutton implementation

private function goToUrl(evt:ButtonEvent):void{

navigateToURL(new URLRequest ("http://www.google.com"),"_blank");

}

//at lastOnRight function add:

if (_gBtn) return _gBtn; //first, yes we are adding it at the right place of the controlBar

//finally at arrageRightEdgeControls(leftEdge:Number) edit:

rightControls = [_gBtn,_fullScreenButton, _volumeSlider, _muteVolumeButton, _timeView];

ToolTips.as

private var _gBtn:String = "google";

public function get gBtn():String{

return label(_gBtn);}

public function set gBtn(gBtn:String):void{

_gBtn = gBtn;}


WidgetBooleanStates.as

private var _properties:Array = ["play", "stop", "mute", "volume", "time", "scrubber", "playlist", "slowBackward", "fastBackward", "slowForward", "fastForward" , "fullscreen","google"];

public function set google(google:Boolean):void {

_values["google"] = google;

}

[Value]

public function get google():Boolean {

return value("google",true);

}

now you're good to go! Recompile the code as you did before and place the producted .swf flowplayer.controls-3.2.1-dev.swf (name it:flowplayer.controls-3.2.1.swf) and replace the existing on the example.

you might also want to enable all controls to see your new button, or simple enable it:


<script>

flowplayer("player", "../flowplayer-3.2.2.swf",

{

plugins:{

controls:

{


gBtn:true

}

}

});


I hope this will clear some things about the flowplayer which is an awesome player idd.


(if you notice any typos or general mistakes please let me know)


have fun!