npm - tcplayer.js - Versions diffs - 4.7.0 → 4.7.2 - Mend

tcplayer.js 4.7.0 → 4.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (81) hide show

package/dist/console/vod-player-v3.html +125 -0
package/dist/console/vod-player.html +124 -0
package/dist/examples/vod/7447398155146701990.jpg +0 -0
package/dist/examples/vod/7447398155146701990.vtt +301 -0
package/dist/examples/vod/tcplayer-av1.html +123 -0
package/dist/examples/vod/tcplayer-vod-all.html +166 -0
package/dist/examples/vod/tcplayer-vod-all1.html +86 -0
package/dist/examples/vod/tcplayer-vod-audio-tracks.html +66 -0
package/dist/examples/vod/tcplayer-vod-base-flash.html +64 -0
package/dist/examples/vod/tcplayer-vod-base-native-control.html +68 -0
package/dist/examples/vod/tcplayer-vod-base-v4-dash.html +84 -0
package/dist/examples/vod/tcplayer-vod-base-v4-quality-api.html +90 -0
package/dist/examples/vod/tcplayer-vod-base-v4.html +78 -0
package/dist/examples/vod/tcplayer-vod-base.html +76 -0
package/dist/examples/vod/tcplayer-vod-change-file-statistic.html +79 -0
package/dist/examples/vod/tcplayer-vod-change-file.html +76 -0
package/dist/examples/vod/tcplayer-vod-continue-play-by-fileid.html +70 -0
package/dist/examples/vod/tcplayer-vod-continue-play-by-url.html +72 -0
package/dist/examples/vod/tcplayer-vod-costom-host.html +66 -0
package/dist/examples/vod/tcplayer-vod-custom-enter-full-viewport.html +88 -0
package/dist/examples/vod/tcplayer-vod-custom-ui.html +98 -0
package/dist/examples/vod/tcplayer-vod-definition.html +71 -0
package/dist/examples/vod/tcplayer-vod-drm-fairplay.html +165 -0
package/dist/examples/vod/tcplayer-vod-drm-token-auto.html +101 -0
package/dist/examples/vod/tcplayer-vod-drm-token.html +156 -0
package/dist/examples/vod/tcplayer-vod-drm-widevine.html +165 -0
package/dist/examples/vod/tcplayer-vod-drm.html +164 -0
package/dist/examples/vod/tcplayer-vod-dynamic-watermark.html +86 -0
package/dist/examples/vod/tcplayer-vod-enter-full-viewport.html +87 -0
package/dist/examples/vod/tcplayer-vod-event.html +93 -0
package/dist/examples/vod/tcplayer-vod-ghost-watermark.html +48 -0
package/dist/examples/vod/tcplayer-vod-hls-decrypt-key-tool.html +215 -0
package/dist/examples/vod/tcplayer-vod-hls-decrypt-key.html +76 -0
package/dist/examples/vod/tcplayer-vod-hls-encrypt-private.html +97 -0
package/dist/examples/vod/tcplayer-vod-hls-encrypt.html +61 -0
package/dist/examples/vod/tcplayer-vod-hls-masterplaylist.html +65 -0
package/dist/examples/vod/tcplayer-vod-hls-token.html +67 -0
package/dist/examples/vod/tcplayer-vod-image-patch.html +66 -0
package/dist/examples/vod/tcplayer-vod-key.html +87 -0
package/dist/examples/vod/tcplayer-vod-level-switch-tips.html +85 -0
package/dist/examples/vod/tcplayer-vod-logo.html +72 -0
package/dist/examples/vod/tcplayer-vod-mirror.html +66 -0
package/dist/examples/vod/tcplayer-vod-mutil.html +68 -0
package/dist/examples/vod/tcplayer-vod-no-control.html +62 -0
package/dist/examples/vod/tcplayer-vod-no-progress.html +64 -0
package/dist/examples/vod/tcplayer-vod-playlist.html +76 -0
package/dist/examples/vod/tcplayer-vod-preload.html +74 -0
package/dist/examples/vod/tcplayer-vod-progress-marker.html +64 -0
package/dist/examples/vod/tcplayer-vod-refer.html +84 -0
package/dist/examples/vod/tcplayer-vod-size-adaptive.html +70 -0
package/dist/examples/vod/tcplayer-vod-size-full-viewport.html +68 -0
package/dist/examples/vod/tcplayer-vod-size.html +70 -0
package/dist/examples/vod/tcplayer-vod-vtt-thumbnail-src.html +71 -0
package/dist/examples/vod/tcplayer-vod-vtt-thumbnail.html +65 -0
package/dist/examples/vod/tcplayer-vod-x5-playsinline.html +65 -0
package/dist/examples/vod/tcplayer-vod-x5.html +66 -0
package/dist/examples/vod/typlayer-vod-dynamic-init.html +129 -0
package/dist/examples/webrtc/tcplayer-src-dynamic.html +92 -0
package/dist/examples/webrtc/tcplayer-src-meeting.html +193 -0
package/dist/examples/webrtc/tcplayer-src-webrtc-abr.html +236 -0
package/dist/examples/webrtc/tcplayer-src-webrtc-autoplay.html +124 -0
package/dist/examples/webrtc/tcplayer-src-webrtc-change-src.html +189 -0
package/dist/examples/webrtc/tcplayer-src-webrtc-mutilRes.html +142 -0
package/dist/examples/webrtc/tcplayer-src-webrtc.html +165 -0
package/dist/libs/TXLivePlayer-1.3.0.min.js +1 -0
package/dist/libs/dash.all.min.v3.1.3.js +0 -20
package/dist/libs/hlsp2p.min.1.6.28.js +3 -0
package/dist/libs/qvbp2p_common.min.1.8.29.js +1 -0
package/dist/tcplayer.css +2529 -0
package/dist/tcplayer.min.css +1 -1
package/dist/tcplayer.v4.7.2.min.js +17 -0
package/package.json +2 -2
package/dist/libs/TXLivePlayer-1.2.3.min.js +0 -1
package/dist/libs/dash.all.min.2.9.3.js +0 -32
package/dist/libs/dash.all.min.4.4.1.js +0 -0
package/dist/libs/flv.min.1.5.js +0 -7
package/dist/libs/flv.min.1.6.2.js +0 -10
package/dist/libs/hls.min.0.12.4.js +0 -2
package/dist/libs/hls.min.0.13.2m.js +0 -4
package/dist/libs/hls.min.1.1.5.js +0 -28831
package/dist/tcplayer.v4.7.0.min.js +0 -17

