• Posted by ESA
  • Comments Off

The HD Media Player supports true fullscreen when used as a video player, mp3 player, or slideshow (i.e. fullscreen works with all media types). The player seamlessly transitions from normal to fullscreen without losing your place, the currently loaded media item is scaled automatically, and a smoothing function is used to eliminate the pixelation that can occur when scaling videos (”smoothing” parameter in the XML, “mediaSmoothing” in the Component Inspector). To enable the fullscreen feature, the embed script must be set up as shown below, the fullscreen button must be enabled in the Controller component (using the Component Inspector or Skin Wizard) and the action script in this post must be in the actions panel. Please note: fullscreen is enabled in our default players; when resizing any of our default players on the stage in Flash CS4/CS5 (i.e. when you are not using the Skin Wizard), you will need to modify the action script for the “arrangeItemsOnStage” function so it reflects the coordinates and dimensions of your custom layout (more details in the Action Script section below).

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 fullscreen functionality in the Flash Player you must set the “allowfullscreen” parameter to “true” (red text). If you are not familiar with our recommended embed script, please see the “Simple Embed” tutorial for more details.

<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ 
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” />


Action Script 3.0:
The following action script appears in our default player FLA files (starting with v.1.5.3), and is used to enable the fullscreen functionality and organize items on the stage when the player first loads, and when entering/exiting fullscreen (please note: the scripts below differ in each skin to accomodate different layouts). This approach offers the greatest flexibility for creating custom layouts, because each item on the stage can be organized according to your own specifications (e.g. the playlist can be moved or disabled and the controls can stay the same size or expand across the bottom of the screen). Please note: you should not attempt to modify the player FLA when using the Skin Wizard.

To start with, we set two important “stage” properties, which keep the application from scaling automatically and align it in the upper left hand corner (dark blue text). Then we make the Controller, Playlist, and Captions components invisible by default (gray text). Then we set up the fullscreen event listener and handler (pink text), so it calls the “arrangeItemsOnStage” function when the player enters/exits fullscreen. Within the “arrangeItemsOnStage” function we use an ‘if” statement to determine if the player is jumping to fullscreen (red text) or normal screen (green text), and we set properties that are unique to these states (in this case, the MediaPlayer size differs for each mode). Below that we set properties that are the same in both states (orange text). In this section we also include scripts to handle resizing when the Skin Wizard is used to configure the player (light blue text); you should not attempt to modify these scripts. Then we call the “arrangeItemsOnStage” function to get everything set up on the stage correctly based on the height and width attributes in the html embed code (orange text). This script assumes that the MediaPlayer (instance name “myMediaPlayer”), Playlist (instance name “myPlaylist”), Controller (instance name “myController”), and Captions (instance name “myCC”) components are all being used; if you are not using one of these components you should delete it from the stage and delete/comment all action script associated with that component.  Notice the “setSize” method is used to resize the MediaPlayer and Controller components, and the “x, y” coordinates are set for all four components on the stage. If you alter the layout of the components on the stage, you will need to alter the dimensions and coordinates in these scritps to match what you have on the stage.

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

myController.visible = false;
myPlaylist.visible = false;
myCC.visible = false;
myController.addEventListener(”fullscreen”, fullscreenHandler);
function fullscreenHandler(event:Event){

function arrangeItemsOnStage(){
  if(wizard == false){
    if (stage.displayState == “fullScreen”){
      myMediaPlayer.setSize(stage.stageWidth, stage.stageHeight); 
else if (stage.displayState == “normal”){
      myMediaPlayer.setSize(stage.stageWidth, stage.stageHeight – 30); 
    myMediaPlayer.x = 0;
    myMediaPlayer.y = 0;
    myController.setSize(stage.stageWidth-1, 30); 
    myController.x = 0;
    myController.y = stage.stageHeight – 31; 
    myController.visible = true; 
    myPlaylist.x = 5;
    myPlaylist.y = stage.stageHeight – 250;
    myCC.x = (stage.stageWidth – myCC.width) / 2;
    myCC.y = stage.stageHeight – myCC.height – 30;
  } else if (wizard == true){
    //wizard script goes here - do not adjust the scripts in this section

arrangeItemsOnStage(); //call to initialize player after all urlvars and flashvars are loaded


Support - Documentation - Skin Wizard - Sample Skins - Tutorials
Copyright © 2003-2011 Earth Science Agency, LLC - All Rights Reserved