Smart之视频播放

• 文档号： S-EQ-DEM-2022

1. 说明

  范例使用视频播放组件，实现视频播放的功能。

  通过范例学习，可以实现本地视频播放，网络视频播放等相关功能。

2. 设计明细

  开启Smart智慧控制平台，分别加入下插图之控件。或者通过点击菜单栏[文件]-[打开项目]选择项目打开该范例。

  ①：TPanel组件，控件名称为Panel1。

  ②：TSFPlayer组件，控件名称为SFPlayer1。

  ③：TOpenDialog组件，控件名称为OpenDialog1。

  ④：TButton组件，控件名称为btnSpeed。

  ⑤：TCheckBox组件，控件名称为chkAudioHook。

  ⑥：TCheckBox组件，控件名称为chkMute。

  ⑦：TComboBox组件，控件名称为cboShowMode。

  ⑧：TTrackBar组件，控件名称为TrackBar1。

  ⑨：TButton组件，控件名称为btnOpen。

  ⑩：TCheckBox组件，控件名称为chkDisableVideo。

  (11)：TCheckBox组件，控件名称为chkDisableAudio。

  (12)：TCheckBox组件，控件名称为chkExternalSubtitle。

  (13)：TCheckBox组件，控件名称为chkOpenPaused。

  (14)：TCheckBox组件，控件名称为chkWaterMark。

  (15)：TButton组件，控件名称为btnURL。

  (16)：TButton组件，控件名称为btnPause。

  (17)：TButton组件，控件名称为btnStep。

  (18)：TButton组件，控件名称为btnStop。

  (19)：TButton组件，控件名称为Button5。

  (20)：TComboBox组件，控件名称为cboAudioDevice。

  (21)：TComboBox组件，控件名称为cboScreens。

  (22)：TComboBox组件，控件名称为cboVideo。

  (23)：TComboBox组件，控件名称为cboAudio。

  (24)：TComboBox组件，控件名称为cboSubtitle。

  (25)：TComboBox组件，控件名称为cboAspectRatio。

  (26)：TCheckBox组件，控件名称为chkVerticalFlip。

  (27)：TCheckBox组件，控件名称为chkFrameHook。

  (28)：TCheckBox组件，控件名称为chkVideoHook。

  (29)：TTrackBar组件，控件名称为trbSpeed。

  (30)：TTrackBar组件，控件名称为trbBrightness。

  (31)：TTrackBar组件，控件名称为trbSaturation。

  (32)：TTrackBar组件，控件名称为trbHue。

  (33)：TButton组件，控件名称为btnBrightness。

  (34)：TButton组件，控件名称为btnSaturation。

  (35)：TButton组件，控件名称为btnHue。

  (36)：TProgressBar组件，控件名称为prbLeft。

  (37)：TProgressBar组件，控件名称为prbRight。

  (38)：TTrackBar组件，控件名称为trbAudioVolume。

  (39)：TCheckBox组件，控件名称为chkFullScreen。

  (40)：TCheckBox组件，控件名称为chkStayOnTop。

  (41)：TCheckBox组件，控件名称为chkMsgLog。

• Main窗体属性设置

  • ClientHeight：窗体客户区高度=594。
  • ClientWidth：窗体客户区宽度=839。

• ④btnSpeed属性设置

  • Height：设置控件高度=23。
  • Width：设置控件宽度=43。
  • Name：设置控件名称为btnSpeed。
  • Caption：设置面板显示的字幕=重置。

• ⑤chkAudioHook属性设置

  • Caption：设置单选框显示的字幕内容=标准。
  • Checked：设置是否处于勾选状态=True。
  • Name：设置控件名称为chkAudioHook。

• ⑥chkMute属性设置

  • Caption：设置单选框显示的字幕内容=静音。
  • Name：设置控件名称为chkMute。

• ⑦cboShowMode属性设置

  • Height：设置控件高度=21。
  • Width：设置控件宽度=85。
  • Name：设置控件名称为cboShowMode。
  • Items：设置选项，双击该属性或者点击属性右侧的[...]打开编辑器，输入下列选项。

  

  • ItemIndex：设置默认选择的选项的索引值=0。

• ⑨btnOpen属性设置

  • Height：设置控件高度=25。
  • Width：设置控件宽度=51。
  • Caption：设置按钮显示的文字=打开。
  • Name：设置控件名称btnOpen。

• ⑩chkDisableVideo属性设置

  • Height：设置控件高度=17。
  • Width：设置控件宽度=97。
  • Caption：设置选框显示的文字=禁用视频。
  • Name：设置控件名称chkDisableVideo。

