網路視訊播放

# PinToo之網路視訊播放

# 1. 說明

範例使用視訊播放元件來實現網路視訊以及直播流的播放。可播放的視訊型別如下：

網路上具有特定地址的視訊，地址中包含視訊的後綴格式名稱。例如：
```
http://192.168.1.12/video/sample.mp4
```
1
串流的網路視訊。通常以RTSP開頭，例如：
```
rtsp://192.168.1.12:5000/screen
```
1
網路電視直播。通常以m3u8作為後綴名稱，例如：
```
http://ivi.bupt.edu.cn/hls/cctv6.m3u8
```
1

在使用以下功能之前，請先確認是否有給予PinToo相應的許可權。

# 2. 設計明細

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

①：TfxSuperButton元件，控制元件名稱為fxSuperButtonVideoFile。

②：TfxSuperButton元件，控制元件名稱為fxSuperButtonrtsp。

③：TfxEdit元件，控制元件名稱為fxEdit1。

④：TfxSuperButton元件，控制元件名稱為fxSuperButton1。

⑤：TfxSuperButton元件，控制元件名稱為fxSuperButtonLive。

⑥：TfxTbsVideoPlayer元件，控制元件名稱為fxTbsVideoPlayer1。

fxRunFrame屬性設定
- Height：設定頁面高度=800。
- Width：設定頁面寬度=400。

①fxSuperButtonVideoFile屬性設定

Height：設定控制元件高度=100。
Width：設定控制元件寬度=100。
ButtonType：設定按鈕型別，設定為TfxSvgButton。
Name：設定控制元件名稱=fxSuperButtonVideoFile。
ButtonType.SvgData：設定SVG數據，其數據內容如下。

<path d="M26.3720741271973,3 L63.1266326904297,3 L84.1292266845703,24.0026035308838 L84.1292266845703,71.2584686279297 C84.1292266845703,77.0341796875 79.4036560058594,81.759765625 73.6279449462891,81.759765625 L26.3720741271973,81.759765625 C20.5963573455811,81.759765625 15.8707733154297,77.0341796875 15.8707733154297,71.2584686279297 L15.8707733154297,13.5013017654419 C15.8707733154297,7.72558546066284 20.5963573455811,3 26.3720741271973,3 Z M50.0000076293945,68.6331329345703 C61.5514335632324,68.6331329345703 71.0026092529297,59.1819610595703 71.0026092529297,47.6305274963379 C71.0026092529297,36.0790863037109 61.5514335632324,26.6279239654541 50,26.6279239654541 C38.4485664367676,26.6279239654541 28.9973983764648,36.0790939331055 28.9973983764648,47.6305274963379 C28.9973983764648,59.1819534301758 38.4485664367676,68.6331329345703 50,68.6331329345703 Z M50.0000076293945,63.3824844360352 C41.0738983154297,63.3824844360352 34.2480583190918,56.5566368103027 34.2480583190918,47.6305313110352 C34.2480583190918,38.7044258117676 41.0738983154297,31.8785762786865 50.0000076293945,31.8785762786865 C58.9261093139648,31.8785762786865 65.751953125,38.7044258117676 65.751953125,47.6305313110352 C65.751953125,56.5566329956055 58.9261093139648,63.3824844360352 50.0000076293945,63.3824844360352 Z M57.8759803771973,49.2057266235352 L58.4010467529297,48.6806602478027 C58.9261093139648,47.6305313110352 58.9261093139648,46.5804023742676 57.8759803771973,46.0553321838379 L47.8997383117676,39.2294921875 C37.9235038757324,32.4036521911621 47.374683380127,38.7044258117676 46.8496131896973,38.7044258117676 C45.7994804382324,38.7044258117676 44.7493553161621,39.7545547485352 44.7493553161621,40.8046875 L44.7493553161621,53.9313125610352 C44.7493553161621,54.4563827514648 44.7493553161621,54.9814491271973 45.2744178771973,54.9814491271973 C45.7994804382324,56.0315742492676 47.374683380127,56.0315742492676 48.4248085021973,55.5065078735352 L57.8759803771973,49.2057266235352 Z" p-id="8637" fill="#FF777777" stroke="Null"></path>
<path d="M63.1266326904297,3 L84.1292266845703,24.0026035308838 L68.3772888183594,24.0026035308838 C65.2268981933594,24.0026035308838 63.1266403198242,21.90234375 63.1266403198242,18.751953125 L63.1266403198242,3 Z" p-id="8638" fill="#FFE0E0E0" stroke="Null"></path>

