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

悠悠 2022-06-07 10:39 349阅读 0赞

Krpano中的action可以调用javascript中写好的函数。

主要参考[krpano360的资料][krpano360]和[new720的资料][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:

<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>
    	
    	
    	
    	<script type="text/javascript" src="action.js"></script>   
    	
    </div>
    
    </body>

tour.xml:

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

[krpano360]: http://www.krpano360.com/waibu-javascriptjiekouactionshuomingwendang-jsfscommand/
[new720]: http://blog.new720.com/%E5%A6%82%E4%BD%95%E5%9C%A8%E5%85%A8%E6%99%AF%E9%A1%B5%E9%9D%A2%E4%B8%AD%E8%B0%83%E7%94%A8js/