全景视频(WEB)
# FastWeb之全景视频
# 1. 说明
本示例使用egjs-view360全景显示库，通过导入全景的平面视频实现视频的全景展示功能。关于此组件的创建过程可参考3D球形实景-全景视频。
通过本范例学习，可以掌握全景视频的引入方式，从而实现引用全景视频的相关功能。
# 2. 设计明细
开启FastWeb设计器，分别加入下插图之控件。或者点击左上角的[导入]选择模板文件来打开对应模板。
1：TUgImage组件，控件名称为UgImage01。
2：TUgURLFrame组件，控件名称为UgURLFrame01。
3：TUgLabel组件，控件名称为UgLabel01。
4：TUgLabel组件，控件名称为UgLabel02。
TUgTimer组件，控件名称为UgTimer01。
UgWebRunFrame属性设置
Height：设置页面高度=600。Width：设置页面宽度=800。
1：UgImage01属性设置
Align：设定对齐的方式，设定为alClient。Picture：设定显示的图片，点击打开编辑器，选择图片进行显示。
2：UgURLFrame01属性设置
Anchors：设定控件显示的锚点，分别为akLeft、akRight、akBottom与akTop设定锚点为True。
双击控件，打开管理器，选择其中的
全景视频。3：UgLabel01属性设置
Anchors：设定控件显示的锚点，分别为akLeft、akBottom设定锚点。Caption：设定文字显示的内容，设置为异域风情。Font：设定字体信息，双击√打开字体设置窗口，进行字体的相关设置。
4：UgLabel02属性设置
Anchors：设定控件显示的锚点，分别为akLeft、akBottom设定锚点。Caption：设定文字显示的内容，设置为带你用全景视角观看遗迹内的风景...。、
UgTimer01属性设置
Interval：设定定时器的时间间隔，单位为ms，设定为100。
# 3. 程序设计
点击程序设计界面右下角的按钮，切换至单元选择界面，勾选需要使用的单元。该程式的程序无需引用单元。
# 3.1. 程序初始设置
该程式包含一些初始用设置。
//JScript
// mp4格式的视频地址
var param_mp4 = "library/js/egjs-view360/examples/img/seven.mp4";
//webm格式的视频地址
var param_webm = "library/js/egjs-view360/examples/img/seven.webm";
//类型
var param_type = "equirectangular";
//是否启用缩放
var param_useZoom = "true";
//横向视角范围
var param_yawRange = "[-180,180]";
//俯仰视角范围
var param_pitchRange = "[-60,90]";
//缩放视角范围
var param_fovRange = "[30,70]";
function UgWebRunFrameOnAfterRunScript(sender)
{
UGMM.LC(Self);
}
{
UgURLFrame01.Init("9C4DCB40-5044-41BC-8D38-ACBFEFA0E1E5");
UgTimer01.OnTimer = &UgTimer01OnTimer;
Self.OnAfterRunScript = &UgWebRunFrameOnAfterRunScript;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//PasScript
Var
// mp4格式的视频地址
param_mp4: string = 'library/js/egjs-view360/examples/img/seven.mp4';
//webm格式的视频地址
param_webm: string = 'library/js/egjs-view360/examples/img/seven.webm';
//类型
param_type: string = 'equirectangular';
//是否启用缩放
param_useZoom: string = 'true';
//横向视角范围
param_yawRange: string = '[-180,180]';
//俯仰视角范围
param_pitchRange: string = '[-60,90]';
//缩放视角范围
param_fovRange: string = '[30,70]';
procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
UGMM.LC(Self);
end;
Begin
UgURLFrame01.Init('9C4DCB40-5044-41BC-8D38-ACBFEFA0E1E5');
End.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// Make sure to add code blocks to your code group
# 3.2. 事件设置
- UgTimer01-OnTimer事件
定时器的触发事件，用于动态加载配置参数项的内容。
//JScript
function UgTimer01OnTimer(sender)
{
UgURLFrame01.JSONToData("{" +
"\"param_mp4\": \"" + param_mp4 + "\"," +
"\"param_webm\": \"" + param_webm + "\"," +
"\"param_type\": \"" + param_type + "\"," +
"\"param_useZoom\": \"" + param_useZoom + "\"," +
"\"param_yawRange\": \"" + param_yawRange + "\"," +
"\"param_pitchRange\": \"" + param_pitchRange + "\"," +
"\"param_fovRange\": \"" + param_fovRange + "\"" +
"}");
UgTimer01.Enabled = False;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
//PasScript
procedure UgTimer01OnTimer(sender: tobject);
begin
UgURLFrame01.JSONToData('{' +
'"param_mp4": "' + param_mp4 + '",' +
'"param_webm": "' + param_webm + '",' +
'"param_type": "' + param_type + '",' +
'"param_useZoom": "' + param_useZoom + '",' +
'"param_yawRange": "' + param_yawRange + '",' +
'"param_pitchRange": "' + param_pitchRange + '",' +
'"param_fovRange": "' + param_fovRange + '"' +
'}');
UgTimer01.Enabled := False;
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
// Make sure to add code blocks to your code group
# 4. 运行结果
使用鼠标在FastWeb菜单，点击[保存至数据库]按钮，将其保存至数据库，点击[调试运行]确认能够正常打开。
点击开启视频，视频可进行自由旋转缩放等相关操作。
