I know this is probably right under my nose, but I've been messing with it long enough to go ahead and ask here.
I have been using the following code and it works fine on the desktop and mobile:
<div id="mediaPlayer">
<script>
var viewer = createPanoViewer({swf:"../../../assets/krpano.swf",target:"mediaPlayer"});
viewer.addVariable("xml", "krpano.xml");
viewer.embed();
</script>
</div><!--END mediaPlayer-->Code contained within the XML points to various image resolutions - computer, mobile & tablet.
<!-- pano images -->
<image type="CUBE">
<!-- computer images -->
<left url="images/1500/lr2010_09_l.jpg" />
<front url="images/1500/lr2010_09_f.jpg" />
<right url="images/1500/lr2010_09_r.jpg" />
<back url="images/1500/lr2010_09_b.jpg" />
<up url="images/1500/lr2010_09_u.jpg" />
<down url="images/1500/lr2010_09_d.jpg" />
<!-- iPhone / ipod images -->
<mobile>
<left url="images/480/lr2010_09_l.jpg" />
<front url="images/480/lr2010_09_f.jpg" />
<right url="images/480/lr2010_09_r.jpg" />
<back url="images/480/lr2010_09_b.jpg" />
<up url="images/480/lr2010_09_u.jpg" />
<down url="images/480/lr2010_09_d.jpg" />
</mobile>
<!-- tablet pc / ipad images -->
<tablet>
<left url="images/1024/lr2010_09_l.jpg" />
<front url="images/1024/lr2010_09_f.jpg" />
<right url="images/1024/lr2010_09_r.jpg" />
<back url="images/1024/lr2010_09_b.jpg" />
<up url="images/1024/lr2010_09_u.jpg" />
<down url="images/1024/lr2010_09_d.jpg" />
</tablet>
</image>Now I want to modify that code to use a self-contained pano created with krProtect on the desktop then have it use the XML for mobile and tablet. (The self-contained pano get's embeded in Facebook when someone clicks the 'Share on Facebook'.) What is the best approach?
Should I create separate XML files for mobile and tablet or leave as one while removing references to the hi-res images for desktop viewing? Also, can I use soundinterface.js to stream audio to my mobile panos? I've viewed the sample code and played around with different configurations, but cannot find the right fit. Replacing
var viewer = createPanoViewer({swf:"../../../assets/krpano.swf",target:"mediaPlayer"});with
var viewer = embedpano({swf:"pano.swf",target:"mediaPlayer"});was my first step, but then I got lost on best way to handle the mobile portion of the code.
PS: I'm now using 1.0.8.14. Not sure if krProtect plays nicely with the updated files.