愛招飛幫助手冊 愛招飛幫助手冊
  • FastERP-1
  • Smart
  • PinToo
  • FastWeb
  • FastERP-2 企業管理系統 (opens new window)
  • 印染業ERP (opens new window)
  • 工廠終端機 (opens new window)
  • TARS
  • MARS
  • TaskRunner
  • Flying
  • FastDesk
  • HiDesk
  • HiNAT
  • FastBPM
  • 設備故障診斷 (opens new window)
  • 設備最佳運轉效益 (opens new window)
  • 企業智能助手SmeGPT (opens new window)
  • 燈號管理 (opens new window)
  • 戰情室 (opens new window)
  • 能源管理 (opens new window)
  • 人車定位 (opens new window)
  • 戰情指揮系統 (opens new window)
  • FastERP-1
  • FastWeb
  • Smart
  • PinToo
  • Flying
  • TARS
  • 通用功能

    • Report
    • Script
    • Echarts
    • Chart
    • DB Install
  • FastERP-1
  • Smart
  • PinToo
  • FastWeb
  • FastERP-2 企業管理系統 (opens new window)
  • 印染業ERP (opens new window)
  • 工廠終端機 (opens new window)
  • TARS
  • MARS
  • TaskRunner
  • Flying
  • FastDesk
  • HiDesk
  • HiNAT
  • FastBPM
  • 設備故障診斷 (opens new window)
  • 設備最佳運轉效益 (opens new window)
  • 企業智能助手SmeGPT (opens new window)
  • 燈號管理 (opens new window)
  • 戰情室 (opens new window)
  • 能源管理 (opens new window)
  • 人車定位 (opens new window)
  • 戰情指揮系統 (opens new window)
  • FastERP-1
  • FastWeb
  • Smart
  • PinToo
  • Flying
  • TARS
  • 通用功能

    • Report
    • Script
    • Echarts
    • Chart
    • DB Install
  • FastWeb幫助主頁
  • 學習手冊

  • 開發手冊

    • 通訊協議

    • 互動輸出

    • 媒體存取

      • 文件媒體

        • 網路文件瀏覽(WEB)
        • 網路視訊播放(WEB)
          • 1. 說明
          • 2. 設計明細
          • 3. 程式設計
            • 3.1. 程式初始設定
            • 3.2. 事件設定
          • 4. 運行結果
        • 網路視訊播放(APP)
        • 傢俱3D展示(WEB)
        • 汽車3D展示(WEB)
        • 別墅3D展示(WEB)
        • 菜譜展示(WEB)
        • 環繞風景展示(WEB)
        • 全景視訊(WEB)
        • 全景汽車內飾(WEB)
        • 全景漫遊(WEB)
        • 傢俱3D展示-視覺化控制元件(WEB)
        • 汽車3D展示-視覺化控制元件(WEB)
        • 別墅3D展示-視覺化控制元件(WEB)
        • 菜譜展示-視覺化控制元件(WEB)
        • 環繞風景展示-視覺化控制元件(WEB)
        • 全景視訊-視覺化控制元件(WEB)
        • 全景汽車內飾-視覺化控制元件(WEB)
        • CKPlayer視訊播放(WEB)
        • 儀表展示(WEB)
        • 表格數據匯入(WEB)
      • 遠端監控

    • 人工智慧

    • 實體運用

目录

網路視訊播放(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)

          ← 網路文件瀏覽(WEB) 網路視訊播放(APP)→

          Copyright © 2021-2025 愛招飛IsoFace | ALL Rights Reserved
          • 跟随系统
          • 浅色模式
          • 深色模式
          • 阅读模式