• (11)chkDisableAudio属性设置

  • Height：设置控件高度=17。
  • Width：设置控件宽度=97。
  • Caption：设置按钮显示的文字=禁用音频。
  • Name：设置控件名称chkDisableAudio。

• (12)chkExternalSubtitle属性设置

  • Height：设置控件高度=17。
  • Width：设置控件宽度=97。
  • Caption：设置选框显示的文字=扩展字幕。
  • Name：设置控件名称chkExternalSubtitle。

• (13)chkOpenPaused属性设置

  • Height：设置控件高度=17。
  • Width：设置控件宽度=97。
  • Caption：设置选框显示的文字=载入后停止。
  • Name：设置控件名称chkOpenPaused。

• (14)chkWaterMark属性设置

  • Height：设置控件高度=17。
  • Width：设置控件宽度=97。
  • Caption：设置选框显示的文字=水印/标志。
  • Name：设置控件名称chkWaterMark。

• (15)btnURL属性设置

  • Height：设置控件高度=25。
  • Width：设置控件宽度=47。
  • Name：设置控件名称为btnURL。
  • Caption：设置按钮显示的字幕=URL。

• (16)btnPause属性设置

  • Height：设置控件高度=25。
  • Width：设置控件宽度=47。
  • Name：设置控件名称为btnPause。
  • Caption：设置按钮显示的字幕=暂停。

• (17)btnStep属性设置

  • Height：设置控件高度=25。
  • Width：设置控件宽度=47。
  • Name：设置控件名称为btnStep。
  • Caption：设置按钮显示的字幕=步骤。

• (18)btnStop属性设置

  • Height：设置控件高度=25。
  • Width：设置控件宽度=47。
  • Name：设置控件名称为btnStop。
  • Caption：设置按钮显示的字幕=停止。

• (19)Button5属性设置

  • Height：设置控件高度=25。
  • Width：设置控件宽度=47。
  • Caption：设置按钮显示的字幕=截图。

• (20)cboAudioDevice属性设置

  • Height：设置控件高度=21。
  • Width：设置控件宽度=121。
  • Name：设置控件名称为cboAudioDevice。

• (21)cboScreens属性设置

  • Height：设置控件高度=21。
  • Width：设置控件宽度=105。
  • Name：设置控件名称为cboScreens。

• (22)cboVideo属性设置

  • Height：设置控件高度=21。
  • Width：设置控件宽度=105。
  • Name：设置控件名称为cboVideo。

• (23)cboAudio属性设置

  • Height：设置控件高度=21。
  • Width：设置控件宽度=105。
  • Name：设置控件名称为cboAudio。

• (24)cboSubtitle属性设置

  • Height：设置控件高度=21。
  • Width：设置控件宽度=105。
  • Name：设置控件名称为cboSubtitle。

• (25)cboAspectRatio属性设置

  • Height：设置控件高度=21。
  • Width：设置控件宽度=105。
  • Name：设置控件名称为cboAspectRatio。
  • Items：设置选项，双击该属性或者点击属性右侧的[...]打开编辑器，输入下列选项。

  

  • ItemIndex：设置默认选择的选项=0。

• (26)chkVerticalFlip属性设置

  • Height：设置控件高度=17。
  • Width：设置控件宽度=97。
  • Caption：设置选框显示的文字=垂直翻转。
  • Name：设置控件名称chkVerticalFlip。

• (27)chkFrameHook属性设置

  • Height：设置控件高度=17。
  • Width：设置控件宽度=117。
  • Caption：设置选框显示的文字=帧钩器。
  • Name：设置控件名称chkFrameHook。

• (28)chkVideoHook属性设置

  • Height：设置控件高度=17。
  • Width：设置控件宽度=117。
  • Caption：设置选框显示的文字=视频挂钩。
  • Name：设置控件名称chkVideoHook。

• (29)trbSpeed属性设置

  • Height：设置控件高度=20。
  • Width：设置控件宽度=150。
  • Name：设置控件名称trbSpeed。
  • Max：设置轨迹条的最大值=100。
  • Min：设置轨迹条的最小值=-100。
  • Position：设置轨迹条当前指示的位置=0。

• (30)trbBrightness属性设置

  • Height：设置控件高度=20。
  • Width：设置控件宽度=150。
  • Name：设置控件名称trbBrightness。
  • Max：设置轨迹条的最大值=100。
  • Min：设置轨迹条的最小值=-100。
  • Position：设置轨迹条当前指示的位置=0。

