SDK

JS SDK使用指南

使用说明

单图片

参考pano.html

特殊说明:1. 热点设置了名称,在vr状态下不显示热点。

引入detuPlayer.js文件

<script src="http://oss-static.detu.com/detu_player/v1.0.0/detuPlayer.js"></script>

在HTML中声明生成播放器的div

<div id="pano" style="width:100%;height:100%;"></div>

配置播放

detuPlayer.pano({
    target:'pano',//生成播放器的div的id
    lang:'en',//播放器的语言环境 en 或者 zh
    data:{
        name:'test', //场景名称只在电脑端展示
        top_logo_address:"",//顶部logo遮罩的图片地址,空值不显示
        floor_logo_address:"http://media.qicdn.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/source/122032/o_1anetjvjr1tsd1nqnnht3id2v7.png",//底部logo遮罩的图片地址,空值不显示 
        little_planet_start:true,//小行星开场
        player_logo_address:"http://media.qicdn.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/source/122032/o_1anetjvjr1tsd1nqnnht3id2v7.png",// 播放器左上角的logo,只在电脑端展示
        scenes:[
            {
                "id":"220666",//场景的id,必须是唯一值
                "preview":"http://media.detu.com/panob41372a85026ca92ab657f88aa6038b4/oper/panofile_preview_detunew.jpg",//预加载显示图片,如果全景图片传入的是sphere格式的图片,那么预览图也是sphere格式的图片,如果全景图片是html5_path的格式,那么预览图为六面图

                "sphere":"http://media.detu.com/@/79945993-153D-446B-0781-B18F69922537/2017-05-14/591818fb2c0b4.jpg",//传入2:1的全景图片地址,sphere的变量和html5_path变量选择一个传入就可以

                "html5_path":"http://media.detu.com/panob41372a85026ca92ab657f88aa6038b4/oper/panofile_html",//传入分层图片的文件夹地址,sphere的变量和html5_path变量选择一个传入就可以
                "width":"14000",//原全景图片的宽,用于计算分层的层数
                "height":"7000",//原全景图片的高,用于计算分层的层数

                "prealign":"0",//调整全景方向,0:不调整 1:向下翻转90度 2:向上翻转90度 3:向上翻转180度
                "effect":6,  //特效 1:小雨 2:中雨  3:大雨  4:小雪 5:中雪 6:大雪

                "ath":0, //初始画面中心点的经度坐标,值范围-180至180                         
                "atv":0,//初始画面中心点的纬度坐标,值必须在最大最小垂直坐标值之间,值范围-90至90    
                "fov":90,//视野范围,值必须在最大最小视野范围之间,值范围0至180                     
                "fovmin":60,//场景支持最小视野范围                    
                "fovmax":120, // 场景支持最大视野范围                     

                "vlookatmin":-90,//场景支持最小垂直坐标               
                "vlookatmax":90, //场景支持最大垂直坐标               

                "hotspots": [
                    {//链接热点
                        title:"hotspot title 1",        //热点名称,可以为空值
                        icon:"http://oss-static.detu.com/public-static/1.19/skin/subject/hotspot-icon-1.png",        //热点图标不能为空值
                        url:"http://detu.com",          //点击热点浏览器打开的链接
                        ath:0,                          //热点的位置的经度坐标,值范围-180至180    
                        atv:0                           //热点的位置的纬度位置,值范围-90至90  
                    },
                    {//图片热点
                        title:"",       //热点名称,可以为空值
                        icon:"http://oss-static.detu.com/public-static/1.19/skin/subject/hotspot-icon-1.png",        //热点图标不能为空值
                        image:"http://media.detu.com/@/50872914-1591-657E-F14C-826F38122531/source/220283/o_1bfvru486qohro8h7o11i0no7f.jpg",//点击热点弹窗显示图片
                        ath:10,                         //热点的位置的经度坐标,值范围-180至180
                        atv:10                          //热点的位置的纬度位置,值范围-90至90
                    }
                ],                  

                "bgsound": 'http://media.qicdn.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/source/122032/o_1ao3hpfer1fj2j1eac11t3hklb7.mp3'//背景音乐资源地址,空值不显示
            }
        ]
    }
})

