网络视频播放

# 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，并且已经登陆。

点击其中的按钮打开对应的视频进行查看。

← 网络文档浏览语音播报→