Krpano学习：krpano调用javascript方法并传参、在krpano中用javascript实现视频音频播放

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

tour.xml