tcadapter

TcAdapter 使用文档说明

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

1. 集成SDK

TcAdapter 提供以下两种集成方式：

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

2. 放置播放器容器

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

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

3. 使用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('error', function(error) {
  // do something
});

其中 type 为事件类型，支持的事件包括hls原生的事件以及以下事件：

名称	介绍
loadedmetadata	通过 playcgi 获取到了相应的视频信息，在此事件回调中可以获取视频相关信息
hlsready	hls实例创建完成，可以在此时机调用 hls 实例对象上的各种属性和方法

获取 Hls 实例

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

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

参考链接：https://github.com/video-dev/hls.js/

例：在 React 中使用 TcAdapter

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(() => {
    const adapter = new TcAdapter(videoRef.current, {
      // encrypted
      appID: '1500002611',
      fileID: '5285890813738446783',
      psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwMjYxMSwiZmlsZUlkIjoiNTI4NTg5MDgxMzczODQ0Njc4MyIsImN1cnJlbnRUaW1lU3RhbXAiOjE2MTU5NTEyMzksImV4cGlyZVRpbWVTdGFtcCI6MjIxNTY1MzYyMywicGNmZyI6ImJhc2ljRHJtUHJlc2V0IiwidXJsQWNjZXNzSW5mbyI6eyJ0IjoiMjIxNTY1MzYyMyJ9fQ.hRrQYvC0UYtcO-ozB35k7LZI6E3ruvow7DC0XzzdYKE',

      // unencrypted
      // fileID: "5285890815601918477",
      // appID: "1500002611",
      // psign: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwMjYxMSwiZmlsZUlkIjoiNTI4NTg5MDgxNTYwMTkxODQ3NyIsImN1cnJlbnRUaW1lU3RhbXAiOjE2MTU5NTE3MDYsImV4cGlyZVRpbWVTdGFtcCI6MjIxNTY1Mzk3OCwicGNmZyI6ImRlZmF1bHQiLCJ1cmxBY2Nlc3NJbmZvIjp7InQiOiIyMjE1NjUzOTc4In19.6u05eXa6bJ4GLCIdlZfeMw_LUDf1AYP8FXRhoxLQBTY",
      hlsConfig: {},
    }, () => {
      console.log('basicInfo', adapter.getVideoBasicInfo());
    });

    adapter.on('hlsready', () => {
      const hls = adapter.hls;
			// ...
    })
  }, []);
  

  const play = () => {
    videoRef.current.play();
  }

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

export default App;