Sie sind nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: krpano.com Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

1

Donnerstag, 28. September 2017, 08:03

Virtual Tour including 360video

I need to include a 360 video in a Virtual Tour.
I've included the video scene with the other image scenes in a very basic way and its works perfectly.
Here's an example: http://mauritius360.com/test2/index.html
Now there's a small problem with the play button which i've placed on the left.
When you enter the video scene for the 1st time the button toggles between play and pause correctly.
But when you switch to another scene and come back to the video scene, the button no longer toggles. Even the play-pause icon that's middle of the screen doesn't appear this time.

I know it has something to do with the videointerface.xml but not sure which setting or code. Could you help on this issue please?

Quellcode

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<krpano version="1.19" title="Corfu Holiday Trip">
	
	<include url="skin/vtourskin.xml" />

	<!-- customize skin settings: maps, gyro, webvr, thumbnails, tooltips, layout, design, ... -->
	<skin_settings maps="true"
	           	maps_type="google"
	           	maps_bing_api_key=""
	           	maps_google_api_key=""
	           	maps_zoombuttons="false"
	           	gyro="true"
	           	webvr="true"
	           	webvr_gyro_keeplookingdirection="false"
	           	littleplanetintro="false"
	           	title="true"
	           	thumbs="true"
	           	thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop=""
	           	thumbs_opened="true"
	           	thumbs_text="true"
	           	thumbs_dragging="true"
	           	thumbs_onhoverscrolling="false"
	           	thumbs_scrollbuttons="false"
	           	thumbs_scrollindicator="false"
	           	thumbs_loop="false"
	           	tooltips_buttons="false"
	           	tooltips_thumbs="false"
	           	tooltips_hotspots="false"
	           	tooltips_mapspots="false"
	           	deeplinking="false"
	           	loadscene_flags="MERGE"
	           	loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)"
	           	loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)"
	           	loadscene_blend_next="SLIDEBLEND(0.5,   0, 0.75, linear)"
	           	loadingtext="loading..."
	           	layout_width="100%"
	           	layout_maxwidth="814"
	           	controlbar_width="-24"
	           	controlbar_height="40"
	           	controlbar_offset="20"
	           	controlbar_offset_closed="-40"
	           	controlbar_overlap.no-fractionalscaling="10"
	           	controlbar_overlap.fractionalscaling="0"
	           	design_skin_images="vtourskin.png"
	           	design_bgcolor="0x2D3E50"
	           	design_bgalpha="0.8"
	           	design_bgborder="0"
	           	design_bgroundedge="1"
	           	design_bgshadow="0 4 10 0x000000 0.3"
	           	design_thumbborder_bgborder="3 0xFFFFFF 1.0"
	           	design_thumbborder_padding="2"
	           	design_thumbborder_bgroundedge="0"
	           	design_text_css="color:#FFFFFF; font-family:Arial;"
	           	design_text_shadow="1"
	           	/>

	<!--
		For an alternative skin design either change the <skin_settings> values 
		from above or optionally include one of the predefined designs from below.
	-->
	<!-- <include url="skin/vtourskin_design_flat_light.xml"  /> -->
	<!-- <include url="skin/vtourskin_design_glass.xml"   	/> -->
	<!-- <include url="skin/vtourskin_design_ultra_light.xml" /> -->
	<!-- <include url="skin/vtourskin_design_117.xml"     	/> -->
	<!-- <include url="skin/vtourskin_design_117round.xml"	/> -->


	<!-- startup action - load the first scene -->
	<action name="startup" autorun="onstart">
		if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
		loadscene(get(startscene), null, MERGE);
		if(startactions !== null, startactions() );
	</action>
	


	<scene name="scene_achilleion-hof-unten" title="Achilleion - Garden" onstart="" thumburl="panos/achilleion-hof-unten.tiles/thumb.jpg" lat="39.563340" lng="19.904324" heading="0.0">

		<view hlookat="-1" vlookat="11" fovtype="MFOV" fov="120" fovmin="70" fovmax="140" limitview="auto" />

		<preview url="panos/achilleion-hof-unten.tiles/preview.jpg" />

		<image>
			<cube url="panos/achilleion-hof-unten.tiles/mobile_%s.jpg" />
		</image>

	</scene>

	<scene name="scene_canaldemure5" title="Canal d´Amour 2" onstart="" thumburl="panos/canaldemure5.tiles/thumb.jpg" lat="39.796233694" lng="19.70181763" heading="0.0">

		<view hlookat="-118" vlookat="4" fovtype="MFOV" fov="132" fovmin="70" fovmax="140" limitview="auto" />

		<preview url="panos/canaldemure5.tiles/preview.jpg" />

		<image>
			<cube url="panos/canaldemure5.tiles/mobile_%s.jpg" />
		</image>

	</scene>



	<scene name="videopano" thumburl="videothumb.jpg"  title="krpano Panoramic Video Example">

		<!-- include the videoplayer interface / skin (with VR support) -->
		<include url="skin/videointerface.xml" />

		<layer name="skin_btn_playpause" url="skin/vtourskin.png" crop="0|640|64|64" align="topleft" x="5" y="135" scale="0.6" onclick="plugin[video].togglepause();" />

		<!-- include the videoplayer plugin -->
		<plugin name="video"
		    	url.html5="%SWFPATH%/plugins/videoplayer.js"
		    	url.flash="%SWFPATH%/plugins/videoplayer.swf"
		    	pausedonstart="false"
		    	loop="true"
		    	volume="1.0"
		    	onloaded="add_video_sources();"
		    	/>

		<!-- use the videoplayer plugin as panoramic image source -->
		<image>
			<sphere url="plugin:video" />
		</image>

		<!-- set the default view -->
		<view hlookat="0" vlookat="0" fovtype="DFOV" fov="130" fovmin="75" fovmax="150" distortion="0.0" />

		<!-- add the video sources and play the video -->
		<action name="add_video_sources">
			videointerface_addsource('1024x512', '%CURRENTXML%/video-1024x512.mp4|%CURRENTXML%/video-1024x512.webm|%CURRENTXML%/iphone-audio.m4a', '%CURRENTXML%/video-1024x512-poster.jpg');
			videointerface_addsource('1920x960', '%CURRENTXML%/video-1920x960.mp4|%CURRENTXML%/video-1920x960.webm|%CURRENTXML%/iphone-audio.m4a', '%CURRENTXML%/video-1920x960-poster.jpg');
			
			if(device.ios,
				<!-- iOS Safari has a very slow 'video-to-webgl-texture' transfer, therefore use a low-res video by default -->
				videointerface_play('1024x512');
			  ,
				videointerface_play('1920x960');
			  );
		</action>

	</scene>




	</krpano>

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Islander« (29. September 2017, 04:13)