• (31)trbSaturation属性设置

  • Height：设置控件高度=20。
  • Width：设置控件宽度=150。
  • Name：设置控件名称trbSaturation。
  • Max：设置轨迹条的最大值=100。
  • Min：设置轨迹条的最小值=-100。
  • Position：设置轨迹条当前指示的位置=10。

• (32)trbHue属性设置

  • Height：设置控件高度=20。
  • Width：设置控件宽度=150。
  • Name：设置控件名称trbHue。
  • Max：设置轨迹条的最大值=100。
  • Min：设置轨迹条的最小值=-100。
  • Position：设置轨迹条当前指示的位置=10。

• (33)btnBrightness属性设置

  • Height：设置控件高度=23。
  • Width：设置控件宽度=43。
  • Name：设置控件名称为btnBrightness。
  • Caption：设置面板显示的字幕=重置。

• (34)btnSaturation属性设置

  • Height：设置控件高度=23。
  • Width：设置控件宽度=43。
  • Name：设置控件名称为btnSaturation。
  • Caption：设置面板显示的字幕=重置。

• (35)btnHue属性设置

  • Height：设置控件高度=23。
  • Width：设置控件宽度=43。
  • Name：设置控件名称为btnHue。
  • Caption：设置面板显示的字幕=重置。

• (36)prbLeft属性设置

  • Orientation：设置进度条的朝向，设置为pbVertical。
  • Height：设置控件高度=101。
  • Width：设置控件宽度=22。
  • Name：设置控件名称=prbLeft。

• (37)prbRight属性设置

  • Orientation：设置进度条的朝向，设置为pbVertical。
  • Height：设置控件高度=101。
  • Width：设置控件宽度=22。
  • Name：设置控件名称=prbRight。

• (38)trbAudioVolume属性设置

  • Orientation：设置轨迹条的朝向，设置为pbVertical。
  • Height：设置控件高度=20。
  • Width：设置控件宽度=150。
  • Name：设置控件名称trbAudioVolume。
  • Max：设置轨迹条的最大值=128。
  • Min：设置轨迹条的最小值=0。
  • Position：设置轨迹条当前指示的位置=128。

• (39)chkFullScreen属性设置

  • Height：设置控件高度=17。
  • Width：设置控件宽度=97。
  • Caption：设置选框显示的文字=全屏。
  • Name：设置控件名称chkFullScreen。

• (40)chkStayOnTop属性设置

  • Height：设置控件高度=17。
  • Width：设置控件宽度=97。
  • Caption：设置选框显示的文字=总是在最前。
  • Name：设置控件名称chkStayOnTop。

• (41)chkMsgLog属性设置

  • Height：设置控件高度=17。
  • Width：设置控件宽度=97。
  • Caption：设置选框显示的文字=消息日志。
  • Name：设置控件名称chkMsgLog。

3. 程序设计

3.1. 程序初始设置

  程序初始化，设置基本参数。

constructor TMyHandler.Create(AOwner: TComponent);
var
  I, T: Integer;
  Found: Boolean;
begin
  FThis :=TBaseForm(AOwner);
  // 均衡器设置，设置视频的明度，饱和度与色相
  FBrightness := 0;
  FSaturation := 1;
  FHue := 0;
 
  if FThis.FSPlayer1.InitSDL then
  begin
      // get audio devices after InitSDL()
     FThis.cboAudioDevice.Items.Assign(FThis.FSPlayer1.AudioDevices);
     if FThis.cboAudioDevice.Items.Count > 0 then
     FThis.cboAudioDevice.ItemIndex := 0;
  end; 

  // 生成屏幕列表
  FThis.cboScreens.Items.Clear;
  FThis.cboScreens.Items.BeginUpdate;
  try
    FThis.cboScreens.Items.Add('Desktop');
    FThis.cboScreens.Items.Add('Popup');

      for I := 0 to FThis.ControlCount - 1 do
      begin
        if (FThis.Controls[I] is TWinControl) then
        begin
          FThis.cboScreens.Items.Add(FThis.Controls[I].Name);
        end;
      end;
    FThis.cboScreens.ItemIndex := 2;
    // 选择视频显示的面板
    FThis.FSPlayer1.VideoPanel := FThis.cboScreens.Text; 
  finally
    FThis.cboScreens.Items.EndUpdate;
  end;
end;

3.2. 事件设置

• ①Panel1-OnDbClick事件

  双击面板以启用视频全屏播放的功能。

procedure TMyHandler.Panel1DblClick;
begin
  FThis.FSPlayer1.FullScreen := not FThis.FSPlayer1.FullScreen;
  FThis.chkFullScreen.Checked := not FThis.chkFullScreen.Checked; 
