Hello,
A project I'm working on requires that I dynamically replace the first and possibly subsequent 360 video tours with a different tour that already exists on another cross origin site (owned by me) - without refreshing or redirecting the page. Effectively, this is because player is just one layer in a single page application.
At first, I simply tried removing the pano div and/or the krpano objects via HTML, then adding them back via jQuery and calling embedpano with references to my next tour. What I found was that the original set of krpano objects, including layers, plugin, actions, and data, were still present so I was never completely removing the previous tour from the device's memory. Finally, after some more research on the forums, I found that I can manually clear the previous data set doing things like setting array counts to 0. This produced exactly the result I wanted - a clean krpano slate for my next tour - except for an error I now consistently get only on my mobile (Android S9) after just a couple seconds of playing the next video. The error is "Graphics context Lost! Please reload the page to continue...".
I read this may have to do with the memory configuration but the odd thing is that all my tours, when played separately through from their original domain, or when loaded as the first video in this new configuration, do not give any graphics context lost error on this device. The following shows a sample of the relevant logic that destroys the previous data held by krpano and how I load new tours. The tourPath initvars variable set before this code block executes contains a string I use to make the appropriate cross-origin querys within my loader.xml.
if (krpano) {
// nuke any existing krpano plugins, data, actions, or layers
krpano.call("loop(plugin.count GT 0, removeplugin(0));");
krpano.call("removeplugin('video');");
krpano.call("set(data.count,0);");
krpano.call("set(action.count,0);");
krpano.call("set(layer.count,0);");
}
removepano('pano');
removepano('panoID');
$('#main').after("<div id='pano' style='width:100%;height:100%;'></div>");
} catch(err){
console.log(err);
}
embedpano({ xml:null, mwheel: false, target:'pano', html5:'prefer', mobilescale:1.0, passQueryParameters:true, id:'panoID', initvars:{'tourPath':tourPath}$
krpano = document.getElementById("panoID");
krpano.call("loadpanoscene('https://" + document.location.hostname +"/loader.xml');");
What could possibly be causing this and make it device dependent? It works fine on all other devices I've tested. Are there any suggestions for how I can make my method work or a better way to achieve the end result without the graphics error occurring? 
