tcplayer.js 4.8.0 → 5.0.1

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 (18) hide show
  1. package/dist/examples/vod/tcplayer-skip.html +105 -0
  2. package/dist/examples/vod/tcplayer-vod-all.html +106 -8
  3. package/dist/examples/vod/tcplayer-vod-event.html +7 -4
  4. package/dist/examples/vod/tcplayer-vod-ghost-watermark.html +6 -2
  5. package/dist/examples/vod/tcplayer-vod-vr.html +138 -0
  6. package/dist/examples/webrtc/tcplayer-src-webrtc-abr-new.html +109 -0
  7. package/dist/examples/webrtc/tcplayer-src-webrtc-abr.html +1 -2
  8. package/dist/examples/webrtc/tcplayer-src-webrtc.html +9 -84
  9. package/dist/libs/TXLivePlayer-1.3.4.min.js +1 -0
  10. package/dist/libs/tcpcrypto.1.0.0.js +2 -0
  11. package/dist/plugins/tcplayer-safe-check-plugin.1.0.0.js +2 -0
  12. package/dist/plugins/tcplayer-vr-plugin.1.0.0.js +2 -0
  13. package/dist/tcplayer.css +154 -2
  14. package/dist/tcplayer.min.css +1 -1
  15. package/dist/tcplayer.v5.0.1.min.js +25 -0
  16. package/package.json +2 -2
  17. package/dist/libs/TXLivePlayer-1.3.0.min.js +0 -1
  18. package/dist/tcplayer.v4.8.0.min.js +0 -17
package/dist/examples/vod/tcplayer-skip.html ADDED
@@ -0,0 +1,105 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
7
+ <title>腾讯云视频点播示例</title>
8
+ <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.min.css" rel="stylesheet"/>
9
+
10
+ <!--播放器脚本文件-->
11
+ <script src="https://testmig-1306264703.cos.ap-guangzhou.myqcloud.com/vin/tcplayer.v4.8.0.min.js"></script>
12
+
13
+ <style>
14
+ html,body{
15
+ margin: 0;
16
+ padding: 0;
17
+ }
18
+ .tcplayer {
19
+ margin: 0 auto;
20
+ }
21
+ @media screen and (max-width: 640px) {
22
+ #player-container-id {
23
+ width: 100%;
24
+ height: 270px;
25
+ }
26
+ }
27
+ /* 设置logo在高分屏的显示样式 */
28
+ @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
29
+ .tcp-logo-img {
30
+ width: 50%;
31
+ }
32
+ }
33
+ </style>
34
+ </head>
35
+ <body>
36
+
37
+ <div id="video-wrapper">
38
+ <!-- 设置播放器容器 -->
39
+ <video id="player-container-id1" preload="auto" width="640" height="360" playsinline webkit-playsinline>
40
+ </video>
41
+
42
+ <video id="player-container-id2" style="display: none" preload="auto" width="640" height="360" playsinline webkit-playsinline>
43
+ </video>
44
+ </div>
45
+
46
+
47
+ <!--
48
+ 注意事项：
49
+ * 播放器容器必须为 video 标签
50
+ * player-container-id 为播放器容器的ID，可自行设置
51
+ * 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
52
+ * playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
53
+ * 设置 x5-playsinline 属性会使用 X5 UI 的播放器
54
+ -->
55
+ <script>
56
+ var player = TCPlayer('player-container-id1', { // player-container-id 为播放器容器ID，必须与html中一致
57
+ autoplay: true,
58
+
59
+ // 6. AES
60
+ fileID: '243791576943072647',
61
+ appID: '1306264703',
62
+ psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMwNjI2NDcwMywiZmlsZUlkIjoiMjQzNzkxNTc2OTQzMDcyNjQ3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDQ2OTk3MSwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTMwNjI2NDcwMy52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.FOcmChHfrGY9tYCDn20MSQi-IqvQ9U_U6qLNgx9MhLg',
63
+
64
+
65
+ hlsConfig: {
66
+ skip: true,
67
+ }
68
+
69
+ });
70
+
71
+ window.player = player;
72
+
73
+ player.on('error', function(e) {
74
+ if (e.data.code === 4) {
75
+
76
+ if (window.player) {
77
+ // 先隐藏 再延时销毁，否则会报错
78
+ document.getElementById('player-container-id1').style.display = 'none';
79
+ setTimeout(function() {
80
+ window.player.pause();
81
+ window.player.dispose();
82
+ }, 1000);
83
+ }
84
+
85
+
86
+ document.getElementById('player-container-id2').style.display = 'block';
87
+ var player = TCPlayer('player-container-id2', { // player-container-id 为播放器容器ID，必须与html中一致
88
+ autoplay: true,
89
+
90
+ // 6. AES
91
+ fileID: '243791576943072647',
92
+ appID: '1306264703',
93
+ psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMwNjI2NDcwMywiZmlsZUlkIjoiMjQzNzkxNTc2OTQzMDcyNjQ3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDQ2OTk3MSwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTMwNjI2NDcwMy52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.FOcmChHfrGY9tYCDn20MSQi-IqvQ9U_U6qLNgx9MhLg',
94
+
95
+ fakeFullScreen: true,
96
+ hlsConfig: {
97
+ skip: false,
98
+ }
99
+ });
100
+ }
101
+ });
102
+
103
+ </script>
104
+ </body>
105
+ </html>
package/dist/examples/vod/tcplayer-vod-all.html CHANGED
@@ -7,8 +7,15 @@
7
7
  <title>腾讯云视频点播示例</title>
