Go Back

Working through the browser gotchas with embedded Flash Video html

I was putting together a couple of Web User Controls to use within the Telerik SiteFinity Content Management System that would render SWF (Flash) video.  The project was approached in 2 different ways.
  1. A client-side control using JavaScript
  2. A server-side control using the asp:Literal control
While the client-side control works great in all browsers, I was having a difficult time with the server-side control.  The control would only find the videos if the page was browsed with Microsoft Internet Explorer.  If I tried to use Mozilla Firefox, Apple Safari, or Google Chrome..the video would not display.  Actually, it's kinda funny - usually it's Internet Explorer that has issues.

 
Anyway, I narrowed it down to the browsers (for some odd reason) were not recognizing the relative path for the URL.  I went back to the code and worked through a bunch of different combinations until we get this.

The following object tag works in Microsoft Internet Explorer:
It does not include a BASE parameter.  It does include the relative path URL as part of the filename.

<object height="328" width="400" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version==8" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="csSWF">
<param name="movie" value="Videos/CreatingTagsInISIS_controller.swf">
<param name="bgcolor" value="#FFFFFF">
<param name="quality" value="best">
<param name="allowScriptAccess" value="always">
<param name="flashVars" value="csConfigFile=Videos/CreatingTagsInISIS_config.xml&amp;csColor=FFFFFF">
<embed name="csSWF" src="Videos/CreatingTagsInISIS_controller.swf" bgcolor="#FFFFFF" quality="best" allowscriptaccess="always" flashvars="Videos/CreatingTagsInISIS_config.xml&amp;csColor=FFFFFF" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" width="400" height="328">
</object>

 
For all other browsers the rendered object tag must look like this:
In this case you need to specify a BASE parameter and relative parameters for
the video files.

<object id="csSWF" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="400" height="328" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version==8">
<param name="movie" value="Videos/CreatingTagsInISIS_controller.swf"/>
<param name="base" value="Videos/"/>
<param name="bgcolor" value="#FFFFFF"/>
<param name="quality" value="best"/>
<param name="allowScriptAccess" value="always"/>
<param name="flashVars" value="csConfigFile=Videos/CreatingTagsInISIS_config.xml&csColor=FFFFFF"/>
<embed name="csSWF" src="Videos/CreatingTagsInISIS_controller.swf" width="400" height="328" bgcolor="#FFFFFF" quality="best" base="Videos/" allowScriptAccess="always" flashVars="Videos/CreatingTagsInISIS_config.xml&csColor=FFFFFF" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</embed>
</object>

 
At first blush, it appears that Safari, Chrome & Firefox just ignore the relative path in the filename (Videos/CreatingTagsInISIS_controller.swf) and build the URL path from the BASE parameter tag.  But this is also untrue.  If the "Videos/" is removed from "Videos/CreatingTagsInISIS_controller.swf" in the MOVIE tag and other filename tags, the video does not display.  These browsers require both a BASE url parameter and a relative path as part of the filename.

 This browser idiosyncracy does not appear to documented anywhere.  Through trial and error (which is sometimes the only way) I found a syntax that reliably produces the web user control correctly for all major browsers.  Hopefully this information will help someone else in a similar situation.

 Sincerely,
Dennis