tcplayer.js 4.9.0-beta.2 → 4.9.1

package/dist/examples/vod/tcplayer-vod-all.html

@@ -7,11 +7,15 @@
   <title>腾讯云视频点播示例</title>
   <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.min.css" rel="stylesheet"/>
 
+  <!-- <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.8.0/libs/hls.min.1.1.6.js"></script> -->
+  <!-- <script src="http://127.0.0.1:8082/dist/hls.js"></script> -->
   <!--播放器脚本文件-->
+  <!-- <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.8.0/tcplayer.v4.8.0.min.js"></script> -->
+  <!-- <script src="https://vincentlli-1306264703.cos.ap-nanjing.myqcloud.com/tcplayer/tcplayer.v4.8.0.js"></script> -->
+  <!-- <script src="https://webrtc-demo.myqcloud.com/pull-sdk/js/vconsole.min.js"></script> -->
+  <script src="http://localhost:8081/dist/tcplayer.v4.9.1.js"></script>
+
 
-  <!-- <script src="http://10.21.39.55:8080/libs/hls.min.1.1.7.js"></script> -->
-  <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.9.0/tcplayer.v4.9.0.min.js"></script>
-  <!-- <script src="http://10.21.39.55:8080/dist/tcplayer.v4.8.0.min.js"></script> -->
  
   <style>
     html,body{
@@ -49,8 +53,11 @@
 * 设置 x5-playsinline 属性会使用 X5 UI 的播放器
 -->
 <script>
+  // var vConsole = new VConsole();
+// TCPlayer.mountHlsProvider(true);
   var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
-    autoplay: true,
+    // autoplay: true,
+    // language: 'en',
     // 1. 历史数据，无psign场景
     // fileID: '5285890799710670616', // 请传入需要播放的视频filID 必须
     // appID: '1400329073', // 请传入点播账号的appID 必须
@@ -79,11 +86,32 @@
     // psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMwNjI2NDcwMywiZmlsZUlkIjoiMjQzNzkxNTc2OTQzMDcyNjQ3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDQ2OTk1NCwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyLCJmYWlyUGxheURlZmluaXRpb24iOjExfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTMwNjI2NDcwMy52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.vRZS29srBfpGAVXiAixURviFJZel_Aq3jnC_V_bX7hk',
     
     // 6. AES
-    // fileID: '243791576943072647',
-    // appID: '1306264703',
-    // psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMwNjI2NDcwMywiZmlsZUlkIjoiMjQzNzkxNTc2OTQzMDcyNjQ3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDQ2OTk3MSwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTMwNjI2NDcwMy52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.FOcmChHfrGY9tYCDn20MSQi-IqvQ9U_U6qLNgx9MhLg',
+    fileID: '243791576943072647',
+    appID: '1306264703',
+    psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMwNjI2NDcwMywiZmlsZUlkIjoiMjQzNzkxNTc2OTQzMDcyNjQ3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDQ2OTk3MSwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTMwNjI2NDcwMy52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.FOcmChHfrGY9tYCDn20MSQi-IqvQ9U_U6qLNgx9MhLg',
+    // licenseUrl: 'https://license-test.vod2.myqcloud.com/test/license/testV2/1300054025_1/v_cube.license',
+    licenseUrl: 'https://license-test.vod2.myqcloud.com/test/license/testV2/1251132654_1/v_cube.license',
+
+  
+
+    // 基础版
+    // https://license-test.vod2.myqcloud.com/test/license/testV2/1251132654_1/v_cube.license
+
+    // 高级版
+    // https://license-test.vod2.myqcloud.com/test/license/testV2/1251132654_1/v_cube.license
+
+    
+    // licenseUrl: 'https://license-test.vod2.myqcloud.com/test/license/testV2/1300054025_1/v_cube.license',
+
+    // licenseUrl: 'https://vincentlli-1306264703.cos.ap-nanjing.myqcloud.com/tcplayer/vcube.license',
+
+
+    // fileID: '3270835010498441393',
+    // appID: '1500012967',
+    // psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAxMjk2NywiZmlsZUlkIjoiMzI3MDgzNTAxMDQ5ODQ0MTM5MyIsImN1cnJlbnRUaW1lU3RhbXAiOjE2ODkwNjY4NzUsImNvbnRlbnRJbmZvIjp7ImF1ZGlvVmlkZW9UeXBlIjoiUHJvdGVjdGVkQWRhcHRpdmUiLCJkcm1BZGFwdGl2ZUluZm8iOnsid2lkZXZpbmVEZWZpbml0aW9uIjoxNDQ0Njc5fX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTUwMDAxMjk2Ny52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFAifX0.kLW4YWXMoomnyzLwzMlLD2jJQnP2NbliQQ33vByC-DI',
+
+    
 
-    // licenseUrl: '',
     // 7. widevine
     // fileID: '243791576943072647',
     // appID: '1306264703',
@@ -99,6 +127,10 @@
     // appID: '1306264703',
     // psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMwNjI2NDcwMywiZmlsZUlkIjoiMjQzNzkxNTc2OTQzMDcyNjQ3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDQ3MDAwNiwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJSYXdBZGFwdGl2ZSIsInJhd0FkYXB0aXZlRGVmaW5pdGlvbiI6MTB9LCJ1cmxBY2Nlc3NJbmZvIjp7ImRvbWFpbiI6IjEzMDYyNjQ3MDMudm9kMi5teXFjbG91ZC5jb20iLCJzY2hlbWUiOiJIVFRQUyJ9fQ.-yxAj1SBp-4QK7sC5Sz7E6gFuqRgY06vbN1Nkto0GQA',
     
+    // fileID: '3270835010468833724',
+    // appID: '1500012967',
+    // psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAxMjk2NywiZmlsZUlkIjoiMzI3MDgzNTAxMDQ2ODgzMzcyNCIsImN1cnJlbnRUaW1lU3RhbXAiOjE2ODkwNDc4ODUsImNvbnRlbnRJbmZvIjp7ImF1ZGlvVmlkZW9UeXBlIjoiUHJvdGVjdGVkQWRhcHRpdmUiLCJkcm1BZGFwdGl2ZUluZm8iOnsid2lkZXZpbmVEZWZpbml0aW9uIjoxNDQ0Njc5fX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTUwMDAxMjk2Ny52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFAifX0.2shCzGjOrRQF_oa5SpBckm08hvX0GhKw6r-K-0K0thc',
+
     // 10. 不加密DASH
     // fileID: '243791576943072647',
     // appID: '1306264703',
@@ -108,19 +140,20 @@
     // appID: '1500005692',
     // fileID: '387702307006254554',
     // psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNTY5MiwiZmlsZUlkIjoiMzg3NzAyMzA3MDA2MjU0NTU0IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDMxMDM1MiwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTUwMDAwNTY5Mi52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFAifX0.PFwxL9NNs_gyrR5U3dxwzeip3wZT4M-Fvtd0H2WkjnA',
-
-    languages:{
-      "zh-cn":{
-        "Server respond error data.(eg. stream not exist)": "可定义错误提示文案，如：没带防盗链检测参数，请重试"
-      }
-    },
-
-    flvConfig: {
-      hasAudio: false,
-    },
-
+    webrtcConfig: {
+        connectRetryCount: 10,
+        connectRetryDelay: 2,
+        signalDomain: {
+          protocol: 'http', // todo 现网发布要改
+          domain: 'webrtc-play-dev.media-cast.vod-qcloud.com', // todo 现网发布要改
+          query: false,
+        },
+      },
     //其他参数请在开发文档中查看
     plugins: {
+      // SafeCheck: {
+        
+      // },
       ContinuePlay: {
         // auto: true // 是否在播放时自动续播
       },
@@ -137,14 +170,63 @@
     }
   });
 
