Krpano中的action可以調用javascript中寫好的函數。
根據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" οnclick="js(PlayAudio('media/audio.mp3'););" />
<hotspot name="video" url="picture/video.png" scale="0.4" ath="-162.243" atv="40.839" οnclick="js(PlayVideo('media/video.mp4'););" />