You are not logged in.

swfobject html5

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.

snote

Beginner

  • "snote" started this thread

Posts: 7

  • Send private message

1

Tuesday, June 25th 2019, 4:36am

swfobject html5

Hello.

I am trying to get some old panos working in html5. They were made with swfobject/swfkrpano.js. The flash versions are working but nothing happens in html5. No error, only black screen. The cursor is switching to the draging one, but as it looks, no data.

This is my html:

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

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  <title>Virtual Tour generated by Panotour</title>
  <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <style type="text/css">
	@media only screen and (min-device-width: 800px) { html { overflow:hidden; } }
	* { padding: 0; margin: 0; }
	html { height: 100%; }
	body { height: 100%; overflow:hidden; }
	#container { height: 100%; min-height: 100%; width: 100%; margin: 0 auto; }
  </style>
</head>
<body><script src="embedpano.js"></script>
  <script src="swfobject/swfkrpano.js"></script>

  <div id="pano" style="width:100%;height:100%;">
	<noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;text-align:center;"><td>ERROR:<br><br>Javascript not activated<br><br></td></tr></table></noscript>
	<script>
		if(!document.domain && window.chrome && location.search.toLowerCase().indexOf("html5=only") > 0)
		{
			// Chrome doesn't allow loading local xml files in HTML5
			document.getElementById("pano").innerHTML = '<table style="width:100%;height:100%;"><tr style="vertical-align:middle;text-align:center;"><td>Loading local/offline xml files is not allowed in HTML5 due Chrome security restrictions!<br>Use a localhost server (like the <a href="http://krpano.com/tools/ktestingserver/#top">krpano Testing Server</a>) for local/offline testing.</td></tr></table>';
		}
		else
		{
			embedpano({swf:"krpano.swf", xml:"krpano.xml", target:"pano", html5:"prefer", passQueryParameters:true});
		}
	</script>
</div>
</body>
</html>

Like this it works on flash, if I delete <script src="swfobject/swfkrpano.js"></script>
the browser shows that html5 player is loaded but shows black screen.

snote

Beginner

  • "snote" started this thread

Posts: 7

  • Send private message

2

Thursday, June 27th 2019, 6:32pm

Ich habe weitere Details herausgefunden:
Es liegt nicht an der Swfobject, die xml muss Schuld sein.

Allerdings habe ich sie validiert, in ff getestet und es sollten keine Fehler vorliegen.
Trotzdem gibt es nur einen schwarzen Bildschirm...

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
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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289

<krpano version="1.0.8.14" logkey="false"  


onstart=" delayedcall(3,action(fadein,loogo); ); 
 wait(blend);