1
2

②fxSuperButtonrtsp屬性設定

Height：設定控制元件高度=100。
Width：設定控制元件寬度=100。
ButtonType：設定按鈕型別，設定為TfxSvgButton。
Name：設定控制元件名稱=fxSuperButtonrtsp。
ButtonType.SvgData：設定SVG數據，其數據內容如下。

<path d="M42.6162719726563,37.4573974609375 L42.6162719726563,81.759765625 L52.4612426757813,81.759765625 L57.3837280273438,81.759765625 L86.9186401367188,81.759765625 L86.9186401367188,37.4573974609375 L42.6162719726563,37.4573974609375 Z M52.4612426757813,76.8372802734375 L47.5387573242188,76.8372802734375 L47.5387573242188,71.914794921875 L52.4612426757813,71.914794921875 L52.4612426757813,76.8372802734375 Z M52.4612426757813,66.9923095703125 L47.5387573242188,66.9923095703125 L47.5387573242188,62.06982421875 L52.4612426757813,62.06982421875 L52.4612426757813,66.9923095703125 Z M52.4612426757813,57.1473388671875 L47.5387573242188,57.1473388671875 L47.5387573242188,52.224853515625 L52.4612426757813,52.224853515625 L52.4612426757813,57.1473388671875 Z M52.4612426757813,47.3023681640625 L47.5387573242188,47.3023681640625 L47.5387573242188,42.3798828125 L52.4612426757813,42.3798828125 L52.4612426757813,47.3023681640625 Z M72.1511840820313,76.8372802734375 L57.3837280273438,76.8372802734375 L57.3837280273438,42.3798828125 L72.1511840820313,42.3798828125 L72.1511840820313,76.8372802734375 Z M81.9961547851563,76.8372802734375 L77.0736694335938,76.8372802734375 L77.0736694335938,71.914794921875 L81.9961547851563,71.914794921875 L81.9961547851563,76.8372802734375 Z M81.9961547851563,66.9923095703125 L77.0736694335938,66.9923095703125 L77.0736694335938,62.06982421875 L81.9961547851563,62.06982421875 L81.9961547851563,66.9923095703125 Z M81.9961547851563,57.1473388671875 L77.0736694335938,57.1473388671875 L77.0736694335938,52.224853515625 L81.9961547851563,52.224853515625 L81.9961547851563,57.1473388671875 Z M81.9961547851563,47.3023681640625 L77.0736694335938,47.3023681640625 L77.0736694335938,42.3798828125 L81.9961547851563,42.3798828125 L81.9961547851563,47.3023681640625 Z M18.0038452148438,32.534912109375 L37.2852172851563,32.534912109375 L65.5895080566406,32.534912109375 L67.2286987304688,32.534912109375 L72.1511840820313,32.534912109375 L72.1511840820313,3 L13.0813598632813,3 L13.0813598632813,81.759765625 L37.6937866210938,81.759765625 L37.6937866210938,76.8372802734375 L18.0038452148438,76.8372802734375 L18.0038452148438,71.914794921875 L37.6937866210938,71.914794921875 L37.6937866210938,66.9923095703125 L18.0038452148438,66.9923095703125 L18.0038452148438,32.534912109375 Z M18.0038452148438,7.9224853515625 L67.2286987304688,7.9224853515625 L67.2286987304688,17.7674560546875 L18.0038452148438,17.7674560546875 L18.0038452148438,7.9224853515625 Z M18.0038452148438,22.68994140625 L67.2286987304688,22.68994140625 L67.2286987304688,27.6124267578125 L18.0038452148438,27.6124267578125 L18.0038452148438,22.68994140625 Z" p-id="8787" fill="#FF707070" stroke="Null"></path>

