全景視訊(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功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。
點選開啟視訊，視訊可進行自由旋轉縮放等相關操作。