漫游

参考vtour.html

特殊说明:1. 路径热点设置了名称,在vr状态下不显示路径热点。

引入detuPlayer.js文件

<script src="http://oss-static.detu.com/detu_player/v1.0.0/detuPlayer.js"></script>

在HTML中声明生成播放器的div

<div id="pano" style="width:100%;height:100%;"></div>

配置播放

detuPlayer.vtour({
    target:'pano',//生成播放器的div的id
    lang:'en',//播放器的语言环境 en 或者 zh
    data:{
        name:'test',//场景名称只在电脑端展示
        top_logo_address:"",//顶部logo遮罩的图片地址,空值不显示
        floor_logo_address:"http://media.qicdn.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/source/122032/o_1anetjvjr1tsd1nqnnht3id2v7.png",//底部logo遮罩的图片地址,空值不显示 
        little_planet_start:true,//小行星开场
        player_logo_address:"http://media.qicdn.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/source/122032/o_1anetjvjr1tsd1nqnnht3id2v7.png",// 播放器左上角的logo,只在电脑端展示
        scenes:[
            {
                "id":"220666",//场景的id,必须是唯一值
                "name":"场景名称1",//场景名称,显示在缩略图列表中
                "thumb":"http://media.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/2017-05-22/5922882439f32-1000x500.jpg?imageView2/2/h/100",//底部列表显示缩略图
                "preview":"http://media.detu.com/panob41372a85026ca92ab657f88aa6038b4/oper/panofile_preview_detunew.jpg",//预加载显示图片,如果全景图片传入的是sphere格式的图片,那么预览图也是sphere格式的图片,如果全景图片是html5_path的格式,那么预览图为六面图
                "sphere":"http://media.detu.com/@/79945993-153D-446B-0781-B18F69922537/2017-05-14/591818fb2c0b4.jpg",//传入2:1的全景图片地址,sphere的变量和html5_path变量选择一个传入就可以
                "html5_path":"http://media.detu.com/panob41372a85026ca92ab657f88aa6038b4/oper/panofile_html",//传入分层图片的文件夹地址,sphere的变量和html5_path变量选择一个传入就可以
                "width":"14000",//原全景图片的宽,用于计算分层的层数
                "height":"7000",//原全景图片的高,用于计算分层的层数

                "prealign":"0",//调整全景方向,0:不调整 1:向下翻转90度 2:向上翻转90度 3:向上翻转180度
                "effect":6, //特效 1:小雨 2:中雨  3:大雨  4:小雪 5:中雪 6:大雪

                "ath":0,//初始画面中心点的经度坐标,值范围-180至180                          
                "atv":0,//初始画面中心点的纬度坐标,值必须在最大最小垂直坐标值之间,值范围-90至90    
                "fov":90,//视野范围,值必须在最大最小视野范围之间,值范围0至180                     
                "fovmin":60,//场景支持最小视野范围                    
                "fovmax":120, // 场景支持最大视野范围                     

                "vlookatmin":-90,//场景支持最小垂直坐标               
                "vlookatmax":90,//场景支持最大垂直坐标                

                "routes": [
                    {
                        title:"route title 1",          //路径名称,可以为空值
                        icon:"http://oss-static.detu.com/public-static/1.19/skin/subject/route-icon-1-1.png",        //路径图标不能为空值
                        target_scene_id:"220667",       //路径跳转的场景id
                        ath:-10,                        //路径的位置的经度坐标,值范围-180至180
                        atv:0                           //路径的位置的纬度位置,值范围-90至90
                    },
                    {
                        title:"",                       //路径名称,可以为空值
                        icon:"http://oss-static.detu.com/public-static/1.19/skin/subject/route-icon-1-1.png",        //路径图标不能为空值
                        target_scene_id:"220667",       //路径跳转的场景id
                        ath:-20,                        //路径的位置的经度坐标,值范围-180至180
                        atv:0                           //路径的位置的纬度位置,值范围-90至90
                    }
                ],                  
                "hotspots": [
                    {//链接热点
                        title:"hotspot title 1",        //热点名称,可以为空值
                        icon:"http://oss-static.detu.com/public-static/1.19/skin/subject/hotspot-icon-1.png",        //热点图标不能为空值
                        url:"http://detu.com",          //点击热点浏览器打开的链接
                        ath:0,                          //热点的位置的经度坐标,值范围-180至180    
                        atv:0                           //热点的位置的纬度位置,值范围-90至90  
                    },
                    {//图片热点
                        title:"",       //热点名称,可以为空值
                        icon:"http://oss-static.detu.com/public-static/1.19/skin/subject/hotspot-icon-1.png",        //热点图标不能为空值
                        image:"http://media.detu.com/@/50872914-1591-657E-F14C-826F38122531/source/220283/o_1bfvru486qohro8h7o11i0no7f.jpg",//点击热点弹窗显示图片
                        ath:10,                         //热点的位置的经度坐标,值范围-180至180
                        atv:10                          //热点的位置的纬度位置,值范围-90至90
                    }
                ],                  

                "bgsound": 'http://media.qicdn.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/source/122032/o_1ao3hpfer1fj2j1eac11t3hklb7.mp3'//背景音乐资源地址,空值不显示
            },
            {
                "id":"220667",
                "name":"场景名称2",
                "thumb":"http://media.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/2017-02-24/58afe72cb7f53.jpg?imageView2/2/h/100",
                "preview":"http://media.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/2017-02-24/58afe72cb7f53.jpg?imageView2/2/h/500",
                "html5_path":"",
                "sphere":"http://media.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/2017-02-24/58afe72cb7f53.jpg",
                "width":"14000",
                "height":"7000",
                "prealign":"0",
                "effect":6,

                "ath":0,                        
                "atv":0,                        
                "fov":90,                       
                "fovmin":60,                    
                "fovmax":120,                   

                "vlookatmin":-90,               
                "vlookatmax":90,                

                "routes": [

                ],                  
                "hotspots": [
                ],                  

                "bgsound": 'http://media.detu.com/@/50872914-1591-657E-F14C-826F38122531/source/220283/o_1bfvrdajl1bhvg391dmv1jic1cpr7.mp3'//
            },
            {
                "id":"220668",
                "name":"场景名称3",
                "thumb":"http://media.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/2017-05-22/5922882439f32-1000x500.jpg?imageView2/2/h/100",
                "preview":"http://media.detu.com/panob41372a85026ca92ab657f88aa6038b4/oper/panofile_preview_detunew.jpg",
                "html5_path":"http://media.detu.com/panob41372a85026ca92ab657f88aa6038b4/oper/panofile_html",
                "sphere":"http://media.detu.com/@/79945993-153D-446B-0781-B18F69922537/2017-05-14/591818fb2c0b4.jpg",
                "width":"14000",
                "height":"7000",
                "prealign":"0",
                "effect":6,

                "ath":0,                        
                "atv":0,                        
                "fov":90,                       
                "fovmin":60,                    
                "fovmax":120,                   

                "vlookatmin":-90,               
                "vlookatmax":90,                

                "routes": [

                ],                  
                "hotspots": [
                ],                  

                "bgsound": 'http://media.qicdn.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/source/122032/o_1ao3hpfer1fj2j1eac11t3hklb7.mp3'//
            },
            {
                "id":"220669",
                "name":"场景名称4",
                "thumb":"http://media.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/2017-05-22/5922882439f32-1000x500.jpg?imageView2/2/h/100",
                "preview":"http://media.detu.com/panob41372a85026ca92ab657f88aa6038b4/oper/panofile_preview_detunew.jpg",
                "html5_path":"http://media.detu.com/panob41372a85026ca92ab657f88aa6038b4/oper/panofile_html",
                "sphere":"http://media.detu.com/@/79945993-153D-446B-0781-B18F69922537/2017-05-14/591818fb2c0b4.jpg",
                "width":"14000",
                "height":"7000",
                "prealign":"0",
                "effect":6,

                "ath":0,                        
                "atv":0,                        
                "fov":90,                       
                "fovmin":60,                    
                "fovmax":120,                   

                "vlookatmin":-90,               
                "vlookatmax":90,                

                "routes": [

                ],                  
                "hotspots": [

                ],                  

                "bgsound": 'http://media.qicdn.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/source/122032/o_1ao3hpfer1fj2j1eac11t3hklb7.mp3'//
            }
        ]
    }
})

