网络视频播放(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)→