Krpano学习：视频音频播放

最新推荐文章于 2024-09-13 07:04:23 发布

路人甲JIA

最新推荐文章于 2024-09-13 07:04:23 发布

阅读量4.1k

点赞数 2

分类专栏： Krpano 文章标签： krpano panorama media audio video

本文链接：https://blog.csdn.net/u013719339/article/details/73089947

版权

Krpano 专栏收录该内容

14 篇文章 7 订阅

订阅专栏

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" οnclick="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" οnclick="bgsndmusic();" />
<hotspot name="音乐2" url="picture/pause.jpg" scale="0.2" ath="-123.124" atv="10.052" οnclick="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" οnclick="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" οnclick="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" οnclick="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" οnclick="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实现视频音频播放。