单视频

参考video.html

特殊说明:1. 全景视频资源地址必须和html页面的域名相同,不然ios上的视频播放无效,跨域声明无效。ios bug

引入detuPlayer.js文件

<script src="http://oss-static.detu.com/detu_player/v1.0.0/detuPlayer.js"></script>

在HTML中声明生成播放器的div

<div> <!-- 这个是必要的,不然krpano在小尺寸下手机下会显示全屏 -->
    <div id="pano" style="width:100%;height:300px; position: relative;"></div>
</div>

配置播放

var video = detuPlayer.video({
    target:'pano', //生成播放器的div的id
    lang:'en',//播放器语言环境 en或者zh
    data:{
        name:'test', //播放器顶部显示名称,只在电脑端有效
        top_logo_address:"",//播放器顶部遮罩图片地址,空值则不显示
        floor_logo_address:"http://media.qicdn.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/source/122032/o_1anetjvjr1tsd1nqnnht3id2v7.png",//播放器底部遮罩图片地址,空值则不显示
        little_planet_start:true,//是否小行星开场
        player_logo_address:"http://media.qicdn.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/source/122032/o_1anetjvjr1tsd1nqnnht3id2v7.png",//播放器左上角logo自定义,空值则显示默认得图logo
        scenes:[
                {
                    id:"222932",//场景的id,必须是唯一值
                    prealign:"0",//调整全景方向,0:不调整 1:向下翻转90度 2:向上翻转90度 3:向上翻转180度
                    videos:[
                        {
                            name:'流畅', //在清晰度选择中的显示名称
                            url:'./5922882439f32-1024x512.mp4',//视频资源
                            preview:'http://media.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/2017-05-22/5922882439f32.jpg', //加载视频的初始预览图片
                            device:'mobile|desktop',  //选择在移动端或者电脑端是否显示该清晰度,可以传递“mobile”:只在移动端显示 或者 “desktop”:只在电脑端显示 或者 “mobile|desktop”:移动端和电脑端都显示
                            default:'mobile' //配置该清晰度是否作为默认播放清晰度,可以传递“mobile”:作为移动端默认播放清晰度 或者 “desktop”:作为电脑端默认播放清晰度 或者 “mobile|desktop”:作为移动端和电脑端默认播放清晰度
                        },
                        {
                            name:'标清',
                            url:'http://media.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/2017-05-22/5922882439f32-similar.mp4',
                            preview:'http://media.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/2017-05-22/5922882439f32.jpg',
                            device:'mobile|desktop',
                            default:'desktop'
                        },
                        {
                            name:'高清',
                            url:'http://media.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/2017-05-22/5922882439f32-similar.mp4',
                            preview:'http://media.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/2017-05-22/5922882439f32.jpg',
                            device:'desktop'
                        },
                        {
                            name:'原画',
                            url:'http://media.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/2017-05-22/5922882439f32-similar.mp4',
                            preview:'http://media.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/2017-05-22/5922882439f32.jpg',
                            device:'desktop'
                        }
                    ],

                    effect:0,//特效 1:小雨 2:中雨  3:大雨  4:小雪 5:中雪 6:大雪
                    ath:0,//初始画面中心点的经度坐标,值范围-180至180    
                    atv:0,//初始画面中心点的纬度坐标,值必须在最大最小垂直坐标值之间,值范围-90至90  
                    fov:90,//视野范围,值必须在最大最小视野范围之间,值范围0至180    
                    fovmin:60, //场景支持最小视野范围                     
                    fovmax:120,// 场景支持最大视野范围                    

                    vlookatmin:-90, //场景支持最小垂直坐标                
                    vlookatmax:90, //场景支持最大垂直坐标             

                    bgsound: ''//http://media.qicdn.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/source/122032/o_1ao3hpfer1fj2j1eac11t3hklb7.mp3 //背景音乐资源地址,空值不显示
                }
        ]
    }
})

