Super player Adapter

Last updated: 2021-11-10 10:30:52

    This document describes the Tencent Cloud RT-Cube Superplayer Adapter for web, which helps you quickly integrate third-party players with VOD capabilities through flexible APIs to implement video playback. It supports the acquisition of basic video information, video stream information, and keyframe and thumbnail information as well as proprietary encryption. This document is intended for developers with a basic knowledge of JavaScript.

    Integrating SDK

    Superplayer Adapter can be integrated in the following two ways:

    1. Integration through CDN

    Import the initialization script to the page where videos need to be played back. The script will expose TcAdapter variables globally.

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

    2. Integration through npm

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

    Placing Player Container

    Add the container to the page where the player needs to be displayed. TcAdapter only needs to carry the container for video playback. The playback styles and custom features can be implemented by third-party players or yourself.

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

    Using SDK

    Checking whether the current environment supports TcAdapter

    TcAdapter.isSupported();
    

    Initializing Adapter and creating Adapter instance

    Description

    This API is used to initialize Adapter. The initialization process will request the video file information from the Tencent Cloud VOD server.

    API

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

    Parameter description

    Parameter Type Description
    appID String appID of the VOD account
    fileID String fileId of the video to be played back
    psign String Superplayer signature
    hlsConfig HlsConfig HLS settings. Any parameters supported by HLS.js can be used
    callback TcAdapterCallBack Callback for initialization completion. Basic video information can be obtained after this method is used
    Note:

    The underlying layer of TcAdapter is implemented based on HLS.js, and it can receive any parameters supported by HLS.js through HlsConfig for fine-tuning playback.

    Getting basic video information

    Description

    This API is used to get the video information and will take effect only after initialization.

    API

    VideoBasicInfo adapter.getVideoBasicInfo();
    

    Parameter description

    The parameters of VideoBasicInfo are as follows:

    Parameter Type Description
    name String Video name
    duration Float Video duration in seconds
    description String Video description
    coverUrl String Video cover

    Getting video stream information

    Description

    API

    List<StreamingOutput> adapter.getStreamimgOutputList();
    

    Parameter description

    StreamingOutput

    Parameter Type Description
    drmType String Adaptive bitstream protection type. Valid values: plain (no encryption), simpleAES (HLS common encryption)
    playUrl String Playback URL
    subStreams List Adaptive bitstream substream information of the SubStreamInfo type

    SubStreamInfo

    Parameter Type Description
    type String Substream type. Valid values: video
    width Int Substream video width in px
    height Int Substream video height in px
    resolutionName String Specification name of the substream video displayed in the player

    Getting keyframe timestamp information

    Description

    API

    List<KeyFrameDescInfo> adapter.getKeyFrameDescInfo();
    

    Parameter description

    KeyFrameDescInfo

    Parameter Type Description
    timeOffset Float 1.1
    content String "Beginning now..."

    Getting thumbnail information

    Description

    API

    ImageSpriteInfo adapter.getImageSpriteInfo();
    

    Parameter description

    ImageSpriteInfo

    Parameter Type Description
    imageUrls List Array of thumbnail download URLs of String type
    webVttUrl String Thumbnail VTT file download URL

    Listening on event

    Description: the player can perform event listening through the objects returned by the initialization, for example:

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

    Here, type is the event type. Supported events include HLS' native events and the following events. Event names can be accessed from TcAdapter.TcAdapterEvents:

    Name Description
    LOADEDMETADATA The corresponding video information was obtained through playcgi. Relevant video information can be obtained through this event callback
    HLSREADY An HLS instance was created. At this point, you can call the various attributes and methods of the HLS instance object
    ERROR This event will be triggered when an error occurs. You can view the specific failure cause according to the callback parameters

    Getting HLS instance

    Description: the underlying layer of Adapter is implemented based on HLS.js. You can access an HLS instance and its attributes and methods through an Adapter instance to achieve fine control over the playback process.

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

    Please see hls.js.

    Note

    Please see more samples.

    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;