Embedding into HTML
Methods for embedding the krpano Viewer into the HTML page:
Examples for each embedding method are included in the krpano viewer download package
in the folder "examples/swf-to-html-embedding".
The usage of the
SWFObject 1.5
Javascript for embedding krpano.
Additionally there is the krpano specific swfkrpanomousewheel.js script for fixing the Mouse wheel
issues.
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
- additional files needed (swfobject.js, swfkrpanomousewheel.js)
SWFObject 1.5 HTML Example:
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="swfkrpanomousewheel.js"></script>
<div id="krpanoDIV">
<noscript>...javascript neededed...</noscript>
</div>
<script type="text/javascript">
if (typeof(deconcept) !== 'undefined' && deconcept.SWFObjectUtil.getPlayerVersion().major >= 6)
{
var so = new SWFObject("krpano.swf","krpanoSWFObject","100%","100%","9.0.28","#000000");
so.addParam("allowFullScreen","true");
so.addVariable("xml", "krpano.xml");
if ( so.write("krpanoDIV") )
{
var wheelfix = new SWFkrpanoMouseWheel(so);
}
}
else
{
document.getElementById("krpanoDIV").innerHTML = '...Flashplayer needed...';
}
</script>
The usage of the
SWFObject 2.2
Javascript for embedding krpano.
Additionally there is the krpano specific swfkrpanomousewheel.js script for fixing the Mouse wheel
issues.
Advantages / Disadvantages
- the same like SWFObject 1.5
SWFObject 2.2 HTML Example:
<html>
<head>
<title>...</title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="swfkrpanomousewheel.js"></script>
<script type="text/javascript">
if (swfobject.hasFlashPlayerVersion("9.0.28"))
{
swfobject.embedSWF("krpano.swf","krpanoDIV","100%","100%","9.0.28",null,{xml:"krpano.xml"},{allowfullscreen:true,bgcolor:"#000000"},{id:'krpanoSWFObject',name:'krpanoSWFObject'});
swfkrpanomousewheel.registerObject("krpanoSWFObject");
}
else
{
document.getElementById("krpanoDIV").innerHTML = '...Flashplayer needed...';
}
</script>
</head>
<body>
<div id="krpanoDIV">
<noscript>...javascript neededed...</noscript>
</div>
</body>
</html>
The direct usage of the <object> and <embed> tags for embedding Flash objects.
Some browsers will use the <object> tag and some the <embed> tag, so to support all
kind of browsers it was necessary to use both tags.
Advantages:
Disadvantages:
- 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 Browser / Flashplayer bugfixes possible (Mousewheel, Mac, wmode)
without Javascript HTML Example:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"
height="100%" width="100%">
<param name="movie" value="krpano.swf">
<param name="flashvars" value="xml=krpano.xml">
<param name="allowFullScreen" value="true">
<embed pluginspage="http://www.macromedia.com/go/getflashplayer"
height="100%" width="100%" allowFullScreen="true"
src="krpano.swf"
flashvars="xml=krpano.xml" />
</object>