播放器的方法调用和状态获取接口

video.play()                //视频播放方法
video.pause()               //视频停止方法
video.remove()              //播放器移除方法
video.get("isvideoready")   //获取视频是否准备完成状态
video.get("ispaused")       //获取视频是否停止状态
video.get("iscomplete")     //获取视频是否播放完成状态

播放器的状态监听

video.on("video_ready",function(){ // 视频播放准备完成回调
    alert('video_ready')
});
video.on("video_play",function(){ // 视频播放开始回调
    alert('video_play')
});
video.on("video_paused",function(){ // 视频播放停止回调
    alert('video_paused')
});
video.on("video_complete",function(){ // 视频播放完成回调
    alert('video_complete')
});
video.on("video_error",function(){// 视频播放错误回调
    alert('video_error')
});

直播

参考live.html

特殊说明: 1.直播的m3u8地址必须和html页面的域名相同,不然ios上的直播无效,跨域声明无效。ios bug 2.直播swf的域名根目录下存放flash的跨域声明文件crossdomain.xml

引入detuPlayer.js文件

<script src="http://oss-static.detu.com/detu_player/v1.0.0/detuPlayer.js"></script>

在HTML中声明生成播放器的div

<div> <!-- 这个是必要的,不然krpano在小尺寸下手机下会显示全屏 -->
    <div id="pano" style="width:100%;height:300px; position: relative;"></div>