lookat(150,0,100); 
wait(blend);action(load1);
				oninterrupt(action(lookinterrupt));
		lookto(0,-3,179,smooth(20,20,20));
		action(loadingdone);
		">
		<events onxmlcomplete="onxmlcompleteaction();"/>
	<action name="onxmlcompleteaction">
		unselectmapspotsbutpassed();
		selectmapspot(mapspot5,258);
	</action>
		<action name="mainloadpano">
		closepanoobjects();
		ifnot(stopSequence === undefined,interruptAnimation(););
		loadpano(%1,NULL,NULL,BLEND(1));
	</action>
		
		<action name="fadein">
	  set(plugin[%1].visible,true);
	  tween(plugin[%1].alpha,2,0.5);
	</action>
	<action name="fadeout">
	  tween(plugin[%1].alpha,0,0.5,easeoutquad,set(plugin[%1].visible,false));
	</action>
	<action name="load1">
				loadpano(krpano5.xml,null,KEEPALL,BLEND(2));
		</action>
		<action name="loadingdone">
		pop(view.fovmin);
		set(hotspot.visible,true);
	</action>
	<action name="lookinterrupt">
		action(loadingdone);
		breakall();	
	</action>
 <plugin name="loogo" url="loogo.png" align="bottom" alpha="0" visible="false" onclick="action(moveto4)" />  

	
	<!--************** KrPano Pluginsund Daten ****************************************************-->
	<plugin name="data" soundOn="true" keep="true"/>
	<!--************** Das erste Pano öffnen ******************************************************-->
  
	<autorotate enabled="false"/>
	<plugin name="soundinterface" preload="true" url="krpanodata/graphics/soundinterface.swf" keep="true"/>
	<action name="playsoundaction">
		set(plugin[data].soundOn, true);
		playpanosounds(forcesounds);
	</action>
	<action name="stopsoundaction">
		set(plugin[data].soundOn, false);
		stoppanosounds();
	</action>
	<!--************** Schriftarten ***************************************************************-->
	<textstyle name="DEFAULT" bold="false" font="Capture it" fontsize="16" italic="false" textcolor="0xff000000"/>
	<!--************** Lensflares *****************************************************************-->
	<lensflareset name="DEFAULT" url="krpanodata/graphics/flares.jpg"/>
	<!--************** Menü ***********************************************************************-->
	<plugin name="in" align="bottom" crop="0|0|65|65" customColor="true" height="prop" keep="true" ondown="set(fov_moveforce,-1);" onout="" onover="" onovercrop="0|65|65|65" onup="set(fov_moveforce,0);" url="krpanodata/graphics/menu/menu0.png" width="40" x="-140" y="10"/>
	<plugin name="out" align="bottom" crop="0|0|65|65" customColor="true" height="prop" keep="true" ondown="set(fov_moveforce,+1);" onout="" onover="" onovercrop="0|65|65|65" onup="set(fov_moveforce,0);" url="krpanodata/graphics/menu/menu1.png" width="40" x="-100" y="10"/>
	<plugin name="left" align="bottom" crop="0|0|65|65" customColor="true" height="prop" keep="true" ondown="set(hlookat_moveforce,-1);" onout="" onover="" onovercrop="0|65|65|65" onup="set(hlookat_moveforce,0);" url="krpanodata/graphics/menu/menu2.png" width="40" x="-60" y="10"/>
	<plugin name="right" align="bottom" crop="0|0|65|65" customColor="true" height="prop" keep="true" ondown="set(hlookat_moveforce,+1);" onout="" onover="" onovercrop="0|65|65|65" onup="set(hlookat_moveforce,0);" url="krpanodata/graphics/menu/menu3.png" width="40" x="-20" y="10"/>
	<plugin name="up" align="bottom" crop="0|0|65|65" customColor="true" height="prop" keep="true" ondown="set(vlookat_moveforce,-1);" onout="" onover="" onovercrop="0|65|65|65" onup="set(vlookat_moveforce,0);" url="krpanodata/graphics/menu/menu4.png" width="40" x="20" y="10"/>
	<plugin name="down" align="bottom" crop="0|0|65|65" customColor="true" height="prop" keep="true" ondown="set(vlookat_moveforce,+1);" onout="" onover="" onovercrop="0|65|65|65" onup="set(vlookat_moveforce,0);" url="krpanodata/graphics/menu/menu5.png" width="40" x="60" y="10"/>
	<plugin name="home" align="bottom" crop="0|0|65|65" customColor="true" height="prop" keep="true" onclick="lookto(get(panoview.h),get(panoview.v),get(panoview.fov),smooth(100,20,50));" onout="" onover="" onovercrop="0|65|65|65" url="krpanodata/graphics/menu/menu6.png" width="40" x="100" y="10"/>
	<plugin name="openfs" align="bottom" crop="0|0|65|65" customColor="true" height="prop" keep="true" onclick="set(fullscreen,true);" onout="" onover="" onovercrop="0|65|65|65" url="krpanodata/graphics/menu/menu7.png" width="40" x="140" y="10"/>
	<plugin name="closefs" align="bottom" crop="0|0|65|65" customColor="true" height="prop" keep="true" onclick="set(fullscreen,false);" onout="" onover="" onovercrop="0|65|65|65" url="krpanodata/graphics/menu/menu8.png" visible="false" width="40" x="140" y="10"/>
	<events onenterfullscreen="set(plugin[openfs].visible,false); set(plugin[closefs].visible,true);" onexitfullscreen="set(plugin[openfs].visible,true); set(plugin[closefs].visible,false);"/>
	<!--************** Plugin Karte ***************************************************************-->
	<plugin name="map" url="krpanodata/map/map.jpg" keep="true" align="righttop" x="10" y="10" width="200" height="183" handcursor="false" onloaded="showmapspot();" onclick="closemap"/>
	<plugin keep="true" visible="false" name="mapspot0" onclick="mainloadpano(krpano4.xml);" url="krpanodata/graphics/spots/spot0.png" blingCounter="0" align="lefttop" edge="center" parent="map" x="52.1472%" y="69.7987%"/>
	<plugin keep="true" visible="false" name="mapspot1" onclick="mainloadpano(krpano2.xml);" url="krpanodata/graphics/spots/spot0.png" blingCounter="0" align="lefttop" edge="center" parent="map" x="81.5951%" y="75.1678%"/>
	<plugin keep="true" visible="false" name="mapspot2" onclick="mainloadpano(krpano0.xml);" url="krpanodata/graphics/spots/spot0.png" blingCounter="0" align="lefttop" edge="center" parent="map" x="26.3804%" y="75.1678%"/>
	<plugin keep="true" visible="false" name="mapspot3" onclick="mainloadpano(krpano1.xml);" url="krpanodata/graphics/spots/spot0.png" blingCounter="0" align="lefttop" edge="center" parent="map" x="33.1288%" y="36.9128%"/>
	<plugin keep="true" visible="false" name="mapspot4" onclick="mainloadpano(krpano3.xml);" url="krpanodata/graphics/spots/spot0.png" blingCounter="0" align="lefttop" edge="center" parent="map" x="82.8221%" y="14.094%"/>
	<plugin keep="true" visible="false" name="mapspot5" onclick="mainloadpano(krpano5.xml);" url="krpanodata/graphics/spots/spot0.png" blingCounter="0" align="lefttop" edge="center" parent="map" x="50%" y="100%"/>
	<plugin name="mapradar" parent="map" edge="center" align="lefttop" keep="true" url="krpanodata/map/radar.swf" visible="true" width="70" height="70" linecolor="0xefff07" linealpha="0.494118" linewidth="2" fillcolor="0xff1900" fillalpha="0.494118"/>
	<action name="showmapspot">
		set(  plugin[mapspot0].alpha  , 0);
		set(  plugin[mapspot0].visible, true);
		tween(plugin[mapspot0].alpha  , 1);
		set(  plugin[mapspot1].alpha  , 0);
		set(  plugin[mapspot1].visible, true);
		tween(plugin[mapspot1].alpha  , 1);
		set(  plugin[mapspot2].alpha  , 0);
		set(  plugin[mapspot2].visible, true);
		tween(plugin[mapspot2].alpha  , 1);
		set(  plugin[mapspot3].alpha  , 0);
		set(  plugin[mapspot3].visible, true);
		tween(plugin[mapspot3].alpha  , 1);
		set(  plugin[mapspot4].alpha  , 0);
		set(  plugin[mapspot4].visible, true);
		tween(plugin[mapspot4].alpha  , 1);
		set(  plugin[mapspot5].alpha  , 0);
		set(  plugin[mapspot5].visible, true);
		tween(plugin[mapspot5].alpha  , 1);
	</action>
	<action name="hidemapspot">
		set(plugin[mapspot0].visible,false);
		set(plugin[mapspot1].visible,false);
		set(plugin[mapspot2].visible,false);
		set(plugin[mapspot3].visible,false);
		set(plugin[mapspot4].visible,false);
		set(plugin[mapspot5].visible,false);
	</action>
	<!-- Die Karte schließen -->
	<action name="closemap">
		set(plugin[mapradar].visible,false);
		hidemapspot();
		set(plugin[map].onclick,openmap);
		tween(plugin[map].width , 40);
		tween(plugin[map].height, 36);
	</action>
	<!-- Die Karte öffnen -->
	<action name="openmap">
		if(plugin[mapradar].shouldbevisible == true, set(plugin[mapradar].visible,true););
		set(plugin[map].onclick, closemap);
		tween(plugin[map].height, 183, 0.5, easeoutquad);
		tween(plugin[map].width , 200, 0.5, easeoutquad, showmapspot(););
		set(plugin[map].align, righttop);
		set(plugin[map].x	, 10);
		set(plugin[map].y	, 10);
	</action>
	<!-- Auswahl für alle Kartenpunkte aufheben außer für den der ein Argument enthält -->
	<!-- Auswahl für alle Kartenpunkte aufheben wenn kein Argument angegeben ist -->
	<action name="unselectmapspotsbutpassed">
		set(plugin[mapradar].visible    	, false);
		set(plugin[mapradar].shouldbevisible, false);
		if (%1 != mapspot0,
				if(plugin[mapspot0].animated,
				set(plugin[mapspot0].frame       	, 0);
				set(plugin[mapspot0].ypos        	, 0);
				set(plugin[mapspot0].animationCounter, 0)
				txtadd(plugin[mapspot0].crop,'0|0|',get(plugin[mapspot0].framewidth),'|',get(plugin[mapspot0].frameheight));
			,
				set(plugin[mapspot0].blingCounter, 0)
			)
		);
		resetmapspot(mapspot0);
		if (%1 != mapspot1,
				if(plugin[mapspot1].animated,
				set(plugin[mapspot1].frame       	, 0);
				set(plugin[mapspot1].ypos        	, 0);
				set(plugin[mapspot1].animationCounter, 0)
				txtadd(plugin[mapspot1].crop,'0|0|',get(plugin[mapspot1].framewidth),'|',get(plugin[mapspot1].frameheight));
			,
				set(plugin[mapspot1].blingCounter, 0)
			)
		);
		resetmapspot(mapspot1);
		if (%1 != mapspot2,
				if(plugin[mapspot2].animated,
				set(plugin[mapspot2].frame       	, 0);
				set(plugin[mapspot2].ypos        	, 0);
				set(plugin[mapspot2].animationCounter, 0)
				txtadd(plugin[mapspot2].crop,'0|0|',get(plugin[mapspot2].framewidth),'|',get(plugin[mapspot2].frameheight));
			,
				set(plugin[mapspot2].blingCounter, 0)
			)
		);
		resetmapspot(mapspot2);
		if (%1 != mapspot3,
				if(plugin[mapspot3].animated,
				set(plugin[mapspot3].frame       	, 0);
				set(plugin[mapspot3].ypos        	, 0);
				set(plugin[mapspot3].animationCounter, 0)
				txtadd(plugin[mapspot3].crop,'0|0|',get(plugin[mapspot3].framewidth),'|',get(plugin[mapspot3].frameheight));
			,
				set(plugin[mapspot3].blingCounter, 0)
			)
		);
		resetmapspot(mapspot3);
		if (%1 != mapspot4,
				if(plugin[mapspot4].animated,
				set(plugin[mapspot4].frame       	, 0);
				set(plugin[mapspot4].ypos        	, 0);
				set(plugin[mapspot4].animationCounter, 0)
				txtadd(plugin[mapspot4].crop,'0|0|',get(plugin[mapspot4].framewidth),'|',get(plugin[mapspot4].frameheight));
			,
				set(plugin[mapspot4].blingCounter, 0)
			)
		);
		resetmapspot(mapspot4);
		if (%1 != mapspot5,
				if(plugin[mapspot5].animated,
				set(plugin[mapspot5].frame       	, 0);
				set(plugin[mapspot5].ypos        	, 0);
				set(plugin[mapspot5].animationCounter, 0)
				txtadd(plugin[mapspot5].crop,'0|0|',get(plugin[mapspot5].framewidth),'|',get(plugin[mapspot5].frameheight));
			,
				set(plugin[mapspot5].blingCounter, 0)
			)
		);
		resetmapspot(mapspot5);
	</action>
	<!-- Wählen Sie einen spezifischen Punkt auf der Karte -->
	<action name="selectmapspot">
		unselectmapspotsbutpassed(%1);
		if(plugin[%1].animated,
			inc(plugin[%1].animationCounter, 1);
			if(plugin[%1].animationCounter == 1,
				animatemapspot(%1, 0.1);
			);
		,
			inc(plugin[%1].blingCounter,1);
			if(plugin[%1].blingCounter == 1,
				blingmapspot(%1);
			);
		);
		copy(plugin[mapradar].x          	, plugin[%1].x);
		copy(plugin[mapradar].y          	, plugin[%1].y);
		set( plugin[mapradar].heading    	, %2      	);
		set( plugin[mapradar].shouldbevisible, true    	);
		if(plugin[map].onclick == closemap, set(plugin[mapradar].visible,true););
	</action>
	<!-- Der Hotspot leuchtet bei Auswahl auf (rekursive Aktion) -->
	<action name="blingmapspot">
		tween(plugin[%1].alpha, 0.0, 0.8, easeInSine  );
		tween(plugin[%1].scale, 1.5, 0.8, easeOutCubic);
		tween(, , 0.8, , resetmapspot(%1);
		if(plugin[%1].blingCounter &gt; 0, blingmapspot(%1);););
	</action>
	<action name="resetmapspot">
		set(plugin[%1].scale,1);
		set(plugin[%1].alpha,1);
	</action>
	<!--************** Fliegende Hotspots *********************************************************-->
	<action name="flyout">
		ifnot (hotspot[%1].flying == 1.0,
			tween(hotspot[%1].rx, 0);
			tween(hotspot[%1].ry, 0);
			tween(hotspot[%1].rz, 0);
			tween(hotspot[%1].width , get(hotspot[%1].flying_width ));
			tween(hotspot[%1].height, get(hotspot[%1].flying_height));
			tween(hotspot[%1].zorder, 10);
			tween(hotspot[%1].flying, 1.0);
		);
	</action>
	<action name="flyback">
		ifnot (hotspot[%1].flying == 0.0,
			tween(hotspot[%1].rx, get(hotspot[%1].backup_rx));
			tween(hotspot[%1].ry, get(hotspot[%1].backup_ry));
			tween(hotspot[%1].rz, get(hotspot[%1].backup_rz));
			tween(hotspot[%1].width , get(hotspot[%1].backup_width ));
			tween(hotspot[%1].height, get(hotspot[%1].backup_height));
			tween(hotspot[%1].zorder, 1);
			tween(hotspot[%1].flying, 0.0);
		);
	</action>
	<!--************** Hintergrundmusik ***********************************************************-->
	<action name="playbackgroundsound">
		if(%1 == none,
			stopallsounds();
			set(plugin[soundinterface].background,%1);
			,
			if(plugin[soundinterface].background == %1,
				if (%3 == forcesounds,
					stopallsounds();playsound(backgroundsound,%1,%2);
				)
				,
				stopallsounds();playsound(backgroundsound,%1,%2);
				set(plugin[soundinterface].background,%1);
			)
		);
	</action>
	<action name="stopbackgroundsound">
		stopsound(backgroundsound);
	</action>
	<!--************** Sequenz-Animation **********************************************************-->
	<action name="animate">
		if (stopSequence == false,
			inc(hotspot[%1].frame,1,get(hotspot[%1].lastframe),0);
			mul(hotspot[%1].ypos,hotspot[%1].frame,hotspot[%1].frameheight);
			txtadd(hotspot[%1].crop,'0|',get(hotspot[%1].ypos),'|',get(hotspot[%1].framewidth),'|',get(hotspot[%1].frameheight));
			delayedcall(%2, animate(%1,%2) );
		);
	</action>
	<!-- Raise sequence stopper and wait sequence time to break the delayed calls -->
	<action name="interruptAnimation">
		ifnot (stopSequence === undefined,
			set(stopSequence, true);
			wait(0.1);
		);
	</action>
