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.
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=”ESAHDMP” classid=”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.swf” width=”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>
