krpano调用js方法并传参、在krpano中用JS实现视频音频播放

来源：互联网发布：uniprot数据库怎么使用编辑：程序博客网时间：2024/06/11 21:56

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'););" />

阅读全文

0 0