③fxEdit1屬性設定
- Height：設定控制元件高度=370。
- Width：設定控制元件寬度=30。
- Text：設定文字，該文字為視訊流的網路地址。
- TextSettings：設定字型樣式。Font.Size=18，HorzAlign=Leading，VertAlign=Center。

④fxSuperButton1屬性設定

Height：設定控制元件高度=50。
Width：設定控制元件寬度=100。
ButtonType：設定按鈕型別，設定為TfxSvgButton。
ButtonType.SvgData：設定SVG數據，其數據內容如下。

<path d="M50,3 C37.8485107421875,3 27.9975433349609,12.8509664535522 27.9975433349609,25.0024585723877 C27.9975433349609,37.1539497375488 37.8485107421875,47 50,47 C62.151496887207,47 72.0024566650391,37.1490325927734 72.0024566650391,24.9975433349609 C72.0024566650391,12.8460550308228 62.1465759277344,3 50,3 Z M58.5974731445313,25.8233737945557 L43.329460144043,34.6420516967773 C42.6953430175781,35.0058097839355 41.903923034668,34.5486526489258 41.903923034668,33.8211364746094 L41.903923034668,16.1837787628174 C41.903923034668,15.4513473510742 42.6953430175781,14.9941911697388 43.329460144043,15.3628644943237 L58.5974731445313,24.1766300201416 C59.2315979003906,24.5453033447266 59.2315979003906,25.4596138000488 58.5974731445313,25.8233737945557 Z" p-id="10860" fill="#FF707070" stroke="Null"></path>

⑤fxSuperButtonLive屬性設定

Height：設定控制元件高度=100。
Width：設定控制元件寬度=100。
ButtonType：設定按鈕型別，設定為TfxSvgButton。
Name：設定控制元件名稱=fxSuperButtonLive。
ButtonType.SvgData：設定SVG數據，其數據內容如下。

<path d="M84.8517761230469,40.3196144104004 C88.6165618896484,38.0197830200195 93.318603515625,40.890625 93.318603515625,45.478458404541 L93.318603515625,69.7093276977539 C93.318603515625,74.3050308227539 88.6047515869141,77.1758728027344 84.8399658203125,74.8760452270508 L77.8144836425781,70.5993118286133 L77.8144836425781,73.3756408691406 C77.8144836425781,77.9831619262695 74.2426605224609,81.759765625 69.8674926757813,81.759765625 L14.6283912658691,81.759765625 C10.2650260925293,81.759765625 6.681396484375,77.9910507202148 6.681396484375,73.371711730957 L6.681396484375,38.9531059265137 C6.681396484375,34.3455810546875 10.253212928772,30.5650482177734 14.6283912658691,30.5650482177734 L69.8793029785156,30.5650482177734 C74.2426605224609,30.5650482177734 77.8223724365234,34.3337669372559 77.8223724365234,38.9531059265137 L77.8223724365234,44.5963401794434 L84.8478546142578,40.3196144104004 Z M38.4457473754883,42.8557167053223 C36.586986541748,41.5010261535645 34.259593963623,43.1943817138672 34.2477798461914,45.9037704467773 L34.2477798461914,66.4092254638672 C34.2477798461914,69.1304244995117 36.586986541748,70.8198471069336 38.4457473754883,69.4690933227539 L52.5439834594727,59.2143898010254 C54.4027442932129,57.8597030639648 54.4027442932129,54.4650993347168 52.5439834594727,53.1104049682617 L38.445743560791,42.8557090759277 Z M34.2477836608887,18.750883102417 C34.2477836608887,23.100736618042 30.721529006958,26.6269950866699 26.3716697692871,26.6269950866699 C22.0218162536621,26.6269950866699 18.4955596923828,23.100736618042 18.4955596923828,18.750883102417 C18.4970626831055,14.4018383026123 22.0245361328125,10.876802444458 26.3743915557861,10.8783054351807 C30.7214374542236,10.879807472229 34.2453079223633,14.4028949737549 34.2477798461914,18.7499389648438 M57.8761100769043,26.6269950866699 C64.3997802734375,26.7471961975098 69.7857055664063,21.5561561584473 69.9059143066406,15.0324821472168 C70.026123046875,8.50880527496338 64.8350830078125,3.12287759780884 58.3114051818848,3.00267386436462 C58.1676292419434,3.00002527236938 58.0238227844238,3 57.8800468444824,3.00260210037231 C51.3563270568848,3.12063097953796 46.1634979248047,8.50482845306396 46.2815284729004,15.0285453796387 C46.3965225219727,21.3844509124756 51.5202369689941,26.5098838806152 57.8761100769043,26.6269950866699 Z" p-id="10022" fill="#FF707070" stroke="Null"></path>