end;

• ⑨btnOpen-OnClick事件

  点击[打开]按钮，打开视频，按照设置的播放模式进行播放。

procedure TMyHandler.btnOpenClick;
var
  URL:String;
begin
  if sender = FThis.btnOpen then
  begin
  if FThis.OpenDialog1.Execute(0) then
  begin
     FThis.FSPlayer1.Open(FThis.OpenDialog1.FileName,false);
  end;
  end
  else if sender = FThis.btnURL then
  begin
    URL := 'rtmp://58.200.131.2:1935/livetv/dftv';
    // 打开URL
    FThis.FSPlayer1.ReadTimeout := 1000 * 60;
    if not InputQuery('Open', 'URL(or Filename)', URL) then
      // cancel open url
      Exit;
   FThis.FSPlayer1.Open(Trim(URL),FThis.chkOpenPaused.Checked);
  end;
  
  FThis.FSPlayer1.AudioDevice :=  FThis.cboAudioDevice.Text;
  
  // initial options
  FThis.FSPlayer1.DisableAudio := FThis.chkDisableAudio.Checked;
  FThis.FSPlayer1.DisableVideo := FThis.chkDisableVideo.Checked;
  
  // libavfilter: please refer to http://ffmpeg.org/ffmpeg-filters.html
  // NOTICE: What I know about libavfilter is also very limited.
  //         so you have to get help of it by yourself.

  //FFPlayer.VideoFilters := 'hue=H=2*PI*t:s=sin(2*PI*t)+1';
  FThis.FSPlayer1.VideoFilters := Format('hue=b=%f:s=%f:H=%f', [FBrightness, FSaturation, FHue]);
end;

• (16)btnPause-OnClick事件

  点击[暂停]按钮，暂停视频的播放。

procedure TMyHandler.btnPauseClick;
begin
   FThis.FSPlayer1.TogglePause;
end;

• (17)btnStep-OnClick事件

  点击[步骤]按钮，播放视频的下一帧。

procedure TMyHandler.btnStepClick;
begin
   FThis.FSPlayer1.StepToNextFrame;
end;

• (18)btnStop-OnClick事件

  点击[停止]按钮，停止视频的播放。

procedure TMyHandler.btnStopClick;
begin
   FThis.FSPlayer1.Stop(true);
end;

• (19)Button5-OnClick事件

  点击[截图]按钮，截取视频图片并选择目录进行保存。

procedure TMyHandler.Button5Click;
begin
   FThis.FSPlayer1.Capture;
end;

• (39)chkFullScreen-OnClick事件

  勾选全屏选项，将在视频播放时执行全屏操作。

procedure TMyHandler.chkFullScreenClick;
begin
 if Fthis.chkFullScreen.Checked then
   FThis.FSPlayer1.FullScreen := true;
end;

• (30)trbBrightness-OnChange事件

  当改变视频亮度轨迹条时，调整视频的亮度。

procedure TMyHandler.trbBrightnessChange;
begin
  // change brightness range (-10 - 10)
  FBrightness := FThis.trbBrightness.Position / 10;
  FThis.FSPlayer1.SendVideoFilterCommand('hue', 'b', FloatToStr(FBrightness), 0);
end;

• (31)trbSaturation-OnChange事件

  当改变视频饱和度轨迹条时，调整视频的饱和度。

procedure TMyHandler.trbSaturationChange;
begin
  // change saturation range (-10 - 10)
  FSaturation := FThis.trbSaturation.Position / 10;
  FThis.FSPlayer1.SendVideoFilterCommand('hue', 's', FloatToStr(FSaturation), 0);
end;

• (32)trbHue-OnChange事件

  当改变视频色相轨迹条时，调整视频的色相。

procedure TMyHandler.trbHueChange;
begin
  // change hue degrees range (-PI - PI)
  FHue := FThis.trbHue.Position / 100 * PI;
  FThis.FSPlayer1.SendVideoFilterCommand('hue', 'H', FloatToStr(FHue), 0);
end;

• (33)btnBrightness-OnClick事件

  点击亮度的[重置]按钮，恢复亮度为初始设定值。

procedure TMyHandler.btnBrightnessClick;
begin
  // reset brightness
  FThis.trbBrightness.Position := 0;
end;

• (34)btnSaturation-OnClick事件

  点击饱和度的[重置]按钮，恢复饱和度为初始设定值。

procedure TMyHandler.btnSaturationClick;
begin
  // reset saturation
  FThis.trbSaturation.Position := 10;
end;

• (35)btnHue-OnClick事件

  点击色相的[重置]按钮，恢复色相为初始设定值。

