Krpano学习：视频音频播放

krpano自带视频和音频的插件，只要引用进来就行。

<!-- 声音插件 --><plugin name="soundinterface"url.flash="%SWFPATH%/plugins/soundinterface.swf"url.html5="%SWFPATH%/plugins/soundinterface.js"rootpath=""preload="true"keep="true"/><!-- 以上代码写在scene外面，以下代码写在scene里面 --><!-- bgsnd 该声音的id，可选择其他id，如bg, 要与其他声音不冲突， id为krpano中声音标识 --><!-- 0 循环播放 1只播放一次 --><!-- playsound后还有第四个参数，声音播放完后执行的动作 --><action name="bgsndmusic">playsound(bgsnd, 'picture/music.mp3', 0);</action><!-- 暂停与播放  --><action name="playmusic">pausesoundtoggle(bgsnd);</action><hotspot name="视频" url="picture/video.png" scale="0.4" ath="-161.321" atv="38.679" onclick="looktohotspot(get(name),90); videoplayer_open('picture/video.mp4', '%CURRENTXML%/告白气球.png', 0.5);" /><hotspot name="音乐" url="picture/play.jpg" scale="0.4" ath="-123.124" atv="15.052" onclick="bgsndmusic();" /><hotspot name="音乐2" url="picture/pause.jpg" scale="0.2" ath="-123.124" atv="10.052" onclick="playmusic();" />

但是上面的代码有一些问题：

1.音频的播放和暂停必须使用两个键，点击播放键永远会从头开始播放音乐，因而不能用一个键控制声音的播放与暂停。可能是有的，但是我没找到方法。

2.音频视频的播放都不能控制进度，不能随意调节播放位置。

因而，我决定使用html来播放视频音频，先写好视频和音频的html文件，然后再在krpano中调用这两个html。参考krpano360的krpano中嵌入html。

<!-- 音频网页嵌入 transpa.png为透明图片，用于承接html的内容--><layer name="iframelayer_audio" keep="true" url="picture/transpa.png" align="righttop" height="6%" width="18%" zorder="10" visible="false" ><layer name="closeaudio" url="picture/close.png" scale="1.6" align="righttop" zorder="99" x="3" y="8" onclick="remove_iframe_audio(); set(layer[iframelayer_audio].visible, false); " /></layer><action name="call_iframe_audio">callwith(layer[iframelayer_audio],add_iframe_audio(%1, 100%, 100%);set(visible,true));</action><action name="add_iframe_audio" type="Javascript"><![CDATA[var iframe = document.createElement("iframe");iframe.style.position = "absolute";iframe.style.left = 0;iframe.style.top = 0;iframe.style.width = "100%";iframe.style.height = "100%";iframe.style.border = 0;iframe.src = args[1];iframe.setAttribute('id', resolve(caller.name));caller.registercontentsize(args[2], args[3]);caller.sprite.appendChild(iframe);caller.sprite.style.overflowY = "auto";caller.sprite.style.overflowX = "auto";]]></action><action name="remove_iframe_audio" type="Javascript"><![CDATA[var lastIframe = document.getElementById('iframelayer_audio');lastIframe.parentNode.removeChild(lastIframe);]]></action><!-- 视频网页嵌入 if(name==="video", set(layer[iframelayer_video].align,center)); height="62%" width="42.5%"--><layer name="iframelayer_video" keep="true" url="picture/transpa.png" align="center" height="62%" width="42.5%" alpha="0.8" zorder="2" visible="false" ><layer name="closevideo" url="picture/close.png" align="rightttop" zorder="99" x="15" y="10" onclick="remove_iframe_video(); set(layer[iframelayer_video].visible, false);" /></layer><action name="call_iframe_video">callwith(layer[iframelayer_video],add_iframe_video(%1, 100%, 100%);set(visible,true));</action><action name="add_iframe_video" type="Javascript"><![CDATA[var iframe = document.createElement("iframe");iframe.style.position = "absolute";iframe.style.left = 0;iframe.style.top = 0;iframe.style.width = "100%";iframe.style.height = "100%";iframe.style.border = 0;iframe.src = args[1];iframe.setAttribute('id', resolve(caller.name));caller.registercontentsize(args[2], args[3]);caller.sprite.appendChild(iframe);caller.sprite.style.overflowY = "auto";caller.sprite.style.overflowX = "auto";]]></action><action name="remove_iframe_video" type="Javascript"><![CDATA[var lastIframe = document.getElementById('iframelayer_video');lastIframe.parentNode.removeChild(lastIframe);]]></action><!-- 点--><hotspot name="audio" url="picture/soundonoff.png" ath="-132.718" atv="-6.747" crop="0|50|50|50" onclick="remove_iframe_audio(); call_iframe_audio('http://000.000.000.000:8090/AudioPlayer.html');" /><hotspot name="video" url="picture/video.png" scale="0.3" ath="56.530" atv="-30.381" onclick="remove_iframe_video(); call_iframe_video('http://000.000.000.000:8090/VideoPlayer.html');" />

但是以上代码还是有问题:

1.transpa.png为透明图片，用于承接html的内容，因而必须给它一个大小，但是目前我只会给定固定大小，不知道可以怎么自适应html内容的大小，或者根据显示器的大小来自适应。

2.视频和音频应该是可以写成一个iframelayer的，但是由于我设置的大小和位置不一样，所以也不知道要怎么去对其进行修改。

以上两个问题应该是同一个问题，krpano可以直接写javascript方法，所以接下来应该会在这上面想办法。——看我的下一篇文章Krpano学习：krpano调用js方法并传参、在krpano中用JS实现视频音频播放