# 3. 程式設計

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

# 3.1. 程式初始設定

該程式無初始設定。

# 3.2. 事件設定

①fxSuperButtonVideoFile-OnClick事件

點選以載入指定地址的網路視訊檔案。

Procedure fxSuperButtonVideoFileOnClick(Sender: TObject);
//播放網路視訊檔案，如鏈接失效，請自行替換為其他網路視訊檔案源
Begin
  if fxTbsVideoPlayer1.canUseTbsPlayer then
  begin
    fxTbsVideoPlayer1.openVideo
      ('http://39.107.118.131/uploads/Doc/leijia1.mp4');
  end
  else
  begin
    showmessage('播放器被禁用!');
  end;
End;

1
2
3
4
5
6
7
8
9
10
11
12
13

②fxSuperButtonrtsp-OnClick事件

點選以載入指定的網路地址的直播流視訊。

Procedure fxSuperButtonrtspOnClick(Sender: TObject);
//rtsp流媒體，下方為大熊兔（VOD）點播，如鏈接失效，請自行替換為其他rtsp源，或者自行搭建rtsp伺服器進行測試
Begin
  if fxTbsVideoPlayer1.canUseTbsPlayer then
  begin
    fxTbsVideoPlayer1.openVideo
      ('rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov');
  end
  else
  begin
    showmessage('播放器被禁用!');
  end;
End;

1
2
3
4
5
6
7
8
9
10
11
12
13

④fxSuperButton1-OnClick事件

自定義視訊檔案地址進行播放。

Procedure fxSuperButton1OnClick(Sender: TObject);
//自定義檔案播放
Begin
  if fxTbsVideoPlayer1.canUseTbsPlayer then
  begin
    fxTbsVideoPlayer1.openVideo(fxEdit1.Text);
  end
  else
  begin
    showmessage('播放器被禁用!');
  end;  
End;

1
2
3
4
5
6
7
8
9
10
11
12

⑤fxSuperButtonLive-OnClick事件

點選以進行電視直播播放。

Procedure fxSuperButtonLiveOnClick(Sender: TObject);
//電視直播，下方鏈接為北郵直播視訊的測試地址
Begin
  if fxTbsVideoPlayer1.canUseTbsPlayer then
  begin
    fxTbsVideoPlayer1.openVideo('http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8');
  end
  else
  begin
    showmessage('播放器被禁用!');
  end;
End;

1
2
3
4
5
6
7
8
9
10
11
12

# 4. 運行結果

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

通過同步中心，將程式上傳至手機PinToo運行；同步時，請確保手機已經運行PinToo，並且已經登陸。

點選其中的按鈕打開對應的視訊進行檢視。

← 網路文件瀏覽語音播報→