20240517

2024-05-17 18:02:49 +08:00
parent 8407d51fb6
commit b5264dc222
4056 changed files with 308094 additions and 41932 deletions
--- a/node_modules/tcplayer.js/dist/examples/webrtc/tcplayer-src-webrtc-mutilRes.html
+++ b/node_modules/tcplayer.js/dist/examples/webrtc/tcplayer-src-webrtc-mutilRes.html
@@ -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>