tencent cloud

文档反馈

阶段5:播放长视频方案(旧)

最后更新时间:2022-11-23 11:55:07

    本文针对音视频平台常见的长视频播放场景,推出播放器播放长视频教程。用户将掌握如何在 Web 端、iOS 端、Android 端播放器上播放视频,同时自动切换自适应码流、预览视频缩略图、添加视频打点信息。

    学习目标

    学习本阶段教程,您将掌握:

    • 如何在云点播转出自适应码流(播放器能够根据当前带宽,动态选择最合适的码率播放)
    • 如何在云点播设置视频打点信息
    • 如何在云点播使用雪碧图做缩略图
    • 如何使用播放器进行播放

    阅读之前,请先确保已经学习播放器指引的 阶段1:用播放器播放视频 篇部分,了解云点播 fileid 的概念。

    操作步骤

    步骤1:转出自适应码流与雪碧图

    本步骤,我们将指导您如何对视频转出自适应码流与雪碧图。

    1. 登录 云点播控制台,选择视频处理设置>模板设置>转自适应码流模板,单击创建转自适应码流模板

      通过模板创建用户需要的自适应码流,本文创建一条名为 testAdaptive 的自适应码流模板,总共包含三条子流,分辨率分别为480p,720p和1080p。视频码率、视频帧率、音频码率则保持与原视频一致。
    2. 选择视频处理设置>模板设置>截图模板,单击创建截图模板

      通过模板创建用户需要的雪碧图,本文创建一个名为 testSprite 的雪碧图模板,采样间隔为5%,小图行数:10,小图列数:10。
    3. 通过任务流,添加自适应码流模板与雪碧图模板。
      选择视频处理设置>任务流设置>创建任务流,单击创建任务流

      通过任务流,添加用户需要处理的任务,本文为展示播放自适应码流过程,创建了一条 testPlayVideo 的任务流,该任务流仅增加了自适应码流模板和雪碧图模板。
    4. 选择媒资管理>音视频管理,勾选需要处理的视频,单击视频处理>任务流,选择任务流模板,发起任务。
    5. 至此,我们可以在音视频管理>操作>管理中,能够获取处理后的任务结果。

    步骤2:增加视频打点信息

    本步骤,我们将指导您新增的一组视频打点信息。

    1. 进入云点播服务端 API 文档>媒资管理相关接口>修改媒体文件属性,单击调试,进入云 API 控制台进行调试。
    2. 通过参数名称 AddKeyFrameDescs.N 添加指定视频打点信息

      至此您已经完成了在云端上的操作,此时您在云点播已经转出自适应码流,视频雪碧图和添加了相关视频打点信息。

    步骤3:播放器端集成

    本步骤,我们将指导您在 Web 端、iOS 端、Android 端播放器播放自适应码流、添加缩略图与打点信息。

    用户需要集成视立方播放器请参见 集成指引,引入播放器 SDK 文件之后,可以媒资管理提取上传媒资的 appId 和 fileId 进行播放。

    播放器的构建方法为TCPlayer, 通过其创建播放器实例即可播放。

    1. 在 html 文件放置播放器容器

    在需要展示播放器的页面位置加入播放器容器。例如,在 index.html 中加入如下代码(容器 ID 以及宽高都可以自定义)。

    <video id="player-container-id" width="414" height="270" preload="auto" playsinline webkit-playsinline>
    </video>
    

    2. 使用 fileID 播放

    在 index.html 页面初始化的代码中加入以下初始化脚本,传入获取到的 fileID 与 appID 即可播放。

    var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器 ID,必须与 html 中一致
      fileID: '5285890799710670616', // 请传入需要播放的视频 fileID(必须)
      appID: '1400329073' // 请传入点播账号的 appID(必须)
    });
    

    总结

    至此,您就可以在播放器查看雪碧图预览、视频打点信息和自动切换动态自适应码流。更多功能请参见 功能说明

    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持