</krpano>

indexofrefraction

Professional

Posts: 1,355

  • Send private message

3

Thursday, June 27th 2019, 10:34pm

krpano 1.0.8 ist schon sehr alt ;)

jedenfalls kannst du nicht einfach nur diese zeile löschen
<script src="swfobject/swfkrpano.js"></script>

du musst ersatzweise schon ein js einbetten...
das heisst meist entweder krpano.js oder tour.js

oder du generierst ein neues:
im krpano tools, unter protect tool, ganz unten "generate viewers"
zFilter plugin -- zFlare plugin -- zSnapshot plugin

snote

Beginner

  • "snote" started this thread

Posts: 7

  • Send private message

4

Sunday, June 30th 2019, 12:53am

Ich weiss, deshalb habe ich ja auch alles upgedated und die neuen .js eingebettet.
Der Player funktioniert ja auch, zeigt nur keinen Inhalt. Und der müsste,
meiner Meinung nach, ja ausschließlich von der .xml kommen.

indexofrefraction

Professional

Posts: 1,355

  • Send private message

5

Sunday, June 30th 2019, 1:47am

dass dein xml valid ist, heisst nicht, dass der code noch mit 1.19pr16 kompatibel ist

lösch mal dein altes index.html und nimm ein neues, das von 1.19pr16 generiert wurde
dazu gehört auch ein neues tour.js (oder manchmal krpano.js)
und die aktuellen plugins (soundinterface.js etc)

damit hast du mal eine neue basis

(du kannst zb ein bild auf eines der droplets ziehen
und dann im generierten ordner das xml durch dein altes ersetzen
und deine weiteren assets/panos hinein kopieren)

die optionen für die einbettung (html5 statt flash benutzen etc) sind hier dokumentiert
https://krpano.com/docu/html/#top

in deinem xml setze logkey="true" und evtl noch debug="true"
dann kannst du mit o die console öffnen.

was sich seit 1.08 alles geändert hat weiss ich nicht,
aber so sollten zumindest fehlermeldungen gezeigt werden

zb musst du nicht mehr soundinterface.swf sondern das aktuelle soundinterface.js einbetten
zFilter plugin -- zFlare plugin -- zSnapshot plugin

snote

Beginner

  • "snote" started this thread

Posts: 7

  • Send private message

6

Sunday, June 30th 2019, 6:26pm

Jo, das html habe ich auch schon upgedated.

logkey="true" und debug="true" hört sich vielversprechend an,
beim ersten Versuch ohne Wirkung, aber damit experimentiere ich mal ein wenig.
Vielen Dank für diesen Tipp,
Snote

Similar threads