超级播放器 Adapter

最后更新时间:2021-09-01 10:06:57

    本文档是介绍腾讯云视立方 Web 超级播放器 Adapter,它可以帮助腾讯云客户通过灵活的接口,快速实现第三方播放器与云点播能力的结合,实现视频播放功能。超级播放器 Adapter 支持获取视频基本信息、视频流信息、关键帧与缩略图信息等,支持私有加密,本文档适合有一定 Javascript 语言基础的开发人员阅读。

    集成SDK

    超级播放器 Adapter 提供以下两种集成方式:

    1. cdn 集成

    在需要播放视频的页面中引入初始化脚本,脚本会在全局下暴露 TcAdapter 变量。

    <script src="https://cloudcache.tencentcs.com/qcloud/video/dist/tcadapter.1.0.0.min.js"></script>
    

    2. npm 集成

    // npm install
    npm install --save tcadapter
    // import TcAdapter
    import TcAdapter from 'tcadapter';
    

    放置播放器容器

    在需要展示播放器的页面加入容器,TcAdapter 仅需要承载播放视频的容器,播放样式和自定义功能可由第三方播放器或使用者自行实现

    <video id="player-container-id">
    </video>
    

    使用 SDK

    检测当前环境是否支持TcAdapter

    TcAdapter.isSupported();
    

    初始化Adapter,创建Adapter实例

    说明

    初始化 Adapter,初始化过程会请求腾讯云点播服务器,获取视频文件信息。

    接口

    const adapter = new TcAdapter('player-container-id', {
    fileID: string,
    appID: string,
    psign: string,
    hlsConfig: {}
    }, callback);
    

    参数说明

    参数名 类型 描述
    appID String 点播账号的 appID
    fileID String 要播放的视频fileId
    psign String 超级播放器签名
    hlsConfig HlsConfig hls相关设置,可使用hls.js支持的任意参数
    callback TcAdapterCallBack 初始化完成回调,可以在此方法之后获取视频基本信息
    说明:

    TcAdapter 底层基于 hls.js 实现,可以通过 HlsConfig 接收 hls.js 支持的任意参数,用于对播放行为的精细调整。

    获取视频的基本信息

    说明

    获取视频信息, 必须是在初始化之后才生效。

    接口

    VideoBasicInfo adapter.getVideoBasicInfo();
    

    参数说明

    VideoBasicInfo:参数如下

    参数名 类型 描述
    name String 视频名称。
    duration Float 视频时长,单位:秒。
    description String 视频描述。
    coverUrl String 视频封面。

    获取视频流信息

    说明

    接口

    List<StreamingOutput> adapter.getStreamimgOutputList();
    

    参数说明

    StreamingOutput

    参数名 类型 描述
    drmType String 自适应码流保护类型,目前取值有 plain 和 simpleAES。plain 表示不加密,simpleAES 表示 HLS 普通加密。
    playUrl String 播放 URL。
    subStreams List 自适应码流子流信息,类型为 SubStreamInfo。

    SubStreamInfo

    参数名 类型 描述
    type String 子流的类型,目前可能的取值仅有 video。
    width Int 子流视频的宽,单位:px。
    height Int 子流视频的高,单位:px。
    resolutionName String 子流视频在播放器中展示的规格名。

    获取关键帧打点信息

    说明

    接口

    List<KeyFrameDescInfo> adapter.getKeyFrameDescInfo();
    

    参数说明

    KeyFrameDescInfo

    参数名 类型 描述
    timeOffset Float 1.1
    content String "片头开始..."

    获取缩略图信息

    说明

    接口

    ImageSpriteInfo adapter.getImageSpriteInfo();
    

    参数说明

    ImageSpriteInfo

    参数名 类型 描述
    imageUrls List 缩略图下载 URL 数组,类型为 String 。
    webVttUrl String 缩略图 VTT 文件下载 URL 。

    监听事件

    说明:播放器可以通过初始化返回的对象进行事件监听,示例:

    const adapter = TcAdapter('player-container-id', options);
    adapter.on(TcAdapter.TcAdapterEvents.Error, function(error) {
    // do something
    });
    

    其中 type 为事件类型,支持的事件包括hls原生的事件以及以下事件,可从 TcAdapter.TcAdapterEvents 中访问到事件名称:

    名称 介绍
    LOADEDMETADATA 通过 playcgi 获取到了相应的视频信息,在此事件回调中可以获取视频相关信息
    HLSREADY hls实例创建完成,可以在此时机调用 hls 实例对象上的各种属性和方法
    ERROR 出现错误时触发,可从回调参数中查看失败具体原因

    获取 Hls 实例

    说明:adapter 底层基于 hls.js 实现,可以通过 adapter 实例访问到 hls 实例以及实例上的属性和方法,用于实现对播放流程的精细控制。

    adapter.on('hlsready', () => {
    const hls = adapter.hls;
    // ...
    })
    
    说明:

    参见 hls.js 链接。

    说明

    参阅更多 示例

    import { useEffect, useRef } from 'react';
    import TcAdapter from 'tcadapter';

    function App() {
    if (!TcAdapter.isSupported()) {
    throw new Error('current environment can not support TcAdapter');
    }

    const videoRef = useRef(null);
    useEffect(() =&gt; {
    const adapter = new TcAdapter(videoRef.current, {
    appID: '1500002611',
    fileID: '5285890813738446783',
    psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwMjYxMSwiZmlsZUlkIjoiNTI4NTg5MDgxMzczODQ0Njc4MyIsImN1cnJlbnRUaW1lU3RhbXAiOjE2MTU5NTEyMzksImV4cGlyZVRpbWVTdGFtcCI6MjIxNTY1MzYyMywicGNmZyI6ImJhc2ljRHJtUHJlc2V0IiwidXJsQWNjZXNzSW5mbyI6eyJ0IjoiMjIxNTY1MzYyMyJ9fQ.hRrQYvC0UYtcO-ozB35k7LZI6E3ruvow7DC0XzzdYKE',
    hlsConfig: {},
    }, () =&gt; {
    console.log('basicInfo', adapter.getVideoBasicInfo());
    });

    adapter.on(TcAdapter.TcAdapterEvents.HLSREADY, () =&gt; {
    const hls = adapter.hls;
    // ...
    })
    }, []);


    const play = () =&gt; {
    videoRef.current.play();
    }

    return (
    <div>
    <div>
    <video id="player" ref="{" videoref="" }=""></video>
    </div>
    <button onclick="{play}">play</button>
    </div>
    );
    }

    export default App;