- 21 Sep 2009
With the ESA HD Media Player you can use JavaScript in your html document to load new media items (e.g. using text or thumbnail links), request information from the player (e.g. current media path), and control the media playback (e.g. play/pause). To enable the JavaScript interactivity, the embed script in the web page must be set up as shown below, the JavaScript functions and onClick events in the web page must be set up as shown below, the “mediaSource” parameter in the MediaPlayer’s Component Inspector must be undefined prior to publishing the SWF (undefined by default), and the action script in this post must be in the actions panel (included in all v.2 skins). Please keep in mind, using this tutorial and our online documentation (includes API), you can expand the JavaScript capabilities of this player to meet the needs of almost any project.
Click Here To See A Working JavaScript Example
Embed Script:
Below is a typical set of object and embed tags used to embed one of our players into a webpage. To enable the JavaScript functions discussed below, you must use the “id” and “name” attributes (red text; set to “ESAHDMP” to work with JS below), and you must set the “allowscriptaccess” to “always”. If you are not familiar with our recommended embed script, please see the “Simple Embed” and “FlashVars Media Loading” tutorials for more details.
<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=
“http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0″
width=”640″ height=”390″ id=”ESAHDMP” >
<param name=”movie” value=”default.swf” />
<param name=”allowfullscreen” value=”true”/>
<param name=”allowscriptaccess” value=”always”/>
<param name=”FlashVars” value=”media=media.xml” />
<param name=”wmode” value=”transparent” />
<embed src=”default.swf” width=”640″ height=”390″ FlashVars=”media=media.xml”
allowfullscreen=”true”allowscriptaccess=”always” type=”application/x-shockwave-flash”
wmode=”transparent” pluginspage=”http://www.macromedia.com/go/getflashplayer”
name=”ESAHDMP”/>
</object>
JavaScript:
The following JavaScript (JS) functions must be defined in the header of your html document. Notice all of the functions refer to “ESAHDMP” as the “MovieName”, which is the player id/name as defined in the embed script above (red text). The only required JS function is ”getFlashMovie”. The other JS functions are used to call specific Action Script (AS) methods in the player to perform specific tasks. For example, JS function “SendMediaToFlashMovie” calls AS method “sendMediaToFlash”, which loads a specified media file; JS function “GetMediaFromFlashMovie” calls AS method “queryMediaFromFlash”, which returns the path to the current media file; JS function “SendXMLToFlashMovie” calls AS method “sendXMLToFlash”, which loads a specified xml file; JS function “SendNameToFlashMovie” calls AS method “sendNameToFlash”, which forces the player to jump to the XML item with matching “name” attribute; JS function “SendIDToFlashMovie” calls AS method “sendIDToFlash”, which forces the player to jump to the XML item with matching “id” attribute; JS function “PlayMediaInFlashMovie” calls AS method “playMediaInFlash”, which plays the current media file if it is paused; and JS function “PauseMediaInFlashMovie” calls AS method “pauseMediaInFlash”, which pauses the current media file if it is playing.
<script >
function getFlashMovie(movieName) {
var isIE = navigator.appName.indexOf(”Microsoft”) != -1;
return (isIE) ? window[movieName] : document[movieName];
}
function SendMediaToFlashMovie(param) {
getFlashMovie(”ESAHDMP“).sendMediaToFlash(param);
}
function GetMediaFromFlashMovie() {
document.loader.Data.value=getFlashMovie(”ESAHDMP“).queryMediaFromFlash();
}
function SendXMLToFlashMovie(param) {
getFlashMovie(”ESAHDMP“).sendXMLToFlash(param);
}
function SendNameToFlashMovie(param) {
getFlashMovie(”ESAHDMP“).sendNameToFlash(param);
}
function SendIDToFlashMovie(param) {
getFlashMovie(”ESAHDMP“).sendIDToFlash(param);
}
function PlayMediaInFlashMovie() {
getFlashMovie(”ESAHDMP“).playMediaInFlash();
}
function PauseMediaInFlashMovie() {
getFlashMovie(”ESAHDMP“).pauseMediaInFlash();
}
</script>
“onClick” event handlers in the body of your html document are used to call the JavaScript header functions when an item on the page is clicked. The “onClick” event handler can be used with text links, thumbnails, and forms (with textfields and buttons) as shown below.
Text Link Syntax Examples:
<span onClick=”SendMediaToFlashMovie(’MEDIA-PATH’);”>HTML-TEXT</span>
<span onClick=”SendXMLToFlashMovie(’XML-PATH’);”>HTML-TEXT</span>
<span onClick=”SendIDToFlashMovie(’MEDIA-XML-ID’);”>HTML-TEXT</span>
<span onClick=”SendNameToFlashMovie(’MEDIA-XML-NAME’);”>HTML-TEXT</span>
Thumbnail Syntax Examples:
<img src=”IMAGE-PATH” onClick=”SendMediaToFlashMovie(’MEDIA-PATH’);” />
<img src=”IMAGE-PATH” onClick=”SendIDToFlashMovie(’MEDIA-XML-ID’);” />
<img src=”IMAGE-PATH” onClick=”SendNameToFlashMovie(’MEDIA-XML-NAME’);” />
Form Syntax to Load and Query Media:
<FORM name=”loader” method=”post”>
<INPUT value=”Sample Text” name=”Data” size=”32″ />
<INPUT onClick=”SendMediaToFlashMovie(document.loader.Data.value);” type=”button” value=”Load” name=”SendData” />
<INPUT onClick=”GetMediaFromFlashMovie();” type=”button” value=”Query” name=”ReceiveData” />
</FORM>
Form Syntax for Play/Pause Buttons:
<FORM name=”controller” method=”post”>
<INPUT onClick=”PlayMediaInFlashMovie();” type=”button” value=”Play” name=”PlayMedia” />
<INPUT onClick=”PauseMediaInFlashMovie();” type=”button” value=”Pause” name=”PauseMedia” />
</FORM>
Action Script 3.0:
The following AS must be defined in the player FLA to handle the JS on-click event functions discussed above (updated for v.2).
//—Interact With MediaPlayer Using Java Script—
import flash.external.ExternalInterface;
import flash.events.Event;
//—load single audio/video file
ExternalInterface.addCallback(”sendMediaToFlash”, loadMediaFromJavaScript);
function loadMediaFromJavaScript(str:String):void {
if(myMediaPlayer.mediaSource != str && myMediaPlayer.roll == false){
myMediaPlayer.loadMedia(str); //enable to load single files or XML with “.xml” extension
}
}
//—get current media
ExternalInterface.addCallback(”queryMediaFromFlash”, getMediaForJavaScript);
function getMediaForJavaScript():String {
return myMediaPlayer.mediaSource;
}
//—load xml playlist
ExternalInterface.addCallback(”sendXMLToFlash”, loadXMLFromJavaScript); function loadXMLFromJavaScript(str:String):void {
if(myMediaPlayer.mediaSource != str && myMediaPlayer.roll == false){
myMediaPlayer.loadXML(str);
}
}
//—jump to XML item with corresonding “name” attribute
ExternalInterface.addCallback(”sendNameToFlash”, loadNameFromJavaScript);
function loadNameFromJavaScript(str:String):void {
if(myMediaPlayer.currentName != str && myMediaPlayer.roll == false){
myMediaPlayer.jumpToName(str);
}
}
//—jump to XML item with corresonding “id” attribute
ExternalInterface.addCallback(”sendIDToFlash”, loadIDFromJavaScript);
function loadIDFromJavaScript(num:Number):void {
if(myMediaPlayer.currentID != num && myMediaPlayer.roll == false){
myMediaPlayer.jumpToID(num);
}
}
//—play media
ExternalInterface.addCallback(”playMediaInFlash”, playMediaForJavaScript);
function playMediaForJavaScript():void {
return myMediaPlayer.play();
}
//—pause media
ExternalInterface.addCallback(”pauseMediaInFlash”, pauseMediaForJavaScript);
function pauseMediaForJavaScript():void {
return myMediaPlayer.pause();
}
Working with a Flash Media Server?
If you are loading media files that are hosted on a Flash Media Server you should refer to our tutorial, “Working With A Flash Media Server” for instructions.
