header_graphic
header_gradient
 
  • Posted by ESA
  • Comments Off

The HD Media Player can be embedded in a webpage using SWFObject v2.2, which uses a javascript file (swfobject.js; static publishing method) to detect the Flash Player version. If the user doesn’t have Flash Player 10, the Express Install application (expressInstall.swf) will try to update their Flash Player (please note: in most browsers you will have to close/reopen your browser to complete the installation). If the Flash Player detection fails, the script will attempt to load alternate audio/video content using the default HTML5 player. This robust embed approach ensures that users will see your content whether they are working on a desktop, laptop, or mobile device including iPad and iPhone. This approach also helps browsers index your content, so it is highly recommended.

Download Sample Files

Click Here To See A Working SWFObject, Express Install, and HTML5 Sample

Click here to learn more about SWFObject v2.2

Click here to learn more about HTML5

The following four lines of script must be pasted into the <head> tag of your web document. Notice the first line of script calls the “swfobject.js” file (green), which must be uploaded to your server at the location you specify. In the next three lines we use the static publishing method (swfobject.registerObject) to link the script to the SWF in the body of the web document. The arguments in this method are: SWF object “id” (blue), target Flash Player version (orange), and the path to the expressInstall.swf (red), which must be uploaded to your server at location you specify.

<script type=”text/javascript” src=”swfobject.js“></script>
<script type=”text/javascript”>
swfobject.registerObject(”ESAHDMP“, “10.0.0“, “expressInstall.swf“);
</script>

The following object tag is used to embed the flash player in the body of your web document, and to define your alternate HTML5 content. Notice the player object “id” matches what we defined above (blue). The first block of script is used by browsers like Internet Explorer (bold), the next block is used by browsers like FireFox and Chrome (italics), and the alternate HTML4/5 content is used when Flash fails (underlined). So if you need to make changes it is important to update variables throughout this script to make sure it will work correctly in all browsers and platforms.

<object id=”ESAHDMPclassid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ width=”640″ height=”390″>
<param name=”movie” value=”default.swf” />
<param name=”FlashVars” value=”media=media.xml” />
<param name=”allowfullscreen” value=”true” />
<param name=”allowscriptaccess” value=”always” />
<param name=”wmode” value=”transparent” />
<!–[if !IE]>–>
<object type=”application/x-shockwave-flash” data=”default.swfwidth=”640″ height=”390″
FlashVars=”media=media.xml” allowfullscreen=”true” allowscriptaccess=”always” wmode=”transparent”>

<!–<![endif]–>
<!–begin alternate content, if flash fails try html5 audio/video/image/text–>
<video width=”640″ height=”360″ controls=”controls” preload=”none” poster=”image.jpg” src=”movie.mp4″></video>
<!–end alternate content–>

<!–[if !IE]>–>
</object>
<!–<![endif]–>
</object>

Flash Player Markup:

id (blue): If you are embedding multiple players on a page each should have a unique object id/name to avoid interference, and each should be registered independently using the javascript in the header.

movie/data (red):  The path to the SWF can be absolute or relative to the location of the page where it is embedded.

width/height (orange text): used to resize the default.swf as follows (starting v.1.5.3): set the width equal to your desired media width in pixels; set the height equal to your desired media height in pixels plus the height of the controls (default controller height is 30 pixels); for example, if you want to play videos at 320 x 240, then you would set the “width=320″ and “height=270″; the minimum width for the default skin is 320 pixels. Please note: with other skins like the Media Grid that do not include auto-resizing scripts, the height and width attribues should be equal to the SWF size).

flashvars (green): By default, all of our players use FlashVars to specify the absolute or relative path to a single audio/video file or XML playlist.

other attributes: ”enablefullscreen” is required for fullscreen support; “enablescriptaccess” is used for tracking and javascript; “wmode” helps the player blend into your page and avoid interference with other content like pull down menus.

While it is possible to automatically generate html tags for embedding Flash objects like our HD Media Player (e.g. using Flash or Dreamweaver), it is generally not recommended with our default players, because the automatically generated tags will not include some of the necessary markup including FlashVars and alternate content. In addition, the automatically generated tags are often much longer than what you see above, and contain unnecessary markup.

HTML5 Markup:

<video> tag with optional attributes:

  • width = display width in pixels
  • height = display height in pixels
  • controls = show controls as an overlay
  • autoplay = autostarts video
  • loop = continously loops video
  • preload = preloads video, ignored with autoplay
  • src = path to video file
  • poster = path to image file

HTML5 video sample:
<video width=”640″ height=”360″ controls=”controls” preload=”none” poster=”image.jpg” src=”video.mp4″>
</video>

<audio> tag with optional attributes:

  • controls = show controls
  • autoplay = autostarts audio
  • loop = continously loops audio
  • preload = preloads audio, ignored with autoplay
  • src = path to audio file

HTML5 audio sample:
<audio controls=”controls” preload=”none” src=”audio.mp4″>
</audio>

  • 18 Sep 2009
  • Posted by ESA
  • Comments Off

The simplest way to add any published HD Media Player SWF to a webpage is to use html “Flash Object and Embed” tags. All of our downloadable packages include a sample html page that includes the object and embed tags for embedding that particular example, so you can copy and paste these scripts into your own web document wherever you want the player to appear (you should be in “code” view of your html editor when copying and pasting).  It is important to learn how these scripts are configured so you can modify them to meet your needs (please note: you should not modify embed codes that were created using our online Skin Wizard).

Below are the object and embed tags used to embed the default.swf included with our default player packages. The “object” tag is used by Internet Explorer, and the “embed” tag is used by browsers like FireFox and Netscape (italics), so it is important to update variables in both tags for the player to work correctly in all browsers. The path to the SWF (red text) can be absolute or relative. The Flash Player width and height attributes (orange text) can be used to resize the default.swf as follows (starting v.1.5.3): set the width equal to your desired media width in pixels; set the height equal to your desired media height in pixels plus the height of the controls (default controller height is 30 pixels); for example, if you want to play videos at 320 x 240, then you would set the “width=320″ and “height=270″; the minimum width for the default skin is 320 pixels (please note: with other skins like the Media Grid that do not include auto-resizing scripts, the height and width attribues should be equal to the SWF size). By default, all of our players use FlashVars to specify the absolute or relative path to a single audio/video file or XML playlist (blue text). The other attributes and parameters are either required by Flash Player or they are used to enable certain player features (”enablefullscreen” is required if you want the player to go to fullscreen; “enablescriptaccess”, object “id”, and embed “name” are used for tracking and javascript). NOTE: if you use relative paths for the player or media locations they must be relative to the location of the page where the SWF is displayed, not the location of the SWF on your server.

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

While it is possible to automatically generate html tags for embedding Flash objects like our HD Media Player (e.g. using Flash or Dreamweaver), it is generally not recommended with our default players, because the automatically generated tags will not include some of the necessary parameters including the FlashVars. In addition, the automatically generated tags are often much longer than what you see above, and contain unnecessary attributes and parameters.

Click here to learn more about Flash Object and Embed Tags

footer_graphic

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