</div>

配置播放

var live = detuPlayer.live({
    target:'pano', //生成播放器的div的id
    lang:'zh',//播放器的语言环境 en 或者 zh
    data:{
        name:'test', //场景名称只在电脑端展示
        top_logo_address:"",//顶部logo遮罩的图片地址,空值不显示
        floor_logo_address:"http://media.qicdn.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/source/122032/o_1anetjvjr1tsd1nqnnht3id2v7.png",//底部logo遮罩的图片地址,空值不显示 
        little_planet_start:true,//小行星开场
        player_logo_address:"http://media.qicdn.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/source/122032/o_1anetjvjr1tsd1nqnnht3id2v7.png",// 播放器左上角的logo,只在电脑端展示
        scenes:[
                {
                    id:"222932",//场景的id,必须是唯一值
                    prealign:"0",//调整全景方向,0:不调整 1:向下翻转90度 2:向上翻转90度 3:向上翻转180度
                    swf:"./58cb5cb2a3d5ec7d8217797f.flv", //电脑端展示flash播放器,调用的资源
                    m3u8:"./61474827_61474827_100571200_0_0_10057.m3u8",//移动端展示h5播放器,调用的资源
                    preview:"http://media.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/2017-05-22/5922882439f32.jpg",//预加载显示图片
                    effect:0, //特效 1:小雨 2:中雨  3:大雨  4:小雪 5:中雪 6:大雪
                    ath:0, //初始画面中心点的经度坐标,值范围-180至180                   
                    atv:0, //初始画面中心点的纬度坐标,值必须在最大最小垂直坐标值之间,值范围-90至90             
                    fov:90,//视野范围,值必须在最大最小视野范围之间,值范围0至180                       
                    fovmin:60,//场景支持最小视野范围                  
                    fovmax:120,// 场景支持最大视野范围                

                    vlookatmin:-90,//场景支持最小垂直坐标             
                    vlookatmax:90, //场景支持最大垂直坐标             

                    bgsound: ''//http://media.qicdn.detu.com/@/81109457-8573-561D-DB0B-0D3F92863919/source/122032/o_1ao3hpfer1fj2j1eac11t3hklb7.mp3//背景音乐资源地址,空值不显示
                }
        ]
    }
})

播放器的方法调用和状态获取接口

live.play()         //视频播放方法
live.pause()        //视频停止方法
live.remove()       //播放器移除方法
live.get("isvideoready")    //获取视频是否准备完成状态
live.get("ispaused")        //获取视频是否停止状态
live.get("iscomplete")      //获取视频是否播放完成状态

播放器的状态监听

live.on("video_ready",function(){// 视频播放准备完成回调
    alert('video_ready')
});
live.on("video_play",function(){// 视频播放开始回调
    alert('video_play')
});
live.on("video_paused",function(){// 视频播放停止回调
    alert('video_paused')
});
live.on("video_error",function(){// 视频播放错误回调
    alert('video_error')
});