HomeNewsExamplesDocumentationToolsPluginsMoreDownloadBuyForumContact
close panorama

Embedding into HTML

For embedding a flash object into a HTML site there are many possiblites,
here are some methods:


It's recommended to use a Javascript method. You have more possibilities and with Javascript it is possible to fix some Browser / Flashplayer bugs:





Flash Embedding via Object/Embed Tags (not recommended)

Javascript-free embedding method:
<object width="640" height="480">
<param name="movie" value="krpano.swf">
<embed src="krpano.swf" width="640" height="480">
</embed>
</object>
Note: This is the minimum code you need to embed a Flash movie in a browser. A broken icon will appear on the Web page if the user does not have the Flash plug-in installed. In the code above there is both an <embed> tag and an <object> tag. Because the <object> tag is recognized by Internet Explorer, and other browsers recognize the <embed> tag and ignores the <object> tag.

Advantages:
  • no Javascript necessary
  • on some new browsers an automatic Plugin-installer will start
Disadvantages:
  • Eolas problem on older browsers - see http://en.wikipedia.org/wiki/Eolas
  • no checking for an installed Flashplayer
  • no Flashplayer Version check
  • no alternative content
  • parameters/arguments must be set twice (once for object tag and once for embed tag)
  • no Javascript access to the flash object
  • no Javascript bugfixes possible (Mousewheel scrolling, Mac bugfixes)

Example - HTML file without Javascript
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/ ...linebreak...
          ...continueline... cabs/flash/swflash.cab#version=9,0,28,0"
        height="100%" width="100%">
  <param name="movie" value="krpano.swf">
  <param name="flashvars" value="pano=krpano.xml">
  <param name="allowFullScreen" value="true">
  <embed src="krpano.swf"
         pluginspage="http://www.macromedia.com/go/getflashplayer"
         height="100%" width="100%" allowFullScreen="true"
         flashvars="pano=krpano.xml" />
</object>

click here for an online example - Flash Embedding via Object/Embed Tags






Flash Embedding Javascript using SWFObject 1.5 / SWFObject 2.1

Advantages:
  • check for installed Flashplayer
  • alternative content like link to Flashplayer download
  • check for correct Flashplayer Version
  • Flash Express Install Support
  • Javascript access to the flash object
  • Javascript bugfixes possible (Mousewheel scrolling, Mac bugfixes)
Disadvantages:
  • Javascript needed
  • addtional files needed (swfobject.js, ...)

SWFObject 1.5 Example:
<div id="krpanoDIV">
    <noscript>ERROR: no Javascript</noscript>
</div>
			
<script type="text/javascript" src="./swfobject/swfobject.js">
</script>
<script type="text/javascript" src="./swfobject/swfkrpanomousewheel.js">
</script>
			
<script type="text/javascript">
// <![CDATA[
if (typeof(deconcept) !== 'undefined' &&
    deconcept.SWFObjectUtil.getPlayerVersion().major >= 6)
{
    var so = new SWFObject("krpano.swf", "krpanoSWFObject",
                           "640", "480", "9.0.28","#000000");
    so.addParam("allowFullScreen","true");
    so.addVariable("pano", "krpano.xml");
    so.useExpressInstall("./swfobject/expressinstall.swf");
    so.setAttribute("xiRedirectUrl", window.location);
    if ( so.write("krpanoDIV") )
    { var mousewheelfixes = new SWFkrpanoMouseWheel(so); }
}
else
{
   document.getElementById("krpanoDIV").innerHTML =
                                 'Flash Player 9 needed';
}
// ]]>
</script>


SWFObject 2.1 Example: (NOTE - the 2.1 script code must be in the html head!)
<html>
  <head>
    <script type="text/javascript" 
            src="swfobject21/swfobject.js">
    </script>
    <script type="text/javascript"
            src="swfobject21/swfkrpanomousewheel.js">
    </script>
    <script type="text/javascript">
      if (swfobject.hasFlashPlayerVersion("6.0.0")) 
      {
        swfobject.embedSWF("krpano.swf", "krpano", 
                            "640", "480", "9.0.28", 
                            "swfobject21/expressInstall.swf", 
                            {pano:"test.xml"}, 
                            {allowfullscreen:true, bgcolor:"#000000"}, 
                            {id:'krpano', name:'krpano'});
                            
        swfkrpanomousewheel.registerObject("krpano");
      }
      else
      {
        document.getElementById("krpano").innerHTML = 
                                  'Flash Player 9 needed';
      }
    </script>
  </head>
  <body>
    <div id="krpano">
      <noscript>ERROR: no Javascript</noscript>
    </div>
</body>
</html>

For more examples to SWFObject 1.5 and SWFObject 2.1 have a look at the "examples / htmlembedding" folder from the download package!



NOTES:
  • It's important to set the correct minimum Flash Player Version 9.0.28
  • When using MPEG4 videos (.mp4) set the minimum Flash Player Version to 9.0.115
  • When using SWFObject 1.5 - the id of the <div> element must be named different to the SWF object id (second parameter)


LINKS: (further links about flash to html embedding)

http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_12701
http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_4150
http://kb.adobe.com/selfservice/viewContent.do?externalId=6a253b75 http://www.alistapart.com/articles/flashembedcagematch
http://www.w3schools.com/flash/flash_inhtml.asp
http://www.jeroenwijering.com/?item=Embedding_flash