-  player.src('https://liteavapp.qcloud.com/live/liteavdemoplayerstreamid.flv');
+
+  // setTimeout(() => {
+  //   console.log('player ori', player);
+  //   player.loadVideoByID({
+  //     fileID: '243791576943072647',
+  //     appID: '1306264703',
+  //     psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMwNjI2NDcwMywiZmlsZUlkIjoiMjQzNzkxNTc2OTQzMDcyNjQ3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDQ2OTk3MSwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTMwNjI2NDcwMy52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.FOcmChHfrGY9tYCDn20MSQi-IqvQ9U_U6qLNgx9MhLg',
+  //   });
+  // }, 3000);
+  // player.src('http://1305533787.vod2.myqcloud.com/6bfcd0cavodtranssgp1305533787/df5fac093270835010461032124/v.f100010.mp4');
+  
+  // player.src('webrtc://global-lebtest-play.myqcloud.com/live/lebtest?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=69f1eb8c');
+
+  // player.src('http://vincent.pub/live/sei.m3u8');
+  // player.src('https://1305071164.vod2.myqcloud.com/0500fb7evodcq1305071164/76cbdeb53270835009987527597/playlist_eof.m3u8');
+  // player.src('https://68789.liveplay.myqcloud.com/live/webrtc_demo_1686626553419.flv');
+
+
+  // player.ready(function() {
+  //   debugger
+  //   player.tech_.hlsProvider.hls.removeLevel(2)
+  // });
+
+
+  player.on('licenseparsed', function(e) {
+    console.log('eeee',e );
+  });
+
+  player.on('waiting', function(e) {
+    console.log('waiting');
+  });
+  player.on('error', function(e) {
+    console.log('e', e);
+  });
+
+  player.on('playcgistart', function(e) {
+    console.log('playcgistart', e);
+  });
+
+  player.on('playcgiend', function(e) {
+    console.log('playcgiend', e);
+  });
+
+  player.on('pause', function(e) {
+    console.log('pause');
+  });
+
+
 
   document.getElementById('switch').addEventListener('click', function() {
-    player.loadVideoByID({
-      appID: '1500005692',
-      fileID: '387702307006254554',
-      psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNTY5MiwiZmlsZUlkIjoiMzg3NzAyMzA3MDA2MjU0NTU0IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDMxMDM1MiwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTUwMDAwNTY5Mi52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFAifX0.PFwxL9NNs_gyrR5U3dxwzeip3wZT4M-Fvtd0H2WkjnA',
-    });
+    player.src('webrtc://68789.liveplay.myqcloud.com/live/webrtc_demo_1688439945507');
+
+    // player.loadVideoByID({
+    //   appID: '1500005692',
+    //   fileID: '387702307006254554',
+    //   psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNTY5MiwiZmlsZUlkIjoiMzg3NzAyMzA3MDA2MjU0NTU0IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDMxMDM1MiwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTUwMDAwNTY5Mi52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFAifX0.PFwxL9NNs_gyrR5U3dxwzeip3wZT4M-Fvtd0H2WkjnA',
+    // });
   });
 </script>
 </body>

