服务端 API 文档

文档中心 > 云点播 > 最佳实践 > 超级播放器教程 > 阶段3:自定义播放内容与样式

阶段3:自定义播放内容与样式

最近更新时间:2020-07-15 10:49:16

学习目标

学习本阶段教程,您将了解如何定制超级播放器播放的视频内容与样式,包括:

  • 播放子流规格中最小分辨率为480p,最大分辨率1080p。
  • 使用视频中间部分的截图作为视频封面。
  • 进度条上的缩略图预览,调整为20%的间隔。

阅读之前,请先确保已经学习超级播放器指引的 阶段1:用超级播放器播放视频阶段2:开启防盗链后的视频播放 篇部分,本教程使用了 阶段1 篇开通的账号以及上传的视频,并需要按照 阶段2 开启防盗链。

步骤1:创建自适应码流模板

  1. 登录云点播控制台,选择【视频处理设置】>【模板设置】,单击“转自适应码流模板”页签下的【创建自适应码流模板】。

  2. 进入“模板设置”页面后,单击【添加子流】,新建子流1、子流2和子流3,填写参数如下:

    • 基本信息模块
      • 【模板名称】:填写 MyTestTemplate。
      • 【加密类型】:选择【不加密】。
      • 【是否允许低分辨率转高分辨率】:不开启。
    • 子流信息模块
      子流编号 视频码率 分辨率 帧率 音频码率 声道
      子流1 512kbps 视频长边0px,视频短边480px 24fps 48kbps 双声道
      子流2 512kbps 视频长边0px,视频短边720px 24fps 48kbps 双声道
      子流3 1024kbps 视频长边0px,视频短边1080px 24fps 48kbps 双声道
  3. 单击【创建】,则生成了一个包含3个子流的自适应码流模板,模板 ID 为125866。

步骤2:创建雪碧图模板

  1. 登录云点播控制台,选择【视频处理设置】>【模板设置】,单击“截图模板”页签下的【创建截图模板】。
  2. 进入“模板设置”页面后,填写模板参数:
    • 【模板名称】:填写 MyTestTemplate。
    • 【模板类型】:选择【雪碧图截图】。
    • 【图片尺寸】:726px × 240px。
    • 【采样间隔】:20%。
    • 【小图行数】:10。
    • 【小图列数】:10。
  3. 单击【创建】,则生成了一个模板 ID 为41377的雪碧图模板。

步骤3:创建任务流并发起处理

创建新的转自适应码流模板(ID 为125866)和雪碧图模板(ID 为41377)后,还需要创建一个新的任务流。

  1. 登录云点播控制台,选择【视频处理设置】>【任务流设置】,单击【创建任务流】:
    • 【任务流名称】:填写 MyTestProcedure。
    • 【任务类型配置】:勾选【自适应码流】、【截图】和【截取封面】:
      • 在【自适应码流任务配置】选项卡,单击【添加自适应码流模板】,在“自适应码流模版/ID”栏选择步骤1创建的自定义转自适应码流模板 MyTestTemplate(126866)。
      • 在【截图任务配置】选项卡,单击【添加截图模板】,“截图方式”栏选择【雪碧图】,“截图模板”栏选择步骤2创建的自定义雪碧图模板 MyTestTemplate(41377)。
      • 在【截取封面图任务配置】选项卡,单击【添加截图模板】,“截图模板”栏选择【TimepointScreenshot】,“时间点选取”栏选择【百分比】,填写50%。
  2. 单击【提交】,生成了一个名为 MyTestProcedure 的任务流。
  3. 在控制台选择【媒资管理】>【视频管理】,勾选要处理的视频(FileId 为528xxx3757278095),单击【视频处理】。
  4. 在视频处理弹框:
    • 【处理类型】选择【任务流】。
    • 【任务流模板】选择【MyTestProcedure】。
  5. 单击【确定】,等待视频状态从“处理中”变为“正常”,表示视频已处理完毕。
  6. 单击视频“操作”栏中的【管理】,进入管理页面:
    • 在【基本信息】栏,可以看到生成的封面,以及自适应码流输出(模板 ID 为125866)。
    • 在【截图信息】栏,可以看到生成的雪碧图(模板 ID 为41377)。

步骤4:创建超级播放器配置

为了播放自定义的自适应码流和雪碧图,您需要使用自定义播放器配置。

  1. 登录云点播控制台,选择【分发播放配置】>【超级播放器配置】,单击【新建】。
  2. 在超级播放器配置页面中,分别单击【添加自适应码流模板】和【添加雪碧图模板】,然后填写以下参数:
    • 【模板名称】:填写 MyTestCfg。
    • 【用于播放的自适应码流】选项卡的“自适应码流模板/ID”栏选择:MyTestTemplate(125866)。
    • 【用于播放的雪碧图】选项卡的“截图模板”栏选择:MyTestTemplate(41377)。
  3. 单击【确定】,则生成新的超级播放器配置 MyTestCfg。

步骤5:预览播放体验

经过之前的步骤,您已经对视频进行了处理。现在将使用三端的超级播放器,快速体验播放效果。

  1. 选择【视频管理】的“已上传”页签,找到之前步骤上传和处理过的视频,单击“操作”栏中的【管理】,选择“超级播放器预览”页签。
  2. 【播放配置】选择 MyTestCfg。
  3. 因为默认分发域名开启了防盗链,【播放控制】选项卡支持预览时选定防盗链的过期时间、试看时长等。此处可维持默认参数(播放防盗链过期时间默认1天,试看时长和最多可播放 IP 个数不填写)。
  4. 在【Web 播放器】中,单击播放器中间的按钮,即可在 Web 端播放体验。
  5. 在【移动端播放器】中,点击【扫码下载】,安装“腾讯云工具包”。
  6. 手机打开腾讯云工具包,选择【播放器】>【超级播放器】,然后点击右上角扫码,即可在移动端播放体验。

步骤6:使用 Demo 验证

开启防盗链后,超级播放器必须使用有效期内的签名,才能播放视频。下面将介绍如何使用签名工具快速生成签名。

  1. 打开 超级播放器 - 签名生成工具 页面,并填写参数:
    • 【用户 appId】:填写视频所属的 appId:1400xxx357(如果使用的是子应用,填写子应用的 appId)。
    • 【视频 fileId】:填写视频的 FileId:528xxx3757278095。
    • 【当前 Unix 时间戳】:工具自动生成出了当前的 Unix 时间(1591756516),无需填写。
    • 【超级播放器配置】:填写自定义的超级播放器配置名 MyTestCfg。
    • 【签名过期 Unix 时间戳】:签名本身的过期时间,可以不填写,默认为1天后过期。
    • 【链接过期时间】:Key 防盗链过期时间,可以填6小时后的十六进制 Unix 时间:5ee09b44。
    • 【防盗链 Key】:填写之前获取到的防盗链 Key:2WExxx48eW。
  2. 单击【生成签名】,生成出来的签名显示在“生成签名结果”文本框中。

获取超级播放器签名后,您可以分别使用 WebAndroidiOS 三端的超级播放器 Demo 进行验证,具体请参考 Demo 的源码。

说明:

在控制台的【媒资管理】>【视频管理】>【超级播放器预览】中,可以获取预览视频对应的 Web 播放器源码,供您直接参考使用。

总结

学习本教程后,您已经掌握如何定制超级播放器播放的视频内容与样式。
如果您希望对视频进行加密,并播放加密后的视频,请参考 阶段4:播放加密视频

目录