2

Freitag, 29. September 2017, 15:34

Hi,

the vtourskin.xml and the videointeface.xml examples are not designed to be mixable.

The vtourskin.xml itself has already a build-in video support, but it would need to be enabled manually.

At the video <scene> add - isvideopano="true" and inside the scene define a videoplayer plugin named 'video'.

Here a full example for a video scene:

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<scene name="scene_video" title="Video Pano" onstart="" thumburl="panos/video/thumb.jpg" isvideopano="true">

    <view ... />

    <image>
        <sphere url="plugin:video" />
    </image>
        
    <plugin name="video"
        url.flash="%SWFPATH%/plugins/videoplayer.swf"
        url.html5="%SWFPATH%/plugins/videoplayer.js"
        posterurl="panos/video/poster.jpg"
        videourl="panos/video/video.mp4|panos/video/video.webm"
        onvideoready="skin_showloading(false);"
        />
        
</scene>


Best regards,
Klaus

3

Freitag, 29. September 2017, 19:21

Hi Klaus,

i can't get the layer button on the left to toggle between play/pause visually. But the overall scene response is much better.
I guess this example will add so much in terms of new possibilities for myself and others. So many thanks for this tip.

I just hope to be able to get the additional button which I've added to toggle visually between the 2 crop states.

Quellcode

1
<layer name="skin_btn_playpause" style="skin_base|skin_glow" url="skin/vtourskin.png" crop="0|640|64|64" align="topleft" x="5" y="135" scale="0.6" onclick="skin_video_playpause_click();" />