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')
});