tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Video on Demand
    Documentation
    Download PDF

    Web Integration

    Last updated: 2023-10-07 15:35:17
    Download PDF
      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.

      Contact Us
      Technical Support

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

      Submit a Ticket
      7x24 Phone Support
      Copyright © 2013-2023 Tencent Cloud. All Rights Reserved.
      Privacy PolicyLegalCookie Policy