You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

1

Monday, March 5th 2018, 2:09am

LowRes Video With HighRes Single Frames

I have krPano setup that plays 360 videos, who generally are lowres to allow for bandwidth over Mobile.

I also have frames every 5secs at very highres.

I now want to change my krPano player, that every time the player pauses, a loading bar is displayed, the nearest highres frame is loaded, and when loaded, displayed. Whenever the play butten is played again, the krPano switches immediately back to the video (and removes the highres frame from memory), and plays the video again.

I looked at the stereoscopic krpano example, and using external events, a front video player CSS is made invisible, to reveal another krpano instance in the back which is loading the highres frames. This however is great to immediately get the video to play again when the play button is pressed. But Two krpano instances take up more memory and cpu usage, and I now want to reduce this to one player only.

Is there an example out there that did this before? Has anyone done this? Can someone shed some pointers/hints on doing this?

jeromebg

Professional

Posts: 764

Location: Angers - France

Occupation: Photographer

  • Send private message

2

Monday, March 5th 2018, 10:55am

Hi, you could store the current video time, load a new scene with the high res frame and when going back load the video scene and seek it to the stored time.

3

Monday, March 5th 2018, 11:41am

Hi, you could store the current video time, load a new scene with the high res frame and when going back load the video scene and seek it to the stored time.


That is exactly what I DONT want to do. When someone presses the pause button, it is acceptable and expected that loading the frame takes some time. But when resuming to play the video, it is expected that the video is already loaded, already seeked to the paused time, and playing should be instantly. Unloading and reloading a scene would remove the video being played, requireing a seek, and a delay resulting in the user experience being downgraded from my current setup.

4

Monday, March 5th 2018, 1:38pm

you need to load the jpg into a 360 hotspot, i guess
and then blend it out when playing again.

it would be cool if krpano could load 2 scenes
or at least 2 real "images" which could be grids, normal, multires or videos
and then allow to manually switch/blend between them.

maybe somewhen in the future,
right now you can only switch scenes
or work with hotspots

5

Monday, March 5th 2018, 9:41pm

An Idea:

Is it possible to get a hotspot to fully envelope the perspective? Something like width from -180deg to +180deg horizontal, and vertical -90deg to +90deg?

7

Wednesday, April 18th 2018, 7:46pm

Without much viewing in detail, it seems possible to:
- put the video plugin and image sphere in one scene
- put an image sphere in a second scene
- put a hotspot in each scene to loadscene() the other scene (like a button to go back and forth)
- put a loadscene() call in the krpano root onstart attribute to load the first scene
- put a keep="true" attribute in plugin, image and sphere

When playing the video, the video keeps on playing even when switching between the scenes..! This indicates that it should be possible somehow?

I do like the proposed solution of blending using tiled hotspots ! Exactly spoton what I want, but unfortunately the hotspots are cube tiles, not a single spherical image, which is what all my highres video frames are.

Some more suggestions/alternatives from others are welcome !

8

Wednesday, April 18th 2018, 9:22pm

i think...
you should load the stills as real scenes, so that they can be multires
the video can be a layer with 360 video
when the video stops you load the correct scene or you can dynamically load the correct pano as image
in other words
the video plugin (layer) always stays with keep=true
the scene or just the image gets replaced
no need of hotspots. you can just blend in or out the video layer

9

Thursday, April 26th 2018, 11:26pm

My problem here was:
- How to keep the UI intact (eg. when highres frames are loaded, the UI doesnt change)
- How to keep the UI visible even during a scene change between video and highres frame
- What ideal structure is needed for video and highres frames
- How to switch between these two scenes

The following seems to come very close to what I want, and I will share it here, so others may find this useful.

It creates two scenes. Initially, it loads one of them. Note that the video plugin is keep=true when switching between scenes.

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<krpano version="1.18" bgcolor="0x000000" onstart=" loadscene(scene-video);">

	<scene name="scene-video" onstart=" set( ui_plugin_video , get(plugin[video])); set(ui_plugin_video.keep, false); if(ui_plugin_video.ispaused, set(layer[ button_play ].crop, '0|0|64|64'); , set(layer[ button_play ].crop, '0|384|64|64'); );">
		<include url="test-highresframe/skin-highresframe.xml" />
		<plugin name="video" 
		        url.flash="%SWFPATH%/plugins/videoplayer.swf" url.html5="%SWFPATH%/plugins/videoplayer.js" 
		        videourl.ios="test-sphericalvideo-new/porsche360.mov" videourl.no-ios="test-sphericalvideo-new/porsche360.mov" 
		        pausedonstart="false" loop="false" enabled="false" 
		        zorder="0" align="center" ox="0" oy="0" 
		        width.no-panovideosupport="100%" height.no-panovideosupport="prop" 
		        onloaded=""
		        onvideoready="if(ui_plugin_video.ispaused, set(layer[ button_play ].crop, '0|0|64|64'); , set(layer[ button_play ].crop, '0|384|64|64'); ); "
		        onvideoplay="set(layer[ button_play ].crop, '0|384|64|64');"
		        onvideopaused="set(layer[ button_play ].crop, '0|0|64|64');"
		        />
		<image devices="panovideosupport" >
			<sphere url="plugin:video" />
		</image>
		<view hlookat="0.5" vlookat="0.5" fovtype="DFOV" fov="130" fovmin="50" fovmax="150" fisheye="0.35" />
	</scene>
	
	<scene name="scene-highresframeimage">
		<image>
			<sphere url="test-sphericalvideo-new/20131128103259_13031502_000085.jpg" />
		</image>
		<hotspot url="test-sphericalvideo-new/20131128103259_13031502_000085.jpg" distorted="false" width="500" height="250" 
		         onclick="highres_unload();" />
	</scene>
	
