愛招飛幫助手冊
目录

CKPlayer視訊播放(WEB)

# FastWeb之CKPlayer視訊播放(WEB)

# 1. 說明

  本範例使用CKPlayer作為示例展示視訊播放器的相關功能。

  通過本範例學習，可以掌握CKPlayer的快速入門方式，結合實體進行視訊播放相關的功能的操作。

# 2. 設計明細

  開啟FastWeb設計器，分別加入下插圖之控制元件。或者點選左上角的[匯入]選擇模板檔案來打開對應模板。

  1：TUgPanel元件，控制元件名稱為UgPanel01。

  2：TUgLabel元件，控制元件名稱為UgLabel02。

  3：TUgLabel元件，控制元件名稱為UgLabel01。

  4：TUgCKPlayer元件，控制元件名稱為UgCKPlayer01。

  5：TUgLabel元件，控制元件名稱為UgLabel05。

  6：TUgLabel元件，控制元件名稱為UgLabel03。

  7：TUgImage元件，控制元件名稱為UgImage01。

  8：TUgLabel元件，控制元件名稱為UgLabel04。

  9：TUgImage元件，控制元件名稱為UgImage02。

  10：TUgLabel元件，控制元件名稱為UgLabel06。

  11：TUgImage元件，控制元件名稱為UgImage03。

  12：TUgLabel元件，控制元件名稱為UgLabel07。

  • UgWebRunFrame屬性設定

    • Height：設定頁面高度=600。
    • Width：設定頁面寬度=800。

  • 1：UgPanel01屬性設定

    • Align：設定控制元件的對齊方式，設定為alTop。
    • Caption：設定顯示的字幕內容，請將原先預設的字元UgPanel01清除。

  • 2：UgLabel02屬性設定

    • Caption：設定顯示的文字的內容，設定為愛招飛音樂視訊。
    • Font：設定顯示的文字字型，點選右側的[√]按鈕打開字型對話方塊。按照下述展示的內容進行設定。

  • 3：UgLabel01屬性設定

    • Caption：設定顯示的文字的內容，設定為音樂MV《我的夢》。
    • Font：設定顯示的文字字型，點選右側的[√]按鈕打開字型對話方塊。按照下述展示的內容進行設定。

  • 4：UgCKPlayer01屬性設定

    • Anchors：設定錨點的相關資訊，其中設定akLeft、akRight、akTop與akBottom為True。

  • 5：UgLabel05屬性設定

    • Anchors：設定錨點的相關資訊，其中設定akLeft、akRight與akBottom為True，設定akTop為False。
    • AutoSize：設定控制元件的尺寸是否為跟隨字幕顯示自適應，設定為False。
    • Caption：設定字幕的顯示內容，設定為大家的音樂小編今天為大家帶來一首非常經典的曲目《我的夢》，《我的夢》是張靚穎演唱的歌曲，亦是華為消費者業務品牌主題曲，由王海濤和張靚穎作詞，Andy Love作曲。2018年6月，該曲成為電視劇《爲了你我願意熱愛整個世界》主題曲。。

  • 6：UgLabel03屬性設定

    • Anchors：設定錨點的相關資訊，其中設定akTop與akRight為True，設定akLeft與akBottom為False。
    • Caption：設定顯示的文字內容，設定為推薦視訊。
    • Font：設定顯示的文字字型，點選右側的[√]按鈕打開字型對話方塊。按照下述展示的內容進行設定。

  • 7：UgImage01屬性設定

    • Anchors：設定錨點的相關資訊，其中設定akTop與akRight為True，設定akLeft與akBottom為False。
    • Picture：設定顯示的影象，點選右側的[√]打開影象編輯器，選擇影象進行上傳。
    • Stretch：設定影象是否拉伸顯示，設定為True。

  • 8：UgLabel04屬性設定

    • Anchors：設定錨點的相關資訊，其中設定akTop與akRight為True，設定akLeft與akBottom為False。
    • Caption：設定顯示的文字內容，設定為鋼琴曲 夢中的婚禮。

  • 9：UgImage02屬性設定

    • Anchors：設定錨點的相關資訊，其中設定akTop與akRight為True，設定akLeft與akBottom為False。
    • Picture：設定顯示的影象，點選右側的[√]打開影象編輯器，選擇影象進行上傳。
    • Stretch：設定影象是否拉伸顯示，設定為True。

  • 10：UgLabel06屬性設定

    • Anchors：設定錨點的相關資訊，其中設定akTop與akRight為True，設定akLeft與akBottom為False。
    • Caption：設定顯示的文字內容，設定為薩克斯名曲 回家。

  • 11：UgImage03屬性設定

    • Anchors：設定錨點的相關資訊，其中設定akTop與akRight為True，設定akLeft與akBottom為False。
    • Picture：設定顯示的影象，點選右側的[√]打開影象編輯器，選擇影象進行上傳。
    • Stretch：設定影象是否拉伸顯示，設定為True。

  • 12：UgLabel07屬性設定

    • Anchors：設定錨點的相關資訊，其中設定akTop與akRight為True，設定akLeft與akBottom為False。
    • Caption：設定顯示的文字內容，設定為吉他名曲 愛的羅曼史。

# 3. 指令碼設計

  點選指令碼設計界面右下角的按鈕，切換至單元選擇界面，勾選需要使用的單元。該程式指令碼不需要引用單元。

# 3.1. 指令碼初始設定

  該程式指令碼初始設定視訊的相關資訊。

    //JScript
