krpano 小記

給網易漫畫部做了一個全景的紙盒視頻，在這里記錄一些功能實現點。

背景音樂的播放：

1、插件引用

   <plugin name="soundinterface"
         url="%SWFPATH%/plugins/soundinterface.swf"
         alturl="%SWFPATH%/plugins/soundinterface.js"
         rootpath=""
         preload="true"
         keep="true"
   volume ="0.2"
         />

2、在 onstart action 里面添加 播放代碼 playsound(bggsnd, '%SWFPATH%/bgm.mp3', 0); //數字 0 表示無限循環

 

視頻自動播放：

1、引入視頻場景

		<scene name="liftTohell" isvideopano="true" thumburl="%CURRENTXML%/liftTohell.jpg" title="playing">
 
		<!-- include the videoplayer plugin -->
		<plugin name="video"
		        url.html5="%SWFPATH%/plugins/videoplayer.js"
		        url.flash="%SWFPATH%/plugins/videoplayer.swf"
		        pausedonstart="true"
		        loop="false"
		        volume="1.0"
		        posterurl.ios="%CURRENTXML%/liftTohell.jpg"
	                videourl.ios="%CURRENTXML%/liftTohell.mp4"
	                posterurl.no-ios="%CURRENTXML%/liftTohell.jpg"
	                videourl.no-ios="%CURRENTXML%/liftTohell.mp4"
	       
		        />
 
		<!-- use the videoplayer plugin as panoramic image source -->
		<image>
			<sphere url="plugin:video" />
		</image>
 
		<!-- set the default view -->
		<view hlookat="-3.861" vlookat="-2.989" fovtype="MFOV" fov="128.796" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
 		<!-- place your scene hotspots here -->
	</scene>

 2、在這段代碼里面找到 pausedonstart="true" 改成 pausedonstart="false"

 

給熱點添加幀動畫外加地址跳轉:

<hotspot name="spot1" url="more.png" onloaded="do_crop_animation(128,128, 10);"  onclick = "loadWebAddress();"  style="skin_hotspotstyle"  ath="0.061" atv="32.231" linkedscene="scene_liftover" />

屬性里面 url="more.png" 就是序列幀圖片,onloaded="do_crop_animation(128,128, 10);"這就處理序列幀動畫的方法， 三個參數分別就是圖片單幀的寬、高、幀數量。

		<action name="do_crop_animation">
		<!-- add attributes to the hotspot -->	
		registerattribute(xframes, calc((imagewidth / %1) BOR 0));
		registerattribute(yframes, calc((imageheight / %2) BOR 0));
		registerattribute(frames, calc(xframes * yframes));
		registerattribute(frame, 0);

		set(crop, '0|0|%1|%2');

		setinterval(calc('crop_anim_' + name), calc(1.0 / %3),
			if(loaded,
				inc(frame);
				if(frame GE frames, if(onlastframe !== null, onlastframe() ); set(frame,0); );
				mod(xpos, frame, xframes);
				div(ypos, frame, xframes);
				Math.floor(ypos);
				mul(xpos, %1);
				mul(ypos, %2);
				calc(crop, xpos + '|' + ypos + '|%1|%2');
			  ,
				clearinterval(calc('crop_anim_' + name));
			  );
		  );
	</action>

 屬性里面 onclick = "loadWebAddress();" 就是地址跳轉

	<action name="loadWebAddress">
		openurl("http://manhua.163.com/reader/4317041374930046603/4499978832940091876#imgIndex=0@scale=7",_self);
	</action>	

 _self 表示在當前頁打開_blank 在新選項卡打開

 

延時調用方法 delayedcall(7,loadscene(scene_LiftOpen)); 數字7表示延遲的時間，這里表示7秒后加載一個名字叫scene_LiftOpen的場景

動態添加熱點，並配置屬性：

addhotspot(newspot);//創建一個名叫newspot的熱點
set(hotspot[newspot].url,skin/vtourskin_hotspot.png);//設置其外表路徑
set(hotspot[newspot].ath,150);//水平坐標
set(hotspot[newspot].atv,30);//垂直坐標
set(hotspot[newspot].scale,0.7);//縮放
set(hotspot[newspot].zoom,true);//是否可伸縮

讓視角線性聚集到熱點：

looktohotspot(newspot);

刪除熱點：

removehotspot(newspot);

更多詳細信息見官網：www.krpano.com