FastWeb之視訊播放(APP)

• 適用平臺：APP(移動端)

1. 說明

  本範例使用FastWeb實現網路視訊播放以及直播視訊流的播放。

  範例採用UgAppFlvPlayer控制元件，基於flv.js (opens new window)，該控制元件可實現H.264視訊編碼、AAC音訊編碼的mp4封裝格式的網路視訊檔案的播放，以及H.264視訊編碼、AAC音訊編碼的flv封裝格式的網路視訊檔案的播放。該控制元件在flv格式的視訊檔案播放中具有獨特的優勢，不需要使用Flash來進行播放，可通過具有HTTP-FLV流轉發能力的流媒體伺服器（比如SRS (opens new window)）在移動端實現媲美RTMP低時延的免Flash直播播放方案。

  通過本範例學習，可以掌握UgAppFlvPlayer的使用方法。

2. 設計明細

  開啟FastWeb設計器，在[模組列表(APP)]中新建模組進行設計，在設計界面中分別加入下插圖之控制元件。或者點選左上角的[匯入]選擇模板檔案來打開對應模板。

  ①：TUgAppFlvPlayer元件，控制元件名稱為UgAppFlvPlayer01。

  ②：TUgAppEdit元件，控制元件名稱為UgAppEdit01。

  ③：TUgAppEdit元件，控制元件名稱為UgAppEdit02。

  ④：TUgAppButton元件，控制元件名稱為UgAppButton01。

  ⑤：TUgAppButton元件，控制元件名稱為UgAppButton02。

  ⑥：TUgAppButton元件，控制元件名稱為UgAppButton03。

  ⑦：TUgAppButton元件，控制元件名稱為UgAppButton04。

• UgAppRunFrame屬性設定

  • Height：設定頁面高度=560。
  • Width：設定頁面寬度=320。

• ①UgAppFlvPlayer01屬性設定

  • Align：設定控制元件的對齊方式，設定為alTop。
  • Height：設定控制元件高度=234。

• ②UgAppEdit01屬性設定

  • FieldLabel：設定編輯框中顯示的欄位名稱=網路視訊地址。
  • FieldLabelFont：設定文字編輯框標籤的字型資訊，設定其中的Style.fsBold為True。
  • Text：設定文字編輯框中的內容，此處需設定為具有網路視訊地址的mp4視訊檔案。例如使用SRS (opens new window)搭建的HTTP伺服器，可定義其中存放的視訊地址為http://192.168.0.113:8080/sample.mp4。

• ③UgAppEdit02屬性設定

  • FieldLabel：設定文字編輯框顯示的標籤資訊=請輸入網路直播地址。
  • FieldLabelFont：設定文字編輯框標籤的字型資訊，設定其中的Style.fsBold為True。
  • Text：設定文字編輯框中的內容，此處需設定為使用HTTP-FLV分發的直播視訊流地址。例如使用SRS (opens new window)搭建的HTTP-FLV直播伺服器，可定義其串流直播的地址為http://192.168.0.113:8080/live/001.flv。

• ④UgAppButton01屬性設定

  • Caption：設定按鈕顯示的字幕=播放視訊。
  • IconCls：設定顯示的圖示=play。

• ⑤UgAppButton02屬性設定

  • Caption：設定按鈕顯示的字幕=播放直播。
  • IconCls：設定顯示的圖示=video。

• ⑥UgAppButton03屬性設定

  • Caption：設定按鈕顯示的字幕=暫停播放。
  • IconCls：設定顯示的圖示=pause。

• ⑦UgAppButton04屬性設定

  • Caption：設定按鈕顯示的字幕=繼續播放。
  • IconCls：設定顯示的圖示=play。

3. 程式設計

3.1. 程式初始設定

  該程式無程式初始設定。

3.2. 事件設定

• ④UgAppButton01-OnClick事件

  點選[播放視訊]按鈕，開啟網路視訊地址文字框中輸入的地址進行播放操作。

procedure UgAppButton01OnClick(sender: tobject);
//播放視訊
begin
  UgAppFlvPlayer01.SetSource(UgAppEdit01.Text,'mp4');
end;

• ⑤UgAppButton02-OnClick事件

  點選[播放直播]按鈕，開啟網路直播地址文字框中輸入的地址進行播放操作。

procedure UgAppButton02OnClick(sender: tobject);
//播放直播
begin
  UgAppFlvPlayer01.SetSource(UgAppEdit02.Text,'flv');
end;

• ⑥UgAppButton03-OnClick事件

  點選[暫停播放]按鈕，暫停視訊的播放。

procedure UgAppButton03OnClick(sender: tobject);
//暫停播放
begin
  UgAppFlvPlayer01.Pause;
end;

• ⑦UgAppButton04-OnClick事件

  點選[繼續播放]按鈕，將剛才執行暫停播放的視訊繼續進行播放。

procedure UgAppButton04OnClick(sender: tobject);
//繼續播放
begin
  UgAppFlvPlayer01.Play;
end;

4. 運行結果

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

  在運行界面中修改網路視訊的地址以及網路直播的地址，分別點選對應的[播放視訊]、[播放直播]按鈕以開啟視訊播放或者直播播放，在此過程中可以點選[暫停]、[播放]按鈕以暫停播放或者繼續進行播放。