tencent cloud

Feedback

Integration Guide

Last updated: 2022-11-03 16:56:27

    This document introduces you to the Player SDK for web (TCPlayer), which you can quickly integrate into your web application to enable VOD and live playback. TCPlayer comes with UI elements.

    Overview

    TCPlayer implements playback using the <video> element of HTML5 and Flash Player. It delivers a unified video playback experience across platforms. You can also use it together with Tencent Cloud VOD to enable hotlink protection and playback of encrypted HLS videos.

    Supported protocols

    Audio/Video ProtocolScenarioURL FormatPC BrowserMobile Browser
    MP3 Audio http://xxx.vod.myqcloud.com/xxx.mp3 Supported Supported
    MP4 VOD playback http://xxx.vod.myqcloud.com/xxx.mp4 Supported Supported
    HLS
    (M3U8)
    Live playback http://xxx.liveplay.myqcloud.com/xxx.m3u8 Supported Supported
    VOD playback http://xxx.vod.myqcloud.com/xxx.m3u8 Supported Supported
    FLV Live playback http://xxx.liveplay.myqcloud.com/xxx.flv Supported Partially supported
    VOD playback http://xxx.vod.myqcloud.com/xxx.flv Supported Partially supported
    WebRTC Live playback webrtc://xxx.liveplay.myqcloud.com/live/xxx Supported Supported
    Note
    • Only H.264 encoding is supported.
    • The player is compatible with mainstream browsers and can automatically select the optimal playback scheme depending on the browser.
    • In some browser environments, HLS and FLV video playback depends on Media Source Extensions.
    • If a browser does not support WebRTC, a WebRTC URL passed in will be converted automatically to better support playback.

    Supported Features

    Feature\Browser Chrome Firefox Edge QQ Browser Safari for macOS Safari for iOS WeChat Chrome for Android Internet Explorer 11
    Player dimension configuration
    Resuming playback
    Playback speed change
    Preview thumbnails - - - -
    Changing `fileID` for playback
    Flipping videos
    Progress bar marking - - -
    HLS adaptive bitrate
    Referer hotlink protection -
    Definition change notifications - - -
    Preview
    Playing HLS videos encrypted using standard schemes
    Playing HLS videos encrypted using private protocols - - -
    • Android: ✓

    • iOS: -
    Video statistics - - - - -
    Video data monitoring - - - - -
    Custom UI messages
    Custom UI
    On-screen comments
    Watermark
    Playlist
    Frame sync under poor network conditions
    Note
    • Only H.264 encoding is supported.
    • Chrome and Firefox for Windows and macOS are supported.
    • Chrome, Firefox, Edge, and QQ Browser need to load hls.js in order to play HLS files.
    • The referer hotlink protection feature is implemented based on the Referer field in the HTTP request header. HTTP requests initiated by some Android browsers do not carry the Referer field.

    The player is compatible with mainstream browsers and can automatically select the optimal playback scheme depending on the browser used. For example, for modern browsers such as Chrome, the player uses the HTML5 technology for playback, and for mobile browsers, it uses the HTML5 technology or the browser’s built-in capabilities.

    Integration Guide

    You can add a video player to your webpage in the following steps:

    Step 1. Import files into the page

    Create the index.html file in your project and import the player style file and script file to the HTML page:

    <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/tcplayer.min.css" rel="stylesheet"/>
    <!--If you want to play back WebRTC videos through HTML5 in a modern browser such as Chrome and Firefox, you need to import `TXLivePlayer-x.x.x.min.js` before importing `tcplayer.vx.x.x.min.js`.-->
    <!--Some browser environments don't support WebRTC. In such cases, the player will automatically convert a WebRTC URL to an HLS URL. Therefore, you also need to import `hls.min.x.xx.xm.js` in WebRTC live streaming scenarios.-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/TXLivePlayer-1.2.3.min.js"></script>
    <!--If you want to play back HLS videos through HTML5 in a browser such as Chrome and Firefox, you need to import `hls.min.x.xx.xm.js` before importing `tcplayer.vx.x.x.min.js`.-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/hls.min.1.1.5.js"></script>
    <!--If you want to play back FLV videos through HTML5 in a modern browser such as Chrome and Firefox, you need to import `flv.min.x.x.x.js` before importing `tcplayer.vx.x.x.min.js`.-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/flv.min.1.6.3.js"></script>
     <!--If you want to play back DASH videos through HTML5 in a modern browser such as Chrome and Firefox, you need to import `dash.min.x.x.x.js` before importing `tcplayer.vx.x.x.min.js`.-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/dash.all.min.4.4.1.js"></script>
    <!--Player script file-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/tcplayer.v4.5.4.min.js"></script>
    

    We recommend you deploy the resources on your own when using the Player SDK. You can download the player resources here.
    To avoid reference errors, do not rearrange the directories in the folder after decompression.
    Suppose the address of your deployment is aaa.xxx.ccc. Follow the steps below to import the style and script files:

    <link href="aaa.xxx.ccc/tcplayer.min.css" rel="stylesheet"/>
    <!--If you want to play back HLS videos through HTML5 in a browser such as Chrome and Firefox, you need to import `hls.min.x.xx.m.js` before importing `tcplayer.vx.x.x.min.js`.-->
    <script src="aaa.xxx.ccc/libs/hls.min.x.xx.m.js"></script>
    <!--Player script file-->
    <script src="aaa.xxx.ccc/tcplayer.vx.x.x.min.js"></script>
    

    Step 2. Place the player container

    Place the player container in the desired place on the page. For example, add the following code to index.html (the container ID, width, and height can be customized).

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

    • The player container must be a <video> element.
    • In the example, player-container-id is the ID of the player container. You can set your own container ID.
    • We recommend you use CSS to size the player, which allows greater flexibility than attribute settings and can achieve effects such as full screen and container adaption.
    • The preload attribute in the sample specifies whether to load the video after the page is loaded, which is usually set to auto for faster start of the playback. Other options include meta (only loads the metadata after the page is loaded) and none (does not load the video after the page is loaded). Due to system restrictions, videos will not be automatically loaded on mobile devices.
    • The playsinline and webkit-playsinline attributes are used to implement inline playback in a standard mobile browser without the browser hijacking the playback. You can use these two attributes based on your actual conditions.
    • If x5-playsinline is set, the X5 UI player will be used in the TBS kernel.

    Step 3. Initialize the player

    After page initialization, the video resources can be played back. The player supports both VOD playback and live playback.

    • VOD playback: The player can play back a VOD media resource through FileID. For the specific process, see Stage 1. Play back a video with Player.
    • Live playback: The player can pull a live audio/video stream for playback through the URL passed in. For more information on how to generate a Tencent Cloud live streaming URL, see Splicing Live Streaming URLs.

    After page initialization, call the method in the player instance to pass in the URL to the method.

    var player = TCPlayer('player-container-id', {}); // player-container-id is the player container ID, which must be the same as that in HTML
    player.src(url); // Playback URL

    Step 4. Implement more features

    You can use VOD’s capabilities to implement more features in the player, such as adaptive bitrate, preview thumbnails, and timestamping. For detailed directions, see Stage 5. Play back a long video.

    For a full list of the player’s features, see TCPlayer Demo.

    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support