網路視訊播放(WEB)

# FastWeb之視訊播放(WEB)

適用平臺：WEB(桌面)

# 1. 說明

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

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

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

# 2. 設計明細

打開FastWeb設計器，在[模組列表(WEB)]中新建模組進行設計，在設計界面中分別加入下插圖之控制元件。或者通過點選[匯入]按鈕選擇模板檔案來打開模板。

①：TUgBitBtn元件，控制元件名稱為UgBitBtn01。

②：TUgEdit元件，控制元件名稱為UgEdit01。

③：TUgBitBtn元件，控制元件名稱為UgBitBtn02。

④：TUgEdit元件，控制元件名稱為UgEdit02。

⑤：TUgFlvPlayer元件，控制元件名稱為UgFlvPlayer01。

⑥：TUgButton元件，控制元件名稱為UgButton01。

⑦：TUgButton元件，控制元件名稱為UgButton02。

UgWebRunFrame屬性設定
- Height：設定頁面高度=600。
- Width：設定頁面寬度=800。
①UgBitBtn01屬性設定
- Caption：設定按鈕標籤顯示的文字=暫停。
②UgEdit01屬性設定
- FieldLabel：設定文字編輯框顯示的標籤資訊=請輸入網路視訊地址。
- FieldLabelFont：設定文字編輯框標籤的字型資訊，設定其中的Style.fsBold為True。
- FieldLabelWidth：設定標籤顯示區域的寬度=140。
- Text：設定文字編輯框中的內容，此處需設定為具有網路視訊地址的mp4視訊檔案。例如使用SRS (opens new window)搭建的HTTP伺服器，可定義其中存放的視訊地址為http://192.168.0.113:8080/sample.mp4。
③UgBitBtn02屬性設定
- Caption：設定按鈕標籤顯示的文字=播放。
④UgEdit02屬性設定
- FieldLabel：設定文字編輯框顯示的標籤資訊=請輸入網路直播地址。
- FieldLabelFont：設定文字編輯框標籤的字型資訊，設定其中的Style.fsBold為True。
- FieldLabelWidth：設定標籤顯示區域的寬度=140。
- Text：設定文字編輯框中的內容，此處需設定為使用HTTP-FLV分發的直播視訊流地址。例如使用SRS (opens new window)搭建的HTTP-FLV直播伺服器，可定義其串流直播的地址為http://192.168.0.113:8080/live/001.flv。
⑤UgFlvPlayer01元件
- Align：該控制元件位於UgPanel02中，設定其對齊方式為alClient可佔滿面板的空間。
⑥UgButton01屬性設定
- Caption：設定按鈕標籤顯示的文字=播放視訊。
⑦UgButton02屬性設定
- Caption：設定按鈕標籤顯示的文字=播放直播。

# 3. 程式設計

# 3.1. 程式初始設定

該程式無程式初始設定。

# 3.2. 事件設定

⑥UgButton01-OnClick事件

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

//JScript
function UgButton01OnClick(sender)
//播放網路視訊
{
  UgFlvPlayer01.SetSource(UgEdit01.Text,"mp4");
}

1
2
3
4
5
6

//PasScript
procedure UgButton01OnClick(sender: tobject);
//播放網路視訊
begin
  UgFlvPlayer01.SetSource(UgEdit01.Text,'mp4');
end;

1
2
3
4
5
6

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

⑦UgButton02-OnClick事件

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

//JScript
function UgButton02OnClick(sender)
//播放視訊直播
{
  UgFlvPlayer01.SetSource(UgEdit02.Text,"flv");
}

1
2
3
4
5
6

//PasScript
procedure UgButton02OnClick(sender: tobject);
//播放視訊直播
begin
  UgFlvPlayer01.SetSource(UgEdit02.Text,'flv');
end;

1
2
3
4
5
6

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

①UgBitBtn01-OnClick事件

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

//JScript
function UgBitBtn01OnClick(sender)
//暫停
{
  UgFlvPlayer01.Pause;
}

1
2
3
4
5
6

//PasScript
procedure UgBitBtn01OnClick(sender: tobject);
//暫停
begin
  UgFlvPlayer01.Pause;
end;

1
2
3
4
5
6

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

③UgBitBtn02-OnClick事件

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

//JScript
function UgBitBtn02OnClick(sender)
//繼續播放
{
  UgFlvPlayer01.Play;
}

1
2
3
4
5
6

//PasScript
procedure UgBitBtn02OnClick(sender: tobject);
//繼續播放
begin
  UgFlvPlayer01.Play;
end;

1
2
3
4
5
6

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

# 4. 運行結果

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

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

← 網路檔案瀏覽(WEB) 網路視訊播放(APP)→