8
8
  <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.min.css" rel="stylesheet"/>
9
9
 
10
+ <!-- <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.8.0/libs/hls.min.1.1.6.js"></script> -->
11
+ <!-- <script src="http://127.0.0.1:8082/dist/hls.js"></script> -->
10
12
  <!--播放器脚本文件-->
11
- <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/tcplayer.v4.7.2.min.js"></script>
13
+ <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v5.0.1/tcplayer.v5.0.1.min.js"></script>
14
+ <!-- <script src="https://vincentlli-1306264703.cos.ap-nanjing.myqcloud.com/tcplayer/tcplayer.v4.8.0.js"></script> -->
15
+ <!-- <script src="https://webrtc-demo.myqcloud.com/pull-sdk/js/vconsole.min.js"></script> -->
16
+ <!-- <script src="http://localhost:8080/dist/tcplayer.v5.0.0.min.js"></script> -->
17
+
18
+
12
19
 
13
20
  <style>
14
21
  html,body{
@@ -46,8 +53,12 @@
46
53
  * 设置 x5-playsinline 属性会使用 X5 UI 的播放器
47
54
  -->
48
55
  <script>
56
+ alert(1)
57
+ // var vConsole = new VConsole();
58
+ // TCPlayer.mountHlsProvider(true);
49
59
  var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
50
- autoplay: true,
60
+ // autoplay: true,
61
+ // language: 'en',
51
62
  // 1. 历史数据，无psign场景
52
63
  // fileID: '5285890799710670616', // 请传入需要播放的视频filID 必须
53
64
  // appID: '1400329073', // 请传入点播账号的appID 必须
@@ -79,7 +90,28 @@
79
90
  fileID: '243791576943072647',
80
91
  appID: '1306264703',
81
92
  psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMwNjI2NDcwMywiZmlsZUlkIjoiMjQzNzkxNTc2OTQzMDcyNjQ3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDQ2OTk3MSwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTMwNjI2NDcwMy52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.FOcmChHfrGY9tYCDn20MSQi-IqvQ9U_U6qLNgx9MhLg',
93
+ // licenseUrl: 'https://license-test.vod2.myqcloud.com/test/license/testV2/1300054025_1/v_cube.license',
94
+ // licenseUrl: 'https://license-test.vod2.myqcloud.com/test/license/testV2/1251132654_1/v_cube.license',
95
+ licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1306264703_1/v_cube.license',
96
+
97
+ // 基础版
98
+ // https://license-test.vod2.myqcloud.com/test/license/testV2/1251132654_1/v_cube.license
99
+
100
+ // 高级版
101
+ // https://license-test.vod2.myqcloud.com/test/license/testV2/1251132654_1/v_cube.license
102
+
103
+
104
+ // licenseUrl: 'https://license-test.vod2.myqcloud.com/test/license/testV2/1300054025_1/v_cube.license',
105
+
106
+ // licenseUrl: 'https://vincentlli-1306264703.cos.ap-nanjing.myqcloud.com/tcplayer/vcube.license',
107
+
108
+
109
+ // fileID: '3270835010498441393',
110
+ // appID: '1500012967',
111
+ // psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAxMjk2NywiZmlsZUlkIjoiMzI3MDgzNTAxMDQ5ODQ0MTM5MyIsImN1cnJlbnRUaW1lU3RhbXAiOjE2ODkwNjY4NzUsImNvbnRlbnRJbmZvIjp7ImF1ZGlvVmlkZW9UeXBlIjoiUHJvdGVjdGVkQWRhcHRpdmUiLCJkcm1BZGFwdGl2ZUluZm8iOnsid2lkZXZpbmVEZWZpbml0aW9uIjoxNDQ0Njc5fX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTUwMDAxMjk2Ny52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFAifX0.kLW4YWXMoomnyzLwzMlLD2jJQnP2NbliQQ33vByC-DI',
112
+
82
113
 
114
+
83
115
  // 7. widevine
84
116
  // fileID: '243791576943072647',
85
117
  // appID: '1306264703',
@@ -95,6 +127,10 @@
95
127
  // appID: '1306264703',
96
128
  // psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMwNjI2NDcwMywiZmlsZUlkIjoiMjQzNzkxNTc2OTQzMDcyNjQ3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDQ3MDAwNiwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJSYXdBZGFwdGl2ZSIsInJhd0FkYXB0aXZlRGVmaW5pdGlvbiI6MTB9LCJ1cmxBY2Nlc3NJbmZvIjp7ImRvbWFpbiI6IjEzMDYyNjQ3MDMudm9kMi5teXFjbG91ZC5jb20iLCJzY2hlbWUiOiJIVFRQUyJ9fQ.-yxAj1SBp-4QK7sC5Sz7E6gFuqRgY06vbN1Nkto0GQA',
97
129
 
130
+ // fileID: '3270835010468833724',
131
+ // appID: '1500012967',
132
+ // psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAxMjk2NywiZmlsZUlkIjoiMzI3MDgzNTAxMDQ2ODgzMzcyNCIsImN1cnJlbnRUaW1lU3RhbXAiOjE2ODkwNDc4ODUsImNvbnRlbnRJbmZvIjp7ImF1ZGlvVmlkZW9UeXBlIjoiUHJvdGVjdGVkQWRhcHRpdmUiLCJkcm1BZGFwdGl2ZUluZm8iOnsid2lkZXZpbmVEZWZpbml0aW9uIjoxNDQ0Njc5fX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTUwMDAxMjk2Ny52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFAifX0.2shCzGjOrRQF_oa5SpBckm08hvX0GhKw6r-K-0K0thc',
133
+
98
134
  // 10. 不加密DASH
99
135
  // fileID: '243791576943072647',
100
136
  // appID: '1306264703',
@@ -104,9 +140,20 @@
104
140
  // appID: '1500005692',
105
141
  // fileID: '387702307006254554',
106
142
  // psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNTY5MiwiZmlsZUlkIjoiMzg3NzAyMzA3MDA2MjU0NTU0IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDMxMDM1MiwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTUwMDAwNTY5Mi52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFAifX0.PFwxL9NNs_gyrR5U3dxwzeip3wZT4M-Fvtd0H2WkjnA',
107
-
143
+ webrtcConfig: {
144
+ connectRetryCount: 10,
145
+ connectRetryDelay: 2,
146
+ signalDomain: {
147
+ protocol: 'http', // todo 现网发布要改
148
+ domain: 'webrtc-play-dev.media-cast.vod-qcloud.com', // todo 现网发布要改
149
+ query: false,
150
+ },
151
+ },
108
152
  //其他参数请在开发文档中查看
109
153
  plugins: {
154
+ // SafeCheck: {
155
+
156
+ // },
110
157
  ContinuePlay: {
111
158
  // auto: true // 是否在播放时自动续播
112
159
  },
@@ -123,12 +170,63 @@
123
170
  }
124
171
  });
