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.
swfobject.registerObject(”ESAHDMP“, “10.0.0“, “expressInstall.swf“);
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” />
<object type=”application/x-shockwave-flash” data=”default.swf” width=”640″ height=”390″
FlashVars=”media=media.xml” allowfullscreen=”true” allowscriptaccess=”always” wmode=”transparent”>
<!–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–>
Flash Player Markup:
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.
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.
<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>