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;
}

//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;

// Make sure to add code blocks to your code group

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

//JScript
  UGMM.LC(Self);
  ViewInit();

//PasScript
procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
  UGMM.LC(Self);
end;

Begin
  ViewInit;  
End.

// Make sure to add code blocks to your code group

4. 运行结果

  使用鼠标在FastWeb菜单，点击[保存至数据库]按钮，将其保存至数据库，点击[调试运行]确认能够正常打开。

  播放器界面中有众多功能可供体验，在脚本中有相关脚本可体现。