Krpano中的action可以调用javascript中写好的函数。
主要参考krpano360的资料和new720的资料。个人感觉前者没有后者讲的清楚,后者更适合初学者一些。
根据krpano调用js的方法,就可以用krpano调用js,然后用js写视频和音频。顺序是在js文件中写好要实现的功能(我的js文件名称为action.js),然后在krpano生成的tour.html中引入这个写好的js文件,最后在krpano生成的tour.xml文件中需要的地方调用js中对应的函数(我的有两个函数,PlayAudio和PlayVideo)。需要注意在xml中要用action调用函数。
action.js:
//函数的参数audioName和videoName都是从krpano的xml文件中直接传入
//音频播放
function PlayAudio(audioName) {
//判断是否已经存在音乐标签,如果存在则移除
var clearDiv = document.getElementById("backAudioDiv");
if (clearDiv !== null) {
clearDiv.parentNode.removeChild(clearDiv);
}
//判断是否存在视频标签,如果存在则暂停视频播放
var pauseDiv = document.getElementById("backVideoDiv");
if (pauseDiv !== null) {
document.getElementById("video").pause();
}
//创建背景标签和删除按钮标签
var backAudioDiv = document.createElement("div");
backAudioDiv.setAttribute("id", "backAudioDiv");
backAudioDiv.style.position = "absolute";
backAudioDiv.style.zIndex = "2";
document.body.appendChild(backAudioDiv);
var closeImg = document.createElement("img");
closeImg.setAttribute("id", "closeImg");
closeImg.src = "picture/close.png";
//创建音乐标签并设置显示位置
var audio = document.createElement("audio");
audio.setAttribute("id", "audio");
audio.controls = "controls";
audio.autoplay = "true";
audio.src = audioName;
backAudioDiv.style.top = "20px";
backAudioDiv.style.right = "20px";
backAudioDiv.appendChild(audio);
//关闭按钮的显示和事件
closeImg.style.height = audio.offsetHeight+ "px";
backAudioDiv.appendChild(closeImg);
closeImg.addEventListener("click", function CloseMedia() {
backAudioDiv.parentNode.removeChild(backAudioDiv);
});
}
//视频播放
function PlayVideo(videoName) {
var clearDiv = document.getElementById("backVideoDiv");
if (clearDiv !== null) {
clearDiv.parentNode.removeChild(clearDiv);
}
var pauseDiv = document.getElementById("backAudioDiv");
if (pauseDiv !== null) {
document.getElementById("audio").pause();
}
var backVideoDiv = document.createElement("div");
backVideoDiv.setAttribute("id", "backVideoDiv");
backVideoDiv.style.position = "absolute";
backVideoDiv.style.zIndex = "2";
document.body.appendChild(backVideoDiv);
var closeImg = document.createElement("img");
closeImg.setAttribute("id", "closeImg");
closeImg.src = "picture/close.png";
var video = document.createElement("video");
video.setAttribute("id", "video");
video.controls = "controls";
video.autoplay = "true";
video.src = videoName;
backVideoDiv.appendChild(video);
video.style.width = "100%";
//设置视频居中 强制设置视频大小
backVideoDiv.style.width = "40%";
backVideoDiv.style.top = "30%";
backVideoDiv.style.left = "30%";
closeImg.style.position = "absolute";
closeImg.style.top = "0px";
closeImg.style.right = "0px";
backVideoDiv.appendChild(closeImg);
//关闭按钮的显示与隐藏
closeImg.style.display = "none";
backVideoDiv.addEventListener("mouseover", function showclose(){
closeImg.style.display = "";
});
backVideoDiv.addEventListener("mouseout", function hideclose(){
closeImg.style.display = "none";
});
closeImg.addEventListener("click", function CloseMedia() {
video.pause();
backVideoDiv.parentNode.removeChild(backVideoDiv);
});
}
tour.html:
<!--这是krpano生成的tour.html文件,在该文件中加入<script></script>标签,在标签内写出你要实现的内容-->
<!--标签可以写在文件的最后,也可以写在<body></body>中,由于我的文件是在全景图内弹出的,因而我写在了全景图div的里面-->
<body>
<script src="tour.js"></script>
<div id="pano" style="width:100%;height:100%;">
<noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
<script>
embedpano({swf:"tour.swf", id:"dbVrObject", xml:"tour.xml", target:"pano", html5:"prefer", mobilescale:1.0, passQueryParameters:true});
</script>
<!--这是我添加的js文件,我另外写了js,然后在此引用,由于我的内容是在全景图的里面,因而写在pano这个div内,如果内容在全景外,则要写在这个div外面-->
<!--只有这句话是我添加的,其他都是html原有的-->
<script type="text/javascript" src="action.js"></script>
</div>
</body>
tour.xml:
<!-- 直接在热点的点击事件里调用js的函数,把视频文件或音频文件传进去 -->
<hotspot name="audio1" url="picture/soundonoff.png" ath="-132.718" atv="-6.747" crop="0|50|50|50" onclick="js(PlayAudio('media/audio.mp3'););" />
<hotspot name="video" url="picture/video.png" scale="0.4" ath="-162.243" atv="40.839" onclick="js(PlayVideo('media/video.mp4'););" />