package/dist/examples/vod/tcplayer-vod-base.html

@@ -12,9 +12,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.13.2m.js"></script> -->
+  <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
   <!-- 引入播放器 js 文件 -->
-  <script src="http://localhost:8080/dist/tcplayer.v4.8.0.js"></script>
+  <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.3.0.js"></script>
   <!-- 示例 CSS 样式可自行删除 -->
   <style>
     html,body{
@@ -52,31 +52,24 @@
 -->
 <script>
   var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
-    multiResolution:{
-      sources:{
-        'SD':[
-          {
-            src: 'https://1500005692.vod2.myqcloud.com/43843706vodtranscq1500005692/62656d94387702300542496289/v.f100240.m3u8',
-          }
-        ],
-        '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',
-          }
-        ]
+    fileID: '5285890799710670616', // 请传入需要播放的视频filID 必须
+    appID: '1400329073', // 请传入点播账号的appID 必须
+    //其他参数请在开发文档中查看
+    plugins: {
+      ContinuePlay: {
+        // auto: true // 是否在播放时自动续播
       },
-      labels:{
-        'SD':'标清','HD':'高清','FHD':'超清'
-      },
-      showOrder:['SD','HD','FHD'],
-      defaultRes: 'SD'
-    },
-
+      ProgressMarker: true,
+      ContextMenu: {
+        statistic: true,
+        levelSwitch: {
+          open: true, // 打开切换提示
+          // switchingText: '开始', // 开始切换时文案
+          // switchedText: '成功', // 切换成功时文案
+          // switchErrorText: '失败', // 切换失败时文案
+        }
+      }
+    }
   });
 </script>
 </body>

package/dist/examples/vod/tcplayer-vod-event.html

@@ -69,9 +69,10 @@
     'seeking',
     'seeked',
     'ended',
+    'load',
     'durationchange',
-    'timeupdate',
-    'progress',
+    // 'timeupdate',
+    // 'progress',
     'play',
     'pause',
     'ratechange',
@@ -79,8 +80,10 @@
     'volumechange'
   ];
   var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