125
172
 
173
+
174
+ // setTimeout(() => {
175
+ // console.log('player ori', player);
176
+ // player.loadVideoByID({
177
+ // fileID: '243791576943072647',
178
+ // appID: '1306264703',
179
+ // psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMwNjI2NDcwMywiZmlsZUlkIjoiMjQzNzkxNTc2OTQzMDcyNjQ3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDQ2OTk3MSwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTMwNjI2NDcwMy52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.FOcmChHfrGY9tYCDn20MSQi-IqvQ9U_U6qLNgx9MhLg',
180
+ // });
181
+ // }, 3000);
182
+ // player.src('http://1305533787.vod2.myqcloud.com/6bfcd0cavodtranssgp1305533787/df5fac093270835010461032124/v.f100010.mp4');
183
+
184
+ // player.src('webrtc://global-lebtest-play.myqcloud.com/live/lebtest?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=69f1eb8c');
185
+
186
+ // player.src('http://vincent.pub/live/sei.m3u8');
187
+ // player.src('https://1305071164.vod2.myqcloud.com/0500fb7evodcq1305071164/76cbdeb53270835009987527597/playlist_eof.m3u8');
188
+ // player.src('https://68789.liveplay.myqcloud.com/live/webrtc_demo_1686626553419.flv');
189
+
190
+
191
+ // player.ready(function() {
192
+ // debugger
193
+ // player.tech_.hlsProvider.hls.removeLevel(2)
194
+ // });
195
+
196
+
197
+ player.on('licenseparsed', function(e) {
198
+ console.log('licenseparsed', e.data);
199
+ });
200
+ player.on('hlsInstanceCreated', function(e) {
201
+ console.log('e', e.data.hls);
202
+ });
203
+ player.on('waiting', function(e) {
204
+ console.log('waiting');
205
+ });
206
+ player.on('error', function(e) {
207
+ console.log('e', e);
208
+ });
209
+
210
+ player.on('playcgistart', function(e) {
211
+ console.log('playcgistart', e);
212
+ });
213
+
214
+ player.on('playcgiend', function(e) {
215
+ console.log('playcgiend', e);
216
+ });
217
+
218
+ player.on('pause', function(e) {
219
+ console.log('pause');
220
+ });
221
+
222
+
126
223
  document.getElementById('switch').addEventListener('click', function() {
127
- player.loadVideoByID({
128
- appID: '1500005692',
129
- fileID: '387702307006254554',
130
- psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNTY5MiwiZmlsZUlkIjoiMzg3NzAyMzA3MDA2MjU0NTU0IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDMxMDM1MiwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTUwMDAwNTY5Mi52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFAifX0.PFwxL9NNs_gyrR5U3dxwzeip3wZT4M-Fvtd0H2WkjnA',
131
- });
224
+ player.src('webrtc://68789.liveplay.myqcloud.com/live/webrtc_demo_1688439945507');
225
+ // player.loadVideoByID({
226
+ // appID: '1500005692',
227
+ // fileID: '387702307006254554',
228
+ // psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNTY5MiwiZmlsZUlkIjoiMzg3NzAyMzA3MDA2MjU0NTU0IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDMxMDM1MiwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTUwMDAwNTY5Mi52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFAifX0.PFwxL9NNs_gyrR5U3dxwzeip3wZT4M-Fvtd0H2WkjnA',
229
+ // });
132
230
  });