</krpano>


The skin file contains the play/pause button (you may have to create your own button and apply the correct crop accross the files: skin-highresframe.xml.

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<krpano>
	<action name="highres_load">
		set(ui_plugin_video.keep, true); 
		loadscene(scene-highresframeimage, null, KEEPALL, BLEND(1));
	</action>
	
	<action name="highres_unload">
		loadscene(scene-video, null, KEEPALL, NOBLEND);
	</action>
	
	<style name="ui_baseimage"  url="%SWFPATH%/../images/Player-UI-Buttons.png" />
	<layer name="button_play" style="ui_baseimage" crop="0|0|64|64" distorted="true" visible="true" ath="0" atv="30" 
	       onclick=" if(ui_plugin_video.ispaused, highres_unload(); , highres_load(); ); ui_plugin_video.togglepause(); " />
</krpano>


Note that when we switch scenes, the KEEPALL and BLEND have an effect on how to smoothly display everything.

These examples have worked for both flash and html5, though are a bit basic. You may have to change UI according to your needs.

I hope this will help someone.

10

Friday, April 27th 2018, 3:05am

loading highres frames dynamically WITHOUT losing video scene

Ok, so further from my example above.

As one can see, there are two scenes: scene-video and scene-highresframeimage.

Switching between the two works, without the video reloading. This is very nice so far.

I now need to make the image.sphere.url load an on-demand frame image. The image url is provided externally, via the webpage JS.

From a previous thread, the action script call:

Source code

1
2
3
4
5
<action name="ui_loadhighres">
set(ui_vars_file_highresframe, %1);
txtadd(highresframedyna, 'image.sphere.url=', get(ui_vars_file_highresframe));
loadpanoscene(null, scene-highresframeimage, get(highresframedyna), KEEPALL, BLEND(1));
</action>


...Gives me some positive result: the highres scene is properly loaded, and the UI skin is also kept (because of the KEEPALL flag). The video plugin is also kept, because when I press play, the video plays in the background (I can hear the sound, but no image).

But the video image is not shown, and an error now shows:

ERROR: loadscene() - scene "scenevideo" not found

..Which indicates to me that the scenes have all been removed, despite the KEEPALL flag??

I do know that Klaus repeatedly said that dynamic loading is not possible. Is it _really_ not possible? Im this close !

11

Friday, April 27th 2018, 3:29am

...I think I found a completely new, simpler solution !

I do want people's opinion on this? It looks a bit like hacking, but both flash and html5 seem to work with this.

The Xml pano test-highresframe2.xml :

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?xml version="1.0" encoding="UTF-8"?>
<krpano version="1.18" bgcolor="0x000000" onstart=" set( ui_plugin_video , get(plugin[video])); if(ui_plugin_video.ispaused, set(layer[ button_play ].crop, '0|0|64|64'); , set(layer[ button_play ].crop, '0|384|64|64'); );">

	<include url="test-highresframe2/skin-highresframe2.xml" />
	
	<plugin name="video" 
	        url.flash="%SWFPATH%/plugins/videoplayer.swf" url.html5="%SWFPATH%/plugins/videoplayer.js" 
	        videourl.ios="test-sphericalvideo-new/porsche360.mov" videourl.no-ios="test-sphericalvideo-new/porsche360.mov" 
	        pausedonstart="false" loop="false" enabled="false" 
	        zorder="0" align="center" ox="0" oy="0" 
	        width.no-panovideosupport="100%" height.no-panovideosupport="prop" 
	        onloaded=""
	        onvideoready="if(ui_plugin_video.ispaused, set(layer[ button_play ].crop, '0|0|64|64'); , set(layer[ button_play ].crop, '0|384|64|64'); ); "
	        onvideoplay="set(layer[ button_play ].crop, '0|384|64|64');"
	        onvideopaused="set(layer[ button_play ].crop, '0|0|64|64');"
	        />
	<image devices="panovideosupport" >
		<sphere url="plugin:video" />
	</image>
	<view hlookat="0.5" vlookat="0.5" fovtype="DFOV" fov="130" fovmin="50" fovmax="150" fisheye="0.35" />
	
</krpano>



The skin skin-highresframe2.xml :

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<krpano>

	<action name="highres_load">
		set(highresframedyna, '');
		txtadd(highresframedyna, 'image.sphere.url=test-sphericalvideo-new/20131128103259_13031502_000085.jpg');
		loadpano(null, get(highresframedyna), KEEPALL, BLEND(1));
	</action>
	
	<action name="highres_unload">
		set(highresframedyna, '');
		txtadd(highresframedyna, 'image.sphere.url=plugin:video');
		loadpano(null, get(highresframedyna), KEEPALL, BLEND(1));
	</action>
	
	<style name="ui_baseimage"  url="%SWFPATH%/../images/Player-UI-Buttons.png" />
	
	<layer name="button_play" style="ui_baseimage" crop="0|0|64|64" distorted="true" visible="true" ath="0" atv="30" 
	       onclick=" if(ui_plugin_video.ispaused, highres_unload(); , highres_load(); ); ui_plugin_video.togglepause(); " />
	
</krpano>



In short, right where it adds the txt url to highresframedyna var, within the highres_load action, that is what makes the highres loading dynamic. This could be a different url upon next call, or the use of %1 could be made.

Is this a normal usage of the player?