FastWeb之全景視訊-視覺化控制元件

1. 說明

  本示例使用egjs-view360全景顯示庫，通過匯入全景的平面視訊實現視訊的全景展示功能。本示例將使用Ug3DVideo為例進行展示。

  通過本範例學習，可以掌握全景視訊的引入方式，從而實現引用全景視訊的相關功能。

2. 設計明細

  開啟FastWeb設計器，分別加入下插圖之控制元件。或者點選左上角的[匯入]選擇模板檔案來打開對應模板。

  1：TUgImage元件，控制元件名稱為UgImage01。

  2：TUgLabel元件，控制元件名稱為UgLabel01。

  3：TUg3DVideo元件，控制元件名稱為Ug3DVideo01。

• UgWebRunFrame屬性設定

  • Height：設定頁面高度=600。
  • Width：設定頁面寬度=800。

• 1：UgImage01屬性設定

  • Align：設定控制元件的對齊方式，設定為alClient。
  • Picture：設定控制元件使用的圖片，點選右側[√]打開圖片編輯器，選擇圖片上傳。
  • Stretch：設定圖片是否根據控制元件進行拉伸操作，設定為True。

• 2：UgLabel01屬性設定

  • Alignment：設定文字內容的對齊方式，設定為taCenter。
  • Anchors：設定固定的相對錨點，其中將akLeft、akTop與akRight設定為True，akBottom設定為False。
  • Autosize：設定控制元件尺寸是否根據文字內容長度自動變化，此處設定為False。
  • Caption：設定顯示的文字內容，設定為探尋千年未解之謎。
  • Font：設定顯示的字型，點選右側的[√]打開字型設定。

  

• Ug3DVideo屬性設定

  • Anchors：設定固定的相對錨點，其中將akLeft、akTop與akRight、akBottom設定為True。

3. 指令碼設計

  點選指令碼設計界面右下角的按鈕，切換至單元選擇界面，勾選需要使用的單元。此程式無需引用單元。

3.1. 指令碼初始設定

  該程式的指令碼初始設定用於設定要顯示的視訊源的來源。

//JScript
function ViewInit()
{
  Ug3DVideo01.Options.video = "<source src=\"library/js/egjs-view360/examples/img/seven.mp4\" type=\"video/mp4\">";
}

function UgWebRunFrameOnAfterRunScript(sender)
{
  UGMM.LC(Self);
}

{
  ViewInit();
  Self.OnAfterRunScript = &UgWebRunFrameOnAfterRunScript;
}

//PasScript
Procedure ViewInit;
Begin
  Ug3DVideo01.Options.video := '<source src="library/js/egjs-view360/examples/img/seven.mp4" type="video/mp4">';
End;

procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
  UGMM.LC(Self);
end;

Begin
  ViewInit;
End.

// Make sure to add code blocks to your code group

4. 運行結果

  使用滑鼠在FastWeb功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。

  點選開啟視訊，視訊可進行自由旋轉縮放等相關操作。