renyicun
/
ZhongMianAdmin


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body{
            width: 100%;
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
        .scene{
            width: 100%;
            height: 100%;
        }
        #toolbar{
            position: absolute;
            left: 50%;
            top: 0;
            z-index: 10000;
        }
    </style>
</head>
<body>
    <div id="scene" class="scene"></div>
    <div id="toolbar">
        <button onclick="enter()">进入“添加视频”</button>
        <button onclick="upload()">上传视频</button>
        <button onclick="switchTransfrom()">switchTransfrom</button>
        <button onclick="resetRatio()">resetRatio</button>
        <button onclick="setThinkness()">setThinkness</button>
        <button onclick="setWidth()">setWidth</button>
        <button onclick="setHeight()">setHeight</button>
        <button onclick="confirm()">保存视频</button>
        <button onclick="deleteVideo()">删除视频</button>
        <button onclick="cancel()">取消</button>
        <button onclick="exit()">退出</button>
    </div>
    <video id="myVideo" loop crossOrigin="anonymous" playsinline style="display:none">
        <source src="https://4dkk.4dage.com/images/imagest-JNg3ds4cxZ/overlaybk8IA625652.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    </video>

    <script src="../dist/sdk/kankan-sdk-deps.js"></script>
    <script src="../dist/sdk/kankan-sdk.js"></script>
    <script>
        window.dontForbitSetsize = true
        var kankan = new KanKan({
            dom:'#scene',
            num:'t-YhBCzQr'
        })
        kankan.use("Controls")
        kankan.use("Tag").then(tour=>{
           
        })
        kankan.render()

        kankan.Scene.on('loaded',()=>{
          
        })

        
        kankan.VideoManager.on("videos/panel/display", (display) => {
            console.error("编辑面板出现：", display)
        } );

        kankan.VideoManager.on("videos/panel/exit", () => {
            console.error("编辑面板退出")
        })

        kankan.VideoManager.on("videos/panel/switchTclMode", (mode) => {
            console.error("切换控制器模式：", mode)
        })

        kankan.VideoManager.on("videos/panel/changeSize", (data) => {
            console.error("更新视频尺寸的数字: ", data.wText, data.hText, data.width, data.height)
        })

        kankan.VideoManager.on("videos/panel/updatePoster", (video) => {
            console.error("3d视频上传完成：", video)
        })

        kankan.VideoManager.on("videos/panel/changeDepth", (depth) => {
            console.error("改变视频厚度：", depth)
        })


        function enter(){
            kankan.VideoManager.BoxVideo.edit.enter();
        }

        function upload(){
            let video = document.getElementById("myVideo")
            video.play()
            kankan.VideoManager.BoxVideo.edit.upload(null, video);
        }

        var index = 1
        function switchTransfrom(){
            kankan.VideoManager.BoxVideo.edit.transfrom(index);
            index >= 2 ? index = 0 : index ++;
        }

        function resetRatio() {
            kankan.VideoManager.BoxVideo.edit.resetRatio();
        }

        function setWidth() {
            let newWidth = kankan.VideoManager.BoxVideo.edit.setPlaneWH("W", {
                value: 2,
                min: 0,
                max: 10
            });
            // console.error(newWidth)
        } 

        function setHeight() {
            let newHeight = kankan.VideoManager.BoxVideo.edit.setPlaneWH("H", {
                value: 2,
                min: 0,
                max: 10
            });
            // console.error(newHeight)
        } 

        function setThinkness(){
            let thinkness = kankan.VideoManager.BoxVideo.edit.setThinkness({
                value: 2,
                min: 0,
                max: 100
            });
            // console.error(thinkness)
        }

        function confirm(){
            var info = kankan.VideoManager.BoxVideo.edit.save();
            // console.error(info)
        }
        
        function deleteVideo(){
            kankan.VideoManager.BoxVideo.edit.delete((sid, done) => { });
        }

        function cancel() {
            kankan.VideoManager.BoxVideo.edit.cancel()
        }

        function exit() {
            kankan.VideoManager.BoxVideo.edit.exit()
        }
        
    </script>
</body>
</html>