header_graphic
header_gradient
 
  • 14 May 2010
  • Posted by ESA
  • Comments Off

The web is buzzing about HTML5, which is a new set of web standards being developed by WHATWG. The HTML5 standard includes many new features including tags for audio, video, and graphics elements, putting it in direct competition with Flash technology. While Flash offers a lot of practical and interactive benefits over HTML5, its primary advantage is broad support (works for 95% of web users).  By comparison, HTML5 is not widely used at this time, since it isn’t compatible with many browsers and platforms (only works for 20% of web users). However, HTML5 is supported by a small (but growing) portion of the web browsing market that does not support Flash, which includes mobile devices like iPhone and iPad (less than 5% of web users). We expect these compatibility issues to be resolved over time, meaning all mobile devices will eventually support Flash, and all browsers and platforms will eventually support HTML5, making both technologies ubiquitous. Of course we don’t know how long it will take for this goal to be realized, so in the meantime we have developed an easy solution that uses HTML5 content as a fallback if Flash Player detection fails for any reason. This ensures that your content will reach the entire web browsing market.

Read Our SWFObject, Express Install, and HTML5 Fallback Tutorial

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

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

footer_graphic

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