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菜单，点击[保存至数据库]按钮，将其保存至数据库，点击[调试运行]确认能够正常打开。

  在运行界面中修改网络视频的地址以及网络直播的地址，分别点击对应的[播放视频]、[播放直播]按钮以开启视频播放或者直播播放，在此过程中可以点击[暂停]、[播放]按钮以暂停播放或者继续进行播放。