And here another idea by using a krpano layer:
Chromakey Video as LayerCode:
Code Display More<layer name="chromakey" type="krpano" align="center" width="500" height="500" bgborder="1 0xFF0000" capture="false" videourl="video.mp4|video.webm" onloaded="chromakey_layer()" onclick="togglepause();" /> <action name="chromakey_layer" type="Javascript"><![CDATA[ var view = caller.krpano; view.fovtype = "VFOV"; view.fov = view.fovmin = view.fovmax = 90; var hs = caller.krpano.addhotspot("chromakey","webgl"); hs.url = "%VIEWER%/plugins/videoplayer.js"; hs.videourl = caller.videourl; hs.loop = true; hs.chromakey = "0x238E54|0.294|0.133"; hs.flying = 1; hs.width = "100%"; hs.height = "100%"; hs.capture = false; hs.pausedonstart = true; function updatesize() { if (hs.videoheight > 0 && caller.pixelheight > 0) { var aspect = (hs.videowidth / hs.videoheight) / (caller.pixelwidth / caller.pixelheight); hs.width = aspect > 1.0 ? "100%" : (100*aspect) + "%"; hs.height = aspect < 1.0 ? "100%" : (100*aspect) + "%"; } } hs.onvideoready = function() { updatesize(); // forward the videoplayer actions to the layer caller.togglepause = hs.togglepause; // ... } ]]></action>
This still seems to load an ugly black background on mobile (android) which stays until there is a keystroke? Any ideas?