package/dist/examples/webrtc/tcplayer-src-webrtc-autoplay.html ADDED Viewed

@@ -0,0 +1,124 @@
+<!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="https://web.sdk.cloud.tencent.cn/player/tcplayer/release/v4.5.0/tcplayer.min.css" rel="stylesheet">
+  <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.1/vconsole.min.js"></script>
+  <script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
+  <!-- <script src="https://cloudcache.tencent-cloud.com/open/qcloud/live/webrtc/js/TXLivePlayer-1.1.0.min.js"></script> -->
+  <script src="https://wliap-1306264703.cos.ap-nanjing.myqcloud.com/TXLivePlayer-1.2.0.min.js "></script>
+  <!-- 引入播放器 js 文件 -->
+  <script src="https://web.sdk.cloud.tencent.cn/player/tcplayer/release/v4.5.0/tcplayer.v4.5.0.min.js"></script>
+  <!-- 示例 CSS 样式可自行删除 -->
+  <style>
+    html,body{
+      margin: 0;
+      padding: 0;
+    }
+    .tcplayer {
+      margin: 0 auto;
+    }
+    @media screen and (max-width: 640px) {
+      #player-container-id {
+        width: 100%;
+        height: 270px;
+      }
+    }
+    /* 设置logo在高分屏的显示样式 */
+    @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
+      .tcp-logo-img {
+        width: 50%;
+      }
+    }
+    .button-container{
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+<!-- 设置播放器容器 -->
+<video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
+</video>
+<div class="button-container">
+</div>
+<script>
+  if (TCPlayer.browser.IS_ANDROID || TCPlayer.browser.IS_IOS) {
+    const vConsole = new VConsole({ maxLogNumber: 1000 });
+  }
+  var events = [
+    'loadstart',
+    'suspend',
+    'abort',
+    'error',
+    'emptied',
+    'stalled',
+    'loadedmetadata',
+    'loadeddata',
+    'canplay',
+    'canplaythrough',
+    'playing',
+    'waiting',
+    'seeking',
+    'seeked',
+    'ended',
+    'durationchange',
+    'timeupdate',
+    'progress',
+    'play',
+    'pause',
+    'ratechange',
+    'resize',
+    'volumechange'
+  ];
+  var player = TCPlayer('player-container-id',{
+    poster:'https://vodplayerinfo-10005041.file.myqcloud.com/3035579109/vod_paster_pause/paster_pause1469013308.jpg',
+    autoplay: true,
+    sources: [{
+      src: 'webrtc://5664.liveplay.myqcloud.com/live/5664_harchar1?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb'
+    },{
+      src: 'https://5664.liveplay.myqcloud.com/live/5664_harchar1.m3u8?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb'
+    }],
+    controlBar: {
+      // 隐藏进度条
+      // progressControl:false
+    },
+    hlsConfig: {
+      enableRecoverMediaError: true,
+      recoverMediaErrorMaxRetry: 5
+    }
+  });
+  player.on('ready', function() {
+    console.log('player on ready');
+    // 禁止拖拽进度条 与隐藏进度条不能同时配置。
+    // player.controlBar.progressControl.disable();
+  });
+  player.on('webrtcevent', function(event) {
+    console.log('webrtcEvent', event);
+  });
+  events.forEach(function(val, i){
+    player.on(val, function (event) {
+     if(val !='timeupdate'){
+       console.log('player event', val);
+     }
+     if(val === 'waiting'){
+       console.log('卡顿开始，设置标记')
+     }
+     if(val === 'playing'){
+       console.log('开始播放或者标记卡顿结束')
+     }
+    });
+  });
+</script>
+</body>
+</html>

package/dist/examples/webrtc/tcplayer-src-webrtc-change-src.html ADDED Viewed

@@ -0,0 +1,189 @@
+<!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="https://web.sdk.cloud.tencent.cn/player/tcplayer/release/v4.5.3/tcplayer.min.css" rel="stylesheet">
+  <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.1/vconsole.min.js"></script>
+  <script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
+  <!-- <script src="https://cloudcache.tencent-cloud.com/open/qcloud/live/webrtc/js/TXLivePlayer-1.1.0.min.js"></script> -->
+  <script src="https://wliap-1306264703.cos.ap-nanjing.myqcloud.com/TXLivePlayer-1.2.0.min.js "></script>
+  <!-- 引入播放器 js 文件 -->
+  <!-- <script src="./tcplayer.v4.5.3.js"></script> -->
+  <script src="../../../dist/tcplayer.v4.5.3.js"></script>
+  <!-- <script src="https://web.sdk.cloud.tencent.cn/player/tcplayer/release/v4.5.3/tcplayer.v4.5.3.min.js"></script> -->
+  <!-- 示例 CSS 样式可自行删除 -->
+  <style>
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+    }
+    .tcplayer {
+      margin: 0 auto;
+    }
+    @media screen and (max-width: 640px) {
+      .tcplayer,
+      #player-container-id {
+        width: 100%;
+        height: 270px;
+      }
+    }
+    /* 设置logo在高分屏的显示样式 */
+    @media only screen and (min-device-pixel-ratio: 2),
+    only screen and (-webkit-min-device-pixel-ratio: 2) {
+      .tcp-logo-img {
+        width: 50%;
+      }
+    }
+    .button-container {
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+  <!-- 设置播放器容器 -->
+  <video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
+  </video>
+  <!-- <video id="player-native" preload="auto" width="414" height="280" playsinline webkit-playsinline controls
+src="https://5664.liveplay.myqcloud.com/live/5664_harchar1.m3u8?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb">
+</video> -->
+  <div class="button-container">
+    <!-- <button onclick="playFlv()">flv</button> -->
+    <button onclick="playWebRTC()">WebRTC</button>
+    <button onclick="playHls()">hls</button>
+    <button onclick="playMp4()">mp4</button>
+    <button onclick="playFail()">模拟快直播-2005事件，降级播放hls</button>
+    <!-- <button onclick="fullscreen()">webkit fullscreen</button> -->
+    <!-- <button onclick="fullscreen('#player-native')">fullscreen</button> -->
+  </div>
+  <!-- <video class="tcplayer" id="player1" preload="auto" width="640" height="360" playsinline webkit-playsinline>
+</video> -->
+  <!-- <video class="tcplayer" id="player2" preload="auto" width="640" height="360" playsinline webkit-playsinline>
+</video> -->
+  <script>
+    if (TCPlayer.browser.IS_ANDROID || TCPlayer.browser.IS_IOS) {
+      const vConsole = new VConsole({ maxLogNumber: 1000 });
+    }
+    var player = TCPlayer('player-container-id', {
+      autoplay: false,
+      // 封面图
+      // poster:'https://1256993030.vod2.myqcloud.com/20f8b585vodgzp1256993030/0/player/5285890781393938051.png',
+      sources: [/* {
+      // 快直播地址
+      src: 'webrtc://5664.liveplay.myqcloud.com/live/5664_harchar1?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb'
+    },{
+      // HLS直播地址
+      src: 'https://5664.liveplay.myqcloud.com/live/5664_harchar1.m3u8?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb'
+    }, */{
+          // src: 'https://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f40.mp4'
+          src: 'https://5664.liveplay.myqcloud.com/live/5664_harchar1.m3u8?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb'
+        }],
+      // 可配置参数说明 https://cloud.tencent.com/document/product/881/30820#options-.E5.8F.82.E6.95.B0.E5.88.97.E8.A1.A8
+      controlBar: {
+        // 是否显示进度条
+        // progressControl:false
+      },
+      //
+      // nativeControlsForTouch:true,
+      webrtcConfig: {
+        // 参考 快直播 config 说明
+      },
+      hlsConfig: {
+        // 参考 hls.js config 说明 https://github.com/video-dev/hls.js/blob/f3c6b2712e63ee6ed32957e4035254856d24605e/docs/API.md#fine-tuning
+      }
+    });
+    player.on('ready', function () {
+      console.log('player on ready');
+      // 禁止拖拽进度条 与隐藏进度条不能同时配置。
+      // player.controlBar.progressControl.disable();
+    });
+    player.on('webrtcevent', function (event) {
+      console.log('webrtcEvent', event);
+    });
+    player.on('webrtcfallback', function (event) {
+      console.log('webrtcfallback', event);
+    });
+    // 播放器事件
+    var events = [
+      'loadstart',
+      'suspend',
+      'abort',
+      'error',
+      'emptied',
+      'stalled',
+      'loadedmetadata',
+      'loadeddata',
+      'canplay',
+      'canplaythrough',
+      'playing',
+      'waiting',
+      'seeking',
+      'seeked',
+      'ended',
+      'durationchange',
+      'timeupdate',
+      'progress',
+      'play',
+      'pause',
+      'ratechange',
+      'resize',
+      'volumechange'
+    ];
+    events.forEach(function (val, i) {
+      player.on(val, function (event) {
+        if (val != 'timeupdate') {
+          console.log('player event', val);
+        }
+        if (val === 'waiting') {
+          console.log('waiting事件，可以标记为卡顿开始');
+        }
+        if (val === 'playing') {
+          console.log('开始播放或恢复播放，可以标记为卡顿结束');
+        }
+      });
+    });
+    function playFail() {
+      if (player.src().indexOf('webrtc://') === 0) {
+        player.tech(true).webrtcProvider && player.tech(true).webrtcProvider.onPlayEvent(-2005);
+      }
+    }
+    function fullscreen(elementID) {
+      if (elementID) {
+        document.querySelector(elementID).webkitEnterFullScreen();
+        return;
+      }
+      document.querySelector('video').webkitEnterFullScreen();
+    }
+    function playHls() {
+      player.src('https://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/adp.10.m3u8');
+    }
+    function playMp4() {
+      player.src('https://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f40.mp4');
+    }
+    function playWebRTC() {
+      player.src('webrtc://5664.liveplay.myqcloud.com/live/5664_harchar1?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb');
+    }
+  </script>
+</body>
+</html>

package/dist/examples/webrtc/tcplayer-src-webrtc-mutilRes.html ADDED Viewed

@@ -0,0 +1,142 @@
+<!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="https://web.sdk.cloud.tencent.cn/player/tcplayer/release/v4.5.0/tcplayer.min.css" rel="stylesheet">
+  <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.1/vconsole.min.js"></script>
+  <script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
+  <!-- <script src="https://cloudcache.tencent-cloud.com/open/qcloud/live/webrtc/js/TXLivePlayer-1.1.0.min.js"></script> -->
+  <script src="https://wliap-1306264703.cos.ap-nanjing.myqcloud.com/TXLivePlayer-1.2.0.min.js "></script>
+  <!-- 引入播放器 js 文件 -->
+  <script src="https://web.sdk.cloud.tencent.cn/player/tcplayer/release/v4.5.0/tcplayer.v4.5.0.min.js"></script>
+  <!-- 示例 CSS 样式可自行删除 -->
+  <style>
+    html,body{
+      margin: 0;
+      padding: 0;
+    }
+    .tcplayer {
+      margin: 0 auto;
+    }
+    @media screen and (max-width: 640px) {
+      #player-container-id {
+        width: 100%;
+        height: 270px;
+      }
+    }
+    /* 设置logo在高分屏的显示样式 */
+    @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
+      .tcp-logo-img {
+        width: 50%;
+      }
+    }
+    .button-container{
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+<!-- 设置播放器容器 -->
+<video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
+</video>
+<div class="button-container">
+</div>
+<script>
+  if (TCPlayer.browser.IS_ANDROID || TCPlayer.browser.IS_IOS) {
+    const vConsole = new VConsole({ maxLogNumber: 1000 });
+  }
+  var events = [
+    'loadstart',
+    'suspend',
+    'abort',
+    'error',
+    'emptied',
+    'stalled',
+    'loadedmetadata',
+    'loadeddata',
+    'canplay',
+    'canplaythrough',
+    'playing',
+    'waiting',
+    'seeking',
+    'seeked',
+    'ended',
+    'durationchange',
+    'timeupdate',
+    'progress',
+    'play',
+    'pause',
+    'ratechange',
+    'resize',
+    'volumechange'
+  ];
+  var player = TCPlayer('player-container-id',{
+    poster:'https://vodplayerinfo-10005041.file.myqcloud.com/3035579109/vod_paster_pause/paster_pause1469013308.jpg',
+    // autoplay: true,
+    multiResolution:{
+      sources:{
+        'SD':[
+          {
+            src: 'webrtc://5664.liveplay.myqcloud.com/live/5664_harchar1?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb',
+          }
+        ],
+        'HD':[
+          {
+            src: 'webrtc://5664.liveplay.myqcloud.com/live/5664_harchar1?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb',
+          }
+        ],
+        'FHD':[
+          {
+            src: 'webrtc://5664.liveplay.myqcloud.com/live/5664_harchar1?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb',
+          }
+        ]
+      },
+      // labels:{
+      //   'SD':'标清','HD':'高清','FHD':'超清'
+      // },
+      showOrder:['SD','HD','FHD'],
+      defaultRes: 'SD'
+    },
+    controlBar: {
+      // 隐藏进度条
+      // progressControl:false
+    },
+    hlsConfig: {
+      enableRecoverMediaError: true,
+      recoverMediaErrorMaxRetry: 5
+    }
+  });
+  player.on('ready', function() {
+    console.log('player on ready');
+    // 禁止拖拽进度条 与隐藏进度条不能同时配置。
+    // player.controlBar.progressControl.disable();
+  });
+  player.on('webrtcevent', function(event) {
+    console.log('webrtcEvent', event);
+  });
+  events.forEach(function(val, i){
+    player.on(val, function (event) {
+     if(val !='timeupdate'){
+       console.log('player event', val);
+     }
+     if(val === 'waiting'){
+       console.log('waiting事件，可以标记为卡顿开始');
+     }
+     if(val === 'playing'){
+       console.log('开始播放或恢复播放，可以标记为卡顿结束');
+     }
+    });
+  });
+</script>
+</body>
+</html>

package/dist/examples/webrtc/tcplayer-src-webrtc.html ADDED Viewed

@@ -0,0 +1,165 @@
+<!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="https://web.sdk.cloud.tencent.cn/player/tcplayer/release/v4.5.0/tcplayer.min.css" rel="stylesheet">
+  <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.1/vconsole.min.js"></script>
+  <script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
+  <!-- <script src="https://cloudcache.tencent-cloud.com/open/qcloud/live/webrtc/js/TXLivePlayer-1.1.0.min.js"></script> -->
+  <!-- <script src="https://wliap-1306264703.cos.ap-nanjing.myqcloud.com/TXLivePlayer-1.2.0.min.js "></script> -->
+  <script src="https://testmig-1306264703.cos.ap-guangzhou.myqcloud.com/wm/TXLivePlayer-1.2.1.min.js"></script>
+  <!-- 引入播放器 js 文件 -->
+  <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/tcplayer.v4.5.2.min.js"></script>
+  <!-- 示例 CSS 样式可自行删除 -->
+  <style>
+    html,body{
+      margin: 0;
+      padding: 0;
+    }
+    .tcplayer {
+      margin: 0 auto;
+    }
+    @media screen and (max-width: 640px) {
+      .tcplayer,
+      #player-container-id {
+        width: 100%;
+        height: 270px;
+      }
+    }
+    /* 设置logo在高分屏的显示样式 */
+    @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
+      .tcp-logo-img {
+        width: 50%;
+      }
+    }
+    .button-container{
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+<!-- 设置播放器容器 -->
+<video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
+</video>
+<!-- <video id="player-native" preload="auto" width="414" height="280" playsinline webkit-playsinline controls
+src="https://5664.liveplay.myqcloud.com/live/5664_harchar1.m3u8?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb">
+</video> -->
+<div class="button-container">
+  <!-- <button onclick="playFlv()">flv</button> -->
+  <!-- <button onclick="playHls()">hls</button> -->
+  <!-- <button onclick="playFail()">模拟快直播-2005事件，降级播放hls</button> -->
+  <!-- <button onclick="fullscreen()">webkit fullscreen</button> -->
+  <!-- <button onclick="fullscreen('#player-native')">fullscreen</button> -->
+</div>
+<!-- <video class="tcplayer" id="player1" preload="auto" width="640" height="360" playsinline webkit-playsinline>
+</video> -->
+<!-- <video class="tcplayer" id="player2" preload="auto" width="640" height="360" playsinline webkit-playsinline>
+</video> -->
+<script>
+  if (TCPlayer.browser.IS_ANDROID || TCPlayer.browser.IS_IOS) {
+    const vConsole = new VConsole({ maxLogNumber: 1000 });
+  }
+  var player = TCPlayer('player-container-id',{
+    // 封面图
+    // poster:'https://1256993030.vod2.myqcloud.com/20f8b585vodgzp1256993030/0/player/5285890781393938051.png',
+    sources: [{
+      // 快直播地址
+      src: 'webrtc://5664.liveplay.myqcloud.com/live/5664_harchar1?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb'
+    },{
+      // HLS直播地址
+      src: 'https://5664.liveplay.myqcloud.com/live/5664_harchar1.m3u8?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb'
+    }],
+    // 可配置参数说明 https://cloud.tencent.com/document/product/881/30820#options-.E5.8F.82.E6.95.B0.E5.88.97.E8.A1.A8
+    controlBar: {
+      // 是否显示进度条
+      // progressControl:false
+    },
+    //
+    // nativeControlsForTouch:true,
+    webrtcConfig: {
+      // 参考 快直播 config 说明
+    },
+    hlsConfig: {
+      // 参考 hls.js config 说明 https://github.com/video-dev/hls.js/blob/f3c6b2712e63ee6ed32957e4035254856d24605e/docs/API.md#fine-tuning
+    }
+  });
+  player.on('ready', function() {
+    console.log('player on ready');
+    // 禁止拖拽进度条 与隐藏进度条不能同时配置。
+    // player.controlBar.progressControl.disable();
+  });
+  player.on('webrtcevent', function(event) {
+    console.log('webrtcEvent', event);
+  });
+  player.on('webrtcfallback', function(event) {
+    console.log('webrtcfallback', event);
+  });
+  // 播放器事件
+  var events = [
+    'loadstart',
+    'suspend',
+    'abort',
+    'error',
+    'emptied',
+    'stalled',
+    'loadedmetadata',
+    'loadeddata',
+    'canplay',
+    'canplaythrough',
+    'playing',
+    'waiting',
+    'seeking',
+    'seeked',
+    'ended',
+    'durationchange',
+    'timeupdate',
+    'progress',
+    'play',
+    'pause',
+    'ratechange',
+    'resize',
+    'volumechange'
+  ];
+  events.forEach(function(val, i){
+    player.on(val, function (event) {
+     if(val !='timeupdate'){
+       console.log('player event', val);
+     }
+     if(val === 'waiting'){
+       console.log('waiting事件，可以标记为卡顿开始');
+     }
+     if(val === 'playing'){
+       console.log('开始播放或恢复播放，可以标记为卡顿结束');
+     }
+    });
+  });
+  function playFail() {
+    if (player.src().indexOf('webrtc://')===0) {
+      player.tech(true).webrtcProvider && player.tech(true).webrtcProvider.onPlayEvent(-2005);
+    }
+  }
+  function fullscreen(elementID) {
+    if (elementID){
+      document.querySelector(elementID).webkitEnterFullScreen();
+      return;
+    }
+    document.querySelector('video').webkitEnterFullScreen();
+  }
+</script>
+</body>
+</html>