procedure TMyHandler.btnHueClick;
begin
  // reset hue
  FThis.trbHue.Position := 0;
end;

• ⑥chkMute-OnClick事件

  勾选静音选项，视频播放时采取静音操作。

procedure TMyHandler.chkMuteClick;
begin
  // toggle audio mute
   FThis.FSPlayer1.Mute := FThis.chkMute.Checked;
end;

• ⑦cboShowMode-OnChange事件

  选择显示模式选项，设置视频的显示模式。

procedure TMyHandler.cboShowModeChange;
begin
  // change show mode
  FThis.FSPlayer1.ShowMode := TShowMode(FThis.cboShowMode.ItemIndex);
end;

• (40)chkStayOnTop-OnClick事件

  切换视频播放时是否进行置顶。(该功能目前暂时无效果)

procedure TMyHandler.chkStayOnTopClick;
begin
  // toggle stay on top
  if FThis.chkStayOnTop.Checked and not FThis.FsPlayer1.Paused then
    FThis.FormStyle := fsStayOnTop
  else
    FThis.FormStyle := fsNormal;
end;

• (41)chkMsgLog-OnClick事件

  勾选消息日志，显示对应的消息内容。

procedure TMyHandler.chkMsgLogClick;
begin
  // toggle message log
  FThis.FsPlayer1.ShowMsgLog(FThis.chkMsgLog.Checked);
end;

• (25)cboAspectRatio-OnClick事件

  选择纵横比选框，改变视频播放的纵横比。

procedure TMyHandler.cboAspectRatioChange;
begin
{
  = 0 -> keeping original
  < 0 -> scaling to fit screen
  > 0 -> custom, for example: 4/3, 16/9, 1.85, 2.35
}
  // change aspect ratio
  case FThis.cboAspectRatio.ItemIndex of
    1: FThis.FSPlayer1.AspectRatio := -1;
    2: FThis.FSPlayer1.AspectRatio := 4 / 3;
    3: FThis.FSPlayer1.AspectRatio := 16 / 9;
    4: FThis.FSPlayer1.AspectRatio := 1.85;
    5: FThis.FSPlayer1.AspectRatio := 2.35;
  else
       FThis.FSPlayer1.AspectRatio := 0;
  end;
end;

• (26)chkVerticalFlip-OnClick事件

  勾选垂直翻转，视频播放时显示垂直翻转效果。

procedure TMyHandler.chkVerticalFlipClick;
begin
  // toggle enable/disable vertical flip
  FThis.FSPlayer1.VerticalFlip := FThis.chkVerticalFlip.Checked;
end;

• (27)chkFrameHook-OnClick事件

  点击钩帧器，启用或者禁用帧钩。

procedure TMyHandler.chkFrameHookClick;
begin
  // toggle enable/disable frame hook
  FThis.FSPlayer1.FrameHook := FThis.chkFrameHook.Checked;
end;

• (28)chkVideoHook-OnClick事件

  勾选视频挂钩，启用或者禁用视频挂钩。

procedure TMyHandler.chkVideoHookClick;
begin
  // toggle enable/disable video hook
  FThis.FSPlayer1.VideoHook := FThis.chkVideoHook.Checked;
end;

• (21)cboScreens-OnChange事件

  点击切换用于渲染视频的组件。

procedure TMyHandler.cboScreensChange;
begin
  // video panel
  FThis.FSPlayer1.VideoPanel := FThis.cboScreens.Text; 
end;

• ⑤chkAudioHook-OnClick事件

  点击开启/关闭标准。

procedure TMyHandler.chkAudioHookClick;
begin
  // toggle enable/disable audio hook
  FThis.FSPlayer1.AudioHook := FThis.chkAudioHook.Checked;
  FThis.prbLeft.Position := 0;
  FThis.prbRight.Position := 0;
end;

• (38)trbAudioVolume-OnChange事件

  点击音量滑轨，视频音量随之进行大小调整。

procedure TMyHandler.trbAudioVolumeChange;
begin
  // change audio volume range (0-128)
  FThis.FSPlayer1.AudioVolume := FThis.trbAudioVolume.Max - FThis.trbAudioVolume.Position;
end;

4. 运行结果

  通过工具栏保存，将程序保存为 sdb 项目文件。

  使用鼠标点击工具栏运行（Run），测试运行结果。

  首先选择音频设备与渲染视频的控件，点击[打开]按钮，打开文件管理器，选择对应的视频文件，确认后返回至该程序开始视频播放，可点击其中的按钮对视频的播放进行相应的操作。