Hello there,
I have this website with a panorama video, and all of a sudden the gyroscope goes crazy on mobile devices. Only tested on Chrome.
http://lab.rtve.es/escena-360/alm…tro/cyrano-360/
It started happening at some point, because when we launched the site, it was working well..
Does anybody have an idea about how to solve this kind of problem?
Thanks a lot.
SOLVED!!!
It was a problem with video resolution!
I was using a way too big resolution for these devices.. (it seems too big for Apple). I was using 3K, and as soon as I tried with a 2K video, the problem was totally gone.
Thank you anyway!
And thanks to krpano support that helped me to solve this problem really really quick.
PD: this should be in the docs somewhere... I didn't find it during all the reads I did searching for a solution. Could it be missing?
Cheers
I forgot to say...
My application, running on node, is setup on a port:
and then I use a proxypass so users can access to:
http://lab.pre.rtve.es/escena-360/almagro-respira-teatro/
and not notice that there is Nodejs behind or any port in between.
Could this be the problem?
Anyone? I'm sure this is such a common problem...
Here is some more information. JS embedpano function call (being this.context.baseUrl = http://lab.pre.rtve.es):
embedpano({swf: this.context.baseUrl + "/libs/krpano.swf", id:"krpanoSWFObject", xml: this.context.baseUrl + "/libs/video.xml", initvars:{videoUrl: this.context.baseUrl + this.props.src, videoInterfaceUrl:this.context.baseUrl + "/libs/skin/videointerface.xml", videoPlayerSwfUrl:this.context.baseUrl + "/libs/plugins/videoplayer.swf", videoPlayerJsUrl:this.context.baseUrl + "/libs/plugins/videoplayer.js"}, onready: this.setVideoElement, wmode:"transparent", target:"pano", passQueryParameters:true});And here the XML I'm using to setup the player:
<krpano> <!-- ejemplo en youtube para mobile https://www.youtube.com/watch?v=rG4jSz_2HDY --> <!-- Calidad del video será 4096x2048--> <include url="%$videoInterfaceUrl%" />
<!-- include the videoplayer plugin --> <plugin name="video" url.flash="%$videoPlayerSwfUrl%" url.html5="%$videoPlayerJsUrl%" videourl="%$videoUrl%" pausedonstart="true" loop="false" enabled="false" zorder="0" align="center" ox="0" oy="0"
width.no-panovideosupport="100%" height.no-panovideosupport="prop"
onloaded="videointerface_setup_interface(get(name));" onvideoready="videointerface_videoready();" />
<view maxpixelzoom="0" fov="90" fovmin="90" fovmax="90" />
<!-- the panoramic video image --> <image devices="panovideosupport"> <sphere url="plugin:video" /> </image>
<security> <crossdomainxml url="http://lab.pre.rtve.es/crossdomain.xml" /> </security>
<security cors="off"> <allowdomain domain="*" /> </security> </krpano>The problem is, when I try to open it from an iOS device (tested both iOS 8 and 10), it shows a black screen and get this error:
ERROR: http://lab.pre.rtve.es/escena-360/alm…grafismo_3K.mp4 - loading video failed!
I know that it is an HTML5/http problem. I created .htacces on the destination (which is the same server and domain):
Header add Access-Control-Allow-Origin "*"Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"And even used a Node.js middleware (it is a node application) so I set the headers again just in case...
I get the same result, doesn't matter what I try.
I have my crossdomain.xml file on this server, just in case too:
http://lab.pre.rtve.es/crossdomain.xml
It would be really helpful if I can get some guidance about this, please.. thank you very much.
Hello there,
Recently I purchased the license and I'm starting to use it. I love it.
I wanted to ask if there is a way to automatically switch between sources depending on bandwidth or screen resolution.
On the other hand, I'm having trouble finding examples about how to load those different sources.
Here is some of my code:
JS:
embedpano({swf: this.context.baseUrl + "/libs/krpano.swf", id:"krpanoSWFObject", xml: this.context.baseUrl + "/libs/video.xml", initvars:{videoUrl:this.props.src, videoInterfaceUrl:this.context.baseUrl + "/libs/skin/videointerface.xml", videoPlayerSwfUrl:this.context.baseUrl + "/libs/plugins/videoplayer.swf", videoPlayerJsUrl:this.context.baseUrl + "/libs/plugins/videoplayer.js"}, onready: this.setVideoElement, wmode:"transparent", target:"pano", passQueryParameters:true});XML
<krpano>
<include url="%$videoInterfaceUrl%" />
<!-- include the videoplayer plugin -->
<plugin name="video"
url.flash="%$videoPlayerSwfUrl%"
url.html5="%$videoPlayerJsUrl%"
videourl="%$videoUrl%"
pausedonstart="true"
loop="false"
enabled="false"
zorder="0"
align="center" ox="0" oy="0"
width.no-panovideosupport="100%"
height.no-panovideosupport="prop"
onloaded="videointerface_setup_interface(get(name)); setup_video_controls();"
onvideoready="videointerface_videoready();"
/>
<view maxpixelzoom="0" fov="90" fovmin="90" fovmax="90" />
<!-- the panoramic video image -->
<image devices="panovideosupport">
<sphere url="plugin:video" />
</image>
</krpano>If anybody could please show me how to add or change the source depending on screen resolution and/or bandwidth..
Thanks so much,
Ricardo 