tencent cloud

Feedback

Web Integration

Last updated: 2023-10-07 15:34:21
    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 Protocol
    Scenario
    URL Format
    PC Browser
    Mobile 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
    -
    -
    -
    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.9.0/tcplayer.min.css" rel="stylesheet"/>
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.9.0/tcplayer.v4.9.0.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.
    URL playback (VOD and live)
    File ID playback (VOD)
    After page initialization, call the method in the player instance to pass in the URL to the method.
    var player = TCPlayer('player-container-id', {
    sources: [{
    src: 'path/to/video',
    }],
    language: 'en',
    }); // player-container-id is the player container ID, which must be the same as that in HTML
    
    // player.src(url); // Play URL
    
    
    Add the following initialization script to the index.html page initialization code and pass in the fileID (which can be viewed in Media Assets) and appID (which can be viewed in Account Information > Basic Information).
    var player = TCPlayer('player-container-id', { // player-container-id is the player container ID, which must be the same as that in HTML
    fileID: '3701925921299637010', // Pass in the file ID of the video to be played, which is required
    appID: '1500005696' // Pass in the appID of your VOD account, which is required
    psign:'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNTY5NiwiZmlsZUlkIjoiMzcwMTkyNTkyMTI5OTYzNzAxMCIsImN1cnJlbnRUaW1lU3RhbXAiOjE2MjY4NjAxNzYsImV4cGlyZVRpbWVTdGFtcCI6MjYyNjg1OTE3OSwicGNmZyI6InByaXZhdGUiLCJ1cmxBY2Nlc3NJbmZvIjp7InQiOiI5YzkyYjBhYiJ9LCJkcm1MaWNlbnNlSW5mbyI6eyJleHBpcmVUaW1lU3RhbXAiOjI2MjY4NTkxNzksInN0cmljdE1vZGUiOjJ9fQ.Bo5K5ThInc4n8AlzIZQ-CP9a49M2mEr9-zQLH9ocQgI',
    language: 'en',
    // For more information on the signature and how to generate it, see https://www.tencentcloud.com/document/product/266/38099
    });
    
    
    Note
    Not all videos can be played successfully in a browser. We recommend you use Tencent Cloud’s services to transcode a video before playing it
    

    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