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），測試運行結果。

  首先選擇音訊設備與渲染視訊的控制元件，點選[打開]按鈕，打開檔案管理器，選擇對應的視訊檔案，確認后返回至該程式開始視訊播放，可點選其中的按鈕對視訊的播放進行相應的操作。