-    fileID: '5285890799710670616', // 请传入需要播放的视频filID 必须
-    appID: '1400329073' // 请传入点播账号的appID 必须
+    fileID: '243791576943072647',
+    appID: '1306264703',
+    psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMwNjI2NDcwMywiZmlsZUlkIjoiMjQzNzkxNTc2OTQzMDcyNjQ3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDQ2OTk3MSwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTMwNjI2NDcwMy52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.FOcmChHfrGY9tYCDn20MSQi-IqvQ9U_U6qLNgx9MhLg',
+    
     //其他参数请在开发文档中查看
   });
   events.forEach(function(val, i){

package/dist/examples/vod/tcplayer-vod-ghost-watermark.html

@@ -6,8 +6,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
   <title>腾讯云视频点播示例</title>
 
-  <link href="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.css" rel="stylesheet">
-  <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/tcplayer.v4.7.2.min.js"></script>
+  <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.8.0/tcplayer.min.css" rel="stylesheet">
+  <script src="http://localhost:8081/dist/tcplayer.v4.9.1.js"></script>
   <style>
     html,body{
       margin: 0;
@@ -37,6 +37,10 @@
 * 设置 x5-playsinline 属性会使用 X5 UI 的播放器
 -->
 <script>
+  // 设置首次水印出现的时间，方便观察效果
+  // 不设置会在随机时间间歇出现
+  localStorage.setItem('ghostWatermarkFirstShow', 0);
+
   // 签名中带有幽灵水印文本
   var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
     fileID: '243791576943072647',

package/dist/examples/vod/tcplayer-vod-trial.html

@@ -0,0 +1,150 @@
+<!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>Tcplayer Demo</title>
+  <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>
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+    }
+    .tcplayer {
+      margin: 0 auto;
+    }
+
+    #player-container-id {
+      width: 640px;
+      height: 360px;
+    }
+
+    .tip-node {
+      display: flex;
+      align-items: center;
+      position: absolute;
+      bottom: 5em;
+      left: 1em;
+      background: rgba(0, 0, 0, 0.4);
+      border-radius: 4px;
+      padding: 5px 10px;
+
+    }
+
+    .tip-icon-close {
+      width: 14px;
+      height: 14px;
+      display: inline-block;
+      margin-left: 10px;
+      background-image: url(https://tcplayer-1306264703.cos.ap-nanjing.myqcloud.com/picture/icon-close.png);
+      background-size: cover;
+      cursor: pointer;
+    }
+    
+    .page-node {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background: #000;
+      z-index: 999;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .page-content {
+      text-align: center;
+    }
+
+    .page-content a{
+      display: flex;
+      width: 120px;
+      height: 28px;
+      border-radius: 14px;
+      color: #663d00;
+      background-image: linear-gradient(90deg,#ffdf89 0,#f2ca5b 100%);
+      align-items: center;
+      justify-content: center;
+      text-decoration: none;
+      margin: 0 auto;
+    }
+
+    .page-content #replay-btn::before {
+      content: '';
+      width: 12px;
+      height: 12px;
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: 5px;
+      background: url(https://tcplayer-1306264703.cos.ap-nanjing.myqcloud.com/picture/icon-replay.png);
+      background-size: contain;
+    }
+
+    .page-content #replay-btn {
+      margin: 10px auto 0;
+    }
+
+    @media screen and (max-width: 480px) {
+      #player-container-id {
+        width: 100%;
+        height: 240px;
+      }
+    }
+
+
+  </style>
+</head>
+<body>
+
+<video id="player-container-id" preload="auto" playsinline webkit-playsinline>
+</video>
+
+<script>
+  var player = TCPlayer("player-container-id", { 
+    fileID: "3701925924406245944",
+    appID: "1500006438",
+    psign: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNjQzOCwiZmlsZUlkIjoiMzcwMTkyNTkyNDQwNjI0NTk0NCIsImN1cnJlbnRUaW1lU3RhbXAiOjE2MzE3ODEyMzYsImV4cGlyZVRpbWVTdGFtcCI6MTkxNTg2NDQxNCwicGNmZyI6ImJhc2ljRHJtUHJlc2V0IiwidXJsQWNjZXNzSW5mbyI6eyJleHBlciI6MzAsInQiOiIxOTE1ODY0NDE0In19.F9gD5SidAoQPH4rDz4dr9-Z6DpoojOkHX_23kZPJ72A",
+    autoplay: false,
+  });
+
+  player.one("playing", function() {
+    var tipNode = document.createElement("div");
+    tipNode.innerHTML = "可试看30秒，开通 VIP 观看完整视频";
+    tipNode.className = "tip-node";
+
+    var tipIconClose = document.createElement("i");
+    tipIconClose.className = "tip-icon-close";
+    tipIconClose.onclick = function() {
+      tipNode.remove();
+    }
+  
+    tipNode.appendChild(tipIconClose);
+    player.el_.appendChild(tipNode);
+  });
+
+
+  player.on("ended", function() {
+    var pageNode = document.createElement("div");
+      pageNode.className = "page-node";
+
+      pageNode.innerHTML = `<div class="page-content">
+          <p>试看结束，VIP会员可观看完整视频</p>
+          <a href="https://cloud.tencent.com/document/product/881/30818" target="_blank">开通VIP会员</a>
+          <button id="replay-btn">重新试看</button>
+        </div>
+      `;
+      
+      player.el_.appendChild(pageNode);
+
+      document.querySelector('#replay-btn').onclick = function() {
+        player.play();
+        pageNode.remove();
+      };
+  });
+
+</script>
+</body>
+</html>

package/dist/examples/vod/tcplayer-vod-vr.html

@@ -0,0 +1,138 @@
+<!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>
+
+
+  <link href="https://tcplayer.vcube.tencent.com/tcplayer/release/v4.8.0/tcplayer.min.css" rel="stylesheet" />
+  <!-- <script src="http://localhost:8080/libs/plugins/tcplayer-safe-plugin.1.0.0.js"></script>
+  <script src="http://localhost:8080/libs/plugins/tcplayer-vr-plugin.1.0.0.js"></script>
+  <script src="http://localhost:8080/libs/tcpcrypto.1.0.0.js"></script> -->
+  <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.8.0/tcplayer.v4.8.0.min.js"></script>
+  <!-- <script src="https://tcplayer.vcube.tencent.com/tcplayer-plugins/tcplayer.v4.8.0.min.js"></script> -->
+
+
+  <!-- <script src="https://webrtc-demo.myqcloud.com/pull-sdk/js/vconsole.min.js"></script> -->
+
+  <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%;
+      }
+    }
+  </style>
+</head>
+
+<body style="overflow-y: hidden">
+  <!-- 设置播放器容器 -->
+  <video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline crossorigin="anonymous">
+  </video>
+  
+  <button id="enterVR">enterVR</button>
+  <button id="exitVR">exitVR</button>
+  <button id="enableSensor">enableSensor</button>
+  <button id="gyroscopeVR">gyroscope:VR</button>
+  <button id="gyroscopeNone">gyroscope:none</button>
+  <button id="lookAt">lookAt</button>
+
+  
+  
+  <!--
+注意事项：
+* 播放器容器必须为 video 标签
+* player-container-id 为播放器容器的ID，可自行设置
+* 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
+* playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
+* 设置 x5-playsinline 属性会使用 X5 UI 的播放器
+-->
+
+  <script>
+    // var vConsole = new VConsole();
+    var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
+      reportable: false,
+    
+      // 12. vr 
+      appID: '1500005692', 
+      fileID: '243791580518143986',
+      psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNTY5MiwiZmlsZUlkIjoiMjQzNzkxNTgwNTE4MTQzOTg2IiwiY3VycmVudFRpbWVTdGFtcCI6MTY4MjMzNzM0NywiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTUwMDAwNTY5Mi52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.g6lUJDbNfLmq8vAiC5dn1GlLTw5HT7dUDxSOCDsKALs',
+      licenseUrl: 'https://vincentlli-1306264703.cos.ap-nanjing.myqcloud.com/tcplayer/vcube.license',
+
+      plugins: {
+        VR: {
+          // isEnableController: true,
+          // isEnableZoom: true,
+          // yaw: 0,
+          // pitch: 0,
+          // fov: 65,
+          // yawRange: [-180, 180],
+          // pitchRange: [-90, 90],
+          // fovRange: [30, 110],
+        },
+        SafeCheck: true,
+      }
+    });
+
+    // player.ready(function() {
+    //   player.loadPlugin();
+    // });
+
+    player.on('error', (err) => {
+      console.log('err', err);
+    });
+
+    // mp4 vr
+    // player.src('https://1305308197.vod2.myqcloud.com/a3557591vodger1305308197/f7270750243791579800235226/f0.mp4');
+    
+    document.getElementById('enterVR').addEventListener('click', function () {
+      player.plugins['VR'].enterVR();
+    });
+
+    document.getElementById('exitVR').addEventListener('click', function () {
+      player.plugins['VR'].exitVR();
+    });
+
+    document.getElementById('enableSensor').addEventListener('click', function () {
+      player.plugins['VR'].enableSensor();
+    });
+
+    document.getElementById('gyroscopeVR').addEventListener('click', function () {
+      player.plugins['VR'].setGyroMode('VR');
+    });
+
+    document.getElementById('gyroscopeNone').addEventListener('click', function () {
+      player.plugins['VR'].setGyroMode('none');
+    });
+
+    document.getElementById('lookAt').addEventListener('click', function() {
+      player.plugins['VR'].lookAt({yaw: 30}, 1000);
+    });
+
+
+  </script>
+</body>
+
+</html>