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.

jschrader

Intermediate

  • "jschrader" started this thread

Posts: 237

Location: Bavaria, Germany

Occupation: Photographer, Producer

  • Send private message

1

Sunday, March 22nd 2015, 11:56pm

Pimp up krpano video-player

I started to use the krpano videoplayer from the krpano examples to show different videos tiggered by hotspots inside a single panorama.
The player works fast and fine and with the hotspots it's a great tool to enhance interactive storytelling with panoramas.

But to make it more convenient for users I need ot add at least a close button and later (sigh) video controls.

After some fail attempts I finally managed to get a close button on the screen that does what it should do, but I still fail to get it inside the videplayer_plugin which is needed for precise positioning.
I assume the closebutton_plugin should have the videoplayer_plugin as a parent, and if so, I must be doing something wrong with he syntax or whatever. I feel a bit uncomfortable with that layer stuff.

Can you please give me a hint or a similar example of how to correctly add it?

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<action name="videoplayer_open">
	 
	 
		if(layer[videoplayer_bg],
			<!-- error -->
			trace('videoplayer_open - there is already a videoplayer!'-);
		  ,
			<!-- step one - add a background layer and fade it in -->
			addlayer(videoplayer_bg);
			set(layer[videoplayer_bg].type, container);
			set(layer[videoplayer_bg].zindex, 999999);
			set(layer[videoplayer_bg].align, lefttop);
			set(layer[videoplayer_bg].width, 100%);
			set(layer[videoplayer_bg].height, 100%);
			set(layer[videoplayer_bg].bgcolor, 0x000000);
			set(layer[videoplayer_bg].bgalpha, 0.8);
			set(layer[videoplayer_bg].bgcapture, true);
			set(layer[videoplayer_bg].handcursor, false);
			set(layer[videoplayer_bg].alpha, 0.0);
			set(layer[videoplayer_bg].onclick, videoplayer_close() );
			tween(layer[videoplayer_bg].alpha, 1.0, 0.5, default,
				<!-- step two - after the fade-in add the videoplayer plugin -->
				addlayer(videoplayer_plugin);
				set(layer[videoplayer_plugin].parent, layer[videoplayer_bg]);
				set(layer[videoplayer_plugin].align, center);
				set(layer[videoplayer_plugin].loop, false);
				set(layer[videoplayer_plugin].onclick, togglepause() );
				set(layer[videoplayer_plugin].alpha, 0.0);
				set(layer[videoplayer_plugin].scale, 0.0);
				set(layer[videoplayer_plugin].onloaded, videoplayer_plugin_ready(%1) );
				if('%2' != null, set(layer[videoplayer_plugin].posterurl,'%2'); );
				if(device.flash,
					set(layer[videoplayer_plugin].url,'%SWFPATH%/plugins/videoplayer.swf');
				  ,
					set(layer[videoplayer_plugin].url,'%SWFPATH%/plugins/videoplayer.js');
				  );
			  );
		  );
	</action>

	<action name="videoplayer_plugin_ready">
		if(layer[videoplayer_plugin],
			set(events[videoplayer_events].onresize, videoplayer_plugin_resize() );
			set(layer[videoplayer_plugin].pausedonstart, true);
				set(layer[videoplayer_plugin].onvideocomplete,
					videoplayer_close());
			set(layer[videoplayer_plugin].onvideoready,
					videoplayer_plugin_resize();
					tween(scale,1,0.5,linear);
					tween(alpha,1,0.5,default, ifnot(device.ios, play() ) );
			   );
			layer[videoplayer_plugin].playvideo(%1);
		
		  );
	</action>

	<action name="videoplayer_plugin_resize">
		<!-- use 90% width or height of available screen size -->
		div(aspect, layer[videoplayer_plugin].imagewidth, layer[videoplayer_plugin].imageheight);
		mul(new_videowidth, stagewidth, 0.90);
		div(new_videoheight, new_videowidth, aspect);
		mul(max_videoheight, stageheight, 0.90);
		if(new_videoheight GT max_videoheight,
			copy(new_videoheight, max_videoheight);
			mul(new_videowidth, new_videoheight, aspect);
		  );
		roundval(new_videowidth);
		roundval(new_videoheight);
		copy(layer[videoplayer_plugin].width, new_videowidth);
		copy(layer[videoplayer_plugin].height, new_videoheight);
	</action>

	<action name="videoplayer_close">
	hideclosevideo();
		set(events.[videoplayer_events].name, null);
		if(layer[videoplayer_plugin], layer[videoplayer_plugin].pause() );
		set(layer[videoplayer_bg].onclick, null);

		tween(layer[videoplayer_plugin].scale, 0.0, 0.5, linear);
		tween(layer[videoplayer_bg].alpha, 0.0, 0.5, default,
			removelayer(videoplayer_plugin);
			removelayer(videoplayer_bg);
		  );
	</action>


Thanks a lot
J├╝rgen

Posts: 1,850

Occupation: Virtual Tours - Photography - Krpano developer

  • Send private message

2

Monday, March 23rd 2015, 12:37am

What's with creating your plugins in an action? That makes it hard to see what's going on and customize per device. Use the xml layer structure like a normal person. ;)

<layer name="video_container" .. >
<layer name="video_close" .. />
<layer name="video_player" .. />
</layer>
Use the container to hold your graphics and inherit it's settings. Change its viability or alpha to control everything. Align your graphics to the container. The container to the window. Rearrange your structure to reflect your zorder. Makes doing devel quick and easy and much better to troubleshoot or handle exceptions for touch devices, retina displays and mobile devices because you can use device specific attributes.
KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

jschrader

Intermediate

  • "jschrader" started this thread

Posts: 237

Location: Bavaria, Germany

Occupation: Photographer, Producer

  • Send private message

3

Monday, March 23rd 2015, 5:50pm

Thank you Sasha.
Yes probably this would make things a bit easier.
But the code above is from the master himself, so I suggest Klaus sees an advantage in doing so.
Unfortunately I am myself have no idea about pros and cons besides that for me it looks more complicated :D