function ViewInit(){
  UgCKPlayer01.Options.video.Text = "library/js/ckplayer/sample-mp4/05cacb4e02f9d9e.mp4";
  UgCKPlayer01.Options.cktrack.Text = "[['library/js/ckplayer/material/en.srt','English',0],['library/js/ckplayer/material/zh.vtt','Chinese',1]]";
  UgCKPlayer01.Options.preview.Text = "{file: ['library/js/ckplayer/material/mydream_en1800_1010_01.png', 'library/js/ckplayer/material/mydream_en1800_1010_02.png'],scale: 2}";
  UgCKPlayer01.Options.promptSpot.Text = "[{words: 'Hint01',time: 30},{words: 'Hint02',time: 150}]";
  UgCKPlayer01.Options.crossdomain = "library/js/ckplayer/crossdomain.xml";
  UgCKPlayer01.Options.mobileCkControls = true;
  UgCKPlayer01.Options.mobileAutoFull = true;
  UgCKPlayer01.Options.overspread = true;
  UgCKPlayer01.Options.adfront = "library/js/ckplayer/sample-mp4/front01.mp4";
  UgCKPlayer01.Options.adfronttime = "10";
  UgCKPlayer01.Options.adfrontlink = "#";
  UgCKPlayer01.Options.adfronttype = "mp4";
  UgCKPlayer01.Options.adpause = "library/js/ckplayer/sample-mp4/adpause.jpg";
	UgCKPlayer01.Options.adpausetime = "5";
	UgCKPlayer01.Options.adpauselink = "#";
	UgCKPlayer01.Options.adpausetype = "jpg";
  UgCKPlayer01.Options.adinsert = "library/js/ckplayer/sample-mp4/insert01.mp4,library/js/ckplayer/sample-mp4/insert02.mp4";
	UgCKPlayer01.Options.adinserttime = "5,5";//中間插入廣告的單個視訊的時長
	UgCKPlayer01.Options.adinsertlink = "#,#";
	UgCKPlayer01.Options.adinserttype = "mp4,mp4";
	UgCKPlayer01.Options.inserttime = "20,30";//中間插入廣告需要顯示的時間點
  UgCKPlayer01.Options.adend = "library/js/ckplayer/sample-mp4/end01.mp4,library/js/ckplayer/sample-mp4/end02.mp4";
	UgCKPlayer01.Options.adendtime = "5,5";
	UgCKPlayer01.Options.adendtype = "mp4,mp4";
	UgCKPlayer01.Options.adendlink = "#,#";
  UgCKPlayer01.Init;
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    //PasScript
procedure ViewInit;
Begin
  UgCKPlayer01.Options.video.Text := 'library/js/ckplayer/sample-mp4/05cacb4e02f9d9e.mp4';
  UgCKPlayer01.Options.cktrack.Text := '[[''library/js/ckplayer/material/en.srt'',''English'',0],[''library/js/ckplayer/material/zh.vtt'',''Chinese'',1]]';
  UgCKPlayer01.Options.preview.Text := '{file: [''library/js/ckplayer/material/mydream_en1800_1010_01.png'', ''library/js/ckplayer/material/mydream_en1800_1010_02.png''],scale: 2}';
  UgCKPlayer01.Options.promptSpot.Text := ' [{words: ''Hint01'',time: 30},{words: ''Hint02'',time: 150}]';
  UgCKPlayer01.Options.crossdomain := 'library/js/ckplayer/crossdomain.xml';
  UgCKPlayer01.Options.mobileCkControls := True;
  UgCKPlayer01.Options.mobileAutoFull := True;
  UgCKPlayer01.Options.overspread := True;
  UgCKPlayer01.Options.adfront := 'library/js/ckplayer/sample-mp4/front01.mp4';
  UgCKPlayer01.Options.adfronttime := '10';
  UgCKPlayer01.Options.adfrontlink := '#';
  UgCKPlayer01.Options.adfronttype := 'mp4';
  UgCKPlayer01.Options.adpause :='library/js/ckplayer/sample-mp4/adpause.jpg';
	UgCKPlayer01.Options.adpausetime := '5';
	UgCKPlayer01.Options.adpauselink := '#';
	UgCKPlayer01.Options.adpausetype := 'jpg';
  UgCKPlayer01.Options.adinsert := 'library/js/ckplayer/sample-mp4/insert01.mp4,library/js/ckplayer/sample-mp4/insert02.mp4';
	UgCKPlayer01.Options.adinserttime := '5,5';//中間插入廣告的單個視訊的時長
	UgCKPlayer01.Options.adinsertlink := '#,#';
	UgCKPlayer01.Options.adinserttype := 'mp4,mp4';
	UgCKPlayer01.Options.inserttime := '20,30';//中間插入廣告需要顯示的時間點
  UgCKPlayer01.Options.adend := 'library/js/ckplayer/sample-mp4/end01.mp4,library/js/ckplayer/sample-mp4/end02.mp4';
	UgCKPlayer01.Options.adendtime := '5,5';
	UgCKPlayer01.Options.adendtype := 'mp4,mp4';
	UgCKPlayer01.Options.adendlink := '#,#';
  UgCKPlayer01.Init;
End;
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    // Make sure to add code blocks to your code group

      以及一些其它的初始化功能。

      //JScript
  UGMM.LC(Self);
  ViewInit();
      1
      2
      3
      //PasScript
procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
  UGMM.LC(Self);
end;

Begin
  ViewInit;  
End.
      1
      2
      3
      4
      5
      6
      7
      8
      9
      // Make sure to add code blocks to your code group

      # 4. 運行結果

        使用滑鼠在FastWeb功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。

        播放器界面中有眾多功能可供體驗，在指令碼中有相關指令碼可體現。

      全景汽車內飾-視覺化控制元件(WEB)
      儀表展示(WEB)

      ← 儀表展示(WEB)→

      Copyright © 2021-2024 愛招飛IsoFace | ALL Rights Reserved