133
231
  </script>
134
232
  </body>
package/dist/examples/vod/tcplayer-vod-event.html CHANGED
@@ -69,9 +69,10 @@
69
69
  'seeking',
70
70
  'seeked',
71
71
  'ended',
72
+ 'load',
72
73
  'durationchange',
73
- 'timeupdate',
74
- 'progress',
74
+ // 'timeupdate',
75
+ // 'progress',
75
76
  'play',
76
77
  'pause',
77
78
  'ratechange',
@@ -79,8 +80,10 @@
79
80
  'volumechange'
80
81
  ];
81
82
  var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
82
- fileID: '5285890799710670616', // 请传入需要播放的视频filID 必须
83
- appID: '1400329073' // 请传入点播账号的appID 必须
83
+ fileID: '243791576943072647',
84
+ appID: '1306264703',
85
+ psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMwNjI2NDcwMywiZmlsZUlkIjoiMjQzNzkxNTc2OTQzMDcyNjQ3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDQ2OTk3MSwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTMwNjI2NDcwMy52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.FOcmChHfrGY9tYCDn20MSQi-IqvQ9U_U6qLNgx9MhLg',
86
+
84
87
  //其他参数请在开发文档中查看
85
88
  });
86
89
  events.forEach(function(val, i){
package/dist/examples/vod/tcplayer-vod-ghost-watermark.html CHANGED
@@ -6,8 +6,8 @@
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
7
7
  <title>腾讯云视频点播示例</title>
8
8
 
9
- <link href="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.css" rel="stylesheet">
10
- <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/tcplayer.v4.7.2.min.js"></script>
9
+ <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.8.0/tcplayer.min.css" rel="stylesheet">
10
+ <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.8.0/tcplayer.v4.8.0.min.js"></script>
11
11
  <style>
12
12
  html,body{
13
13
  margin: 0;
@@ -37,6 +37,10 @@
37
37
  * 设置 x5-playsinline 属性会使用 X5 UI 的播放器
38
38
  -->
39
39
  <script>
40
+ // 设置首次水印出现的时间，方便观察效果
41
+ // 不设置会在随机时间间歇出现
42
+ localStorage.setItem('ghostWatermarkFirstShow', 0);
43
+
40
44
  // 签名中带有幽灵水印文本
41
45
  var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
42
46
  fileID: '243791576943072647',
package/dist/examples/vod/tcplayer-vod-vr.html ADDED
@@ -0,0 +1,138 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7
+ <meta name="viewport"
8
+ content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
9
+ <title>腾讯云视频点播示例</title>
10
+
11
+
12
+ <link href="https://tcplayer.vcube.tencent.com/tcplayer/release/v4.8.0/tcplayer.min.css" rel="stylesheet" />
13
+ <!-- <script src="http://localhost:8080/libs/plugins/tcplayer-safe-plugin.1.0.0.js"></script>
14
+ <script src="http://localhost:8080/libs/plugins/tcplayer-vr-plugin.1.0.0.js"></script>
15
+ <script src="http://localhost:8080/libs/tcpcrypto.1.0.0.js"></script> -->
16
+ <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.8.0/tcplayer.v4.8.0.min.js"></script>
17
+ <!-- <script src="https://tcplayer.vcube.tencent.com/tcplayer-plugins/tcplayer.v4.8.0.min.js"></script> -->
18
+
19
+
20
+ <!-- <script src="https://webrtc-demo.myqcloud.com/pull-sdk/js/vconsole.min.js"></script> -->
21
+
22
+ <style>
23
+ html,
24
+ body {
25
+ margin: 0;
26
+ padding: 0;
27
+ }
28
+
29
+ .tcplayer {
30
+ margin: 0 auto;
31
+ }
32
+
33
+ @media screen and (max-width: 640px) {
34
+ #player-container-id {
35
+ width: 100%;
36
+ height: 270px;
37
+ }
38
+ }
39
+
40
+ /* 设置logo在高分屏的显示样式 */
41
+ @media only screen and (min-device-pixel-ratio: 2),
42
+ only screen and (-webkit-min-device-pixel-ratio: 2) {
43
+ .tcp-logo-img {
44
+ width: 50%;
45
+ }
46
+ }
47
+ </style>
48
+ </head>
49
+
50
+ <body style="overflow-y: hidden">
51
+ <!-- 设置播放器容器 -->
52
+ <video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline crossorigin="anonymous">
53
+ </video>
54
+
55
+ <button id="enterVR">enterVR</button>
56
+ <button id="exitVR">exitVR</button>
57
+ <button id="enableSensor">enableSensor</button>
58
+ <button id="gyroscopeVR">gyroscope:VR</button>
59
+ <button id="gyroscopeNone">gyroscope:none</button>
60
+ <button id="lookAt">lookAt</button>
61
+
62
+
63
+
64
+ <!--
65
+ 注意事项：
66
+ * 播放器容器必须为 video 标签
67
+ * player-container-id 为播放器容器的ID，可自行设置
68
+ * 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
69
+ * playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
70
+ * 设置 x5-playsinline 属性会使用 X5 UI 的播放器
71
+ -->
72
+
73
+ <script>
74
+ // var vConsole = new VConsole();
75
+ var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
76
+ reportable: false,
77
+
78
+ // 12. vr
79
+ appID: '1500005692',
80
+ fileID: '243791580518143986',
81
+ psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNTY5MiwiZmlsZUlkIjoiMjQzNzkxNTgwNTE4MTQzOTg2IiwiY3VycmVudFRpbWVTdGFtcCI6MTY4MjMzNzM0NywiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTUwMDAwNTY5Mi52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.g6lUJDbNfLmq8vAiC5dn1GlLTw5HT7dUDxSOCDsKALs',
82
+ licenseUrl: 'https://vincentlli-1306264703.cos.ap-nanjing.myqcloud.com/tcplayer/vcube.license',
83
+
84
+ plugins: {
85
+ VR: {
86
+ // isEnableController: true,
87
+ // isEnableZoom: true,
88
+ // yaw: 0,
89
+ // pitch: 0,
90
+ // fov: 65,
91
+ // yawRange: [-180, 180],
92
+ // pitchRange: [-90, 90],
93
+ // fovRange: [30, 110],
94
+ },
95
+ SafeCheck: true,
96
+ }
97
+ });
98
+
99
+ // player.ready(function() {
100
+ // player.loadPlugin();
101
+ // });
102
+
103
+ player.on('error', (err) => {
104
+ console.log('err', err);
105
+ });
106
+
107
+ // mp4 vr
108
+ // player.src('https://1305308197.vod2.myqcloud.com/a3557591vodger1305308197/f7270750243791579800235226/f0.mp4');
109
+
110
+ document.getElementById('enterVR').addEventListener('click', function () {
111
+ player.plugins['VR'].enterVR();
112
+ });
113
+
114
+ document.getElementById('exitVR').addEventListener('click', function () {
115
+ player.plugins['VR'].exitVR();
116
+ });
117
+
118
+ document.getElementById('enableSensor').addEventListener('click', function () {
119
+ player.plugins['VR'].enableSensor();
120
+ });
121
+
122
+ document.getElementById('gyroscopeVR').addEventListener('click', function () {
123
+ player.plugins['VR'].setGyroMode('VR');
124
+ });
125
+
126
+ document.getElementById('gyroscopeNone').addEventListener('click', function () {
127
+ player.plugins['VR'].setGyroMode('none');
128
+ });
129
+
130
+ document.getElementById('lookAt').addEventListener('click', function() {
131
+ player.plugins['VR'].lookAt({yaw: 30}, 1000);
132
+ });
133
+
134
+
135
+ </script>
136
+ </body>
137
+
138
+ </html>
package/dist/examples/webrtc/tcplayer-src-webrtc-abr-new.html ADDED
@@ -0,0 +1,109 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
7
+ <title>腾讯视频云快直播示例</title>
8
+ <!-- 引入播放器 css 文件 -->
9
+ <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.8.0/tcplayer.min.css" rel="stylesheet"/>
10
+ <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.1/vconsole.min.js"></script>
11
+ <!-- 引入播放器 js 文件 -->
12
+ <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.8.0/tcplayer.v4.8.0.min.js"></script>
13
+ <!-- <script src="http://localhost:8080/dist/tcplayer.v4.8.1.js"></script> -->
14
+ <!-- 示例 CSS 样式可自行删除 -->
15
+ <style>
16
+ html,body{
17
+ margin: 0;
18
+ padding: 0;
19
+ }
20
+ .tcplayer {
21
+ margin: 0 auto;
22
+ }
23
+ @media screen and (max-width: 640px) {
24
+ .tcplayer,
25
+ #player-container-id {
26
+ width: 100%;
27
+ height: 270px;
28
+ }
29
+ }
30
+ /* 设置logo在高分屏的显示样式 */
31
+ @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
32
+ .tcp-logo-img {
33
+ width: 50%;
34
+ }
35
+ }
36
+ .button-container{
37
+ text-align: center;
38
+ }
39
+ </style>
40
+ </head>
41
+ <body>
42
+
43
+
44
+ <div id="rate"></div>
45
+ <!-- 设置播放器容器 -->
46
+ <video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
47
+ </video>
48
+
49
+ <script>
50
+ if (TCPlayer.browser.IS_ANDROID || TCPlayer.browser.IS_IOS) {
51
+ const vConsole = new VConsole({ maxLogNumber: 1000 });
52
+ }
53
+
54
+ var player = TCPlayer('player-container-id',{
55
+ // 封面图
56
+ autoplay: true,
57
+ language: 'en',
58
+ // sources: 'webrtc://global-lebtest-play.myqcloud.com/live/lebtest?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=69f1eb8c&tabr_bitrates=d1080p,d540p,d360p&tabr_start_bitrate=d1080p',
59
+ sources: 'webrtc://global-lebtest-play.myqcloud.com/live/lebtest?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=69f1eb8c&tabr_bitrates=d1080p,d540p,d360p&tabr_start_bitrate=d360p&tabr_control=auto',
60
+ // sources: 'webrtc://5664.liveplay.myqcloud.com/live/5664_harchar1?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb',
61
+ // sources: 'webrtc://arrontest.play.elementtest.org/live/shiftTest',
62
+ // sources: [
63
+ // {
64
+ // src: 'webrtc://global-lebtest-play.myqcloud.com/live/lebtest?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=69f1eb8c&tabr_bitrates=d1080p,d540p,d360p&tabr_start_bitrate=d1080p'
65
+ // }
66
+ // ],
67
+
68
+ webrtcConfig: {
69
+ connectRetryCount: 0,
70
+ fallbackUrl: 'https://global-lebtest-play.myqcloud.com/live/lebtest_HLSABR.m3u8',
71
+ enableAbr: true,
72
+ // 模板名对应的label名
73
+ abrLabels: {
74
+ d1080p: 'FHD1',
75
+ d540p: 'HD2',
76
+ d360p: 'SD3',
77
+ auto: 'AUTO4',
78
+ },
79
+ // 参考 快直播 config 说明
80
+ },
81
+ });
82
+
83
+ // player.src([{src: 'webrtc://global-lebtest-play.myqcloud.com/live/lebtest?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=69f1eb8c&tabr_bitrates=d1080p,d540p,d360p&tabr_start_bitrate=d1080p'}])
84
+
85
+ player.on('webrtcevent', function(event) {
86
+ console.log('webrtcEvent', event);
87
+ });
88
+ player.on('webrtcfallback', function(event) {
89
+ console.log('webrtcfallback', event);
90
+ });
91
+
92
+ player.on('webrtceventtest', function(event) {
93
+ console.log('webrtceventtest', event);
94
+ })
95
+
96
+ player.on('webrtcstats', function(data) {
97
+
98
+ try {
99
+ document.getElementById('rate').innerHTML = data.data.video.frameWidth + 'x' + data.data.video.frameHeight;
100
+ } catch (e) {
101
+ console.log('e', e.message);
102
+ }
103
+
104
+ // console.log('data', event, data);
105
+ });
106
+
107
+ </script>
108
+ </body>
109
+ </html>
package/dist/examples/webrtc/tcplayer-src-webrtc-abr.html CHANGED
@@ -9,11 +9,10 @@
9
9
  <link href="https://web.sdk.cloud.tencent.cn/player/tcplayer/release/v4.5.0/tcplayer.min.css" rel="stylesheet">
10
10
  <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.1/vconsole.min.js"></script>
11
11
 
12
- <script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
13
12
  <script src="https://video.sdk.qcloudecdn.com/web/TXLivePlayer-1.2.3.min.js"></script>
14
13
 
15
14
  <!-- 引入播放器 js 文件 -->
16
- <script src="https://testmig-1306264703.cos.ap-guangzhou.myqcloud.com/webrtcabr/tcplayer.v4.5.2.min.js"></script>
15
+ <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.8.0/tcplayer.v4.8.0.min.js"></script>
17
16
  <!-- 示例 CSS 样式可自行删除 -->
18
17
  <style>
19
18
  html,body{