<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
        <title>太初天成视频点播超级播放器</title>
        <!-- 引入播放器 css 文件 -->
        <link href="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">
        <!-- 如需在IE8、9浏览器中初始化播放器，浏览器需支持Flash并在页面中引入 -->
        <!--[if lt IE 9]>
        <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/ie8/videojs-ie8.js"></script>
        <![endif]-->
        <!-- 如果需要在 Chrome Firefox 等现代浏览器中通过H5播放hls，需要引入 hls.js -->
        <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.12.4.js"></script>
        <!-- 引入播放器 js 文件 -->
        <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.min.js"></script>
        <!-- 自适应 CSS 样式  -->
<style>
    html,body{
      margin: 0;
      padding: 0;
    }
    /* 通过 css 设置播放器尺寸 这时<video>中的宽高属性将被覆盖*/
    #player-container-id {
      width: 100%;
      max-width: 100%;
      height: 0;
      padding-top: 56.25%; /* 计算方式：播放器以16：9的比率显示，这里的值为 9/16 * 100 = 56.25  */
    }
    /* 外部容器也需要是自适应的*/
    #wrap {
      width: 80%;
      margin: 0 auto;
    }
    /* 设置logo在高分屏的显示样式 */
    @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
      .tcp-logo-img {
        width: 50%;
      }
    }
  </style>
    </head>
    <body>
        <!-- 设置播放器容器 -->
        <video id="player-container-id" preload="auto" width="600" height="400" playsinline webkit-playsinline x5-playsinline></video>
        <!--
        注意事项：
        * 播放器容器必须为 video 标签
        * player-container-id 为播放器容器的ID，可自行设置
        * 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
        * playsinline webkit-playsinline x5-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
        -->
        <script>
            var player = TCPlayer("player-container-id", { /**player-container-id 为播放器容器ID，必须与html中一致*/
                fileID: "5285890811281465959", /**请传入需要播放的视频fileID 必须 */
                appID: "1255759612", /**请传入点播账号的子应用appID 必须 */
                psign: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTI1NTc1OTYxMiwiZmlsZUlkIjoiNTI4NTg5MDgxMTI4MTQ2NTk1OSIsImN1cnJlbnRUaW1lU3RhbXAiOjE2MDg1OTE1NDYsImV4cGlyZVRpbWVTdGFtcCI6MTYwODY3Nzk0NSwicGNmZyI6Ilppc2hpeWluZyIsInVybEFjY2Vzc0luZm8iOnsidCI6IjE2MDg2Nzc5NDUifX0.wR0XkcXlOsgux_xOYhNyTROlmQTn62KOeDLONKYbecs"
                /**其他参数请在开发文档中查看 */
                });
        </script>
    </body>
</html>