tcplayer.js 5.2.0 → 5.3.0-beta.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 (82) hide show
  1. package/dist/font/VideoJS.svg +6 -0
  2. package/dist/font/VideoJS.ttf +0 -0
  3. package/dist/font/VideoJS.woff +0 -0
  4. package/dist/lang/zh-CN.js +4 -0
  5. package/dist/libs/TXLivePlayer-1.3.5.min.js +1 -1
  6. package/dist/tcplayer.min.css +1 -1
  7. package/dist/tcplayer.v5.3.0.min.js +21 -0
  8. package/package.json +3 -3
  9. package/CHANGELOG.md +0 -120
  10. package/dist/console/vod-player-v3.html +0 -125
  11. package/dist/console/vod-player.html +0 -124
  12. package/dist/examples/vod/7447398155146701990.jpg +0 -0
  13. package/dist/examples/vod/7447398155146701990.vtt +0 -301
  14. package/dist/examples/vod/tcplayer-av1.html +0 -123
  15. package/dist/examples/vod/tcplayer-skip.html +0 -105
  16. package/dist/examples/vod/tcplayer-vod-all.html +0 -275
  17. package/dist/examples/vod/tcplayer-vod-audio-tracks.html +0 -66
  18. package/dist/examples/vod/tcplayer-vod-base-flash.html +0 -64
  19. package/dist/examples/vod/tcplayer-vod-base-native-control.html +0 -68
  20. package/dist/examples/vod/tcplayer-vod-base-v4-dash.html +0 -84
  21. package/dist/examples/vod/tcplayer-vod-base-v4-quality-api.html +0 -90
  22. package/dist/examples/vod/tcplayer-vod-base-v4.html +0 -78
  23. package/dist/examples/vod/tcplayer-vod-base.html +0 -76
  24. package/dist/examples/vod/tcplayer-vod-change-file-statistic.html +0 -79
  25. package/dist/examples/vod/tcplayer-vod-change-file.html +0 -76
  26. package/dist/examples/vod/tcplayer-vod-continue-play-by-fileid.html +0 -70
  27. package/dist/examples/vod/tcplayer-vod-continue-play-by-url.html +0 -72
  28. package/dist/examples/vod/tcplayer-vod-costom-host.html +0 -66
  29. package/dist/examples/vod/tcplayer-vod-custom-enter-full-viewport.html +0 -88
  30. package/dist/examples/vod/tcplayer-vod-custom-playcgi.html +0 -60
  31. package/dist/examples/vod/tcplayer-vod-custom-ui.html +0 -98
  32. package/dist/examples/vod/tcplayer-vod-definition.html +0 -71
  33. package/dist/examples/vod/tcplayer-vod-drm-fairplay.html +0 -165
  34. package/dist/examples/vod/tcplayer-vod-drm-token-auto.html +0 -101
  35. package/dist/examples/vod/tcplayer-vod-drm-token.html +0 -156
  36. package/dist/examples/vod/tcplayer-vod-drm-widevine.html +0 -165
  37. package/dist/examples/vod/tcplayer-vod-drm.html +0 -164
  38. package/dist/examples/vod/tcplayer-vod-dynamic-watermark.html +0 -85
  39. package/dist/examples/vod/tcplayer-vod-enter-full-viewport.html +0 -87
  40. package/dist/examples/vod/tcplayer-vod-event.html +0 -96
  41. package/dist/examples/vod/tcplayer-vod-ghost-watermark.html +0 -52
  42. package/dist/examples/vod/tcplayer-vod-hls-decrypt-key-tool.html +0 -215
  43. package/dist/examples/vod/tcplayer-vod-hls-decrypt-key.html +0 -76
  44. package/dist/examples/vod/tcplayer-vod-hls-encrypt-private.html +0 -97
  45. package/dist/examples/vod/tcplayer-vod-hls-encrypt.html +0 -61
  46. package/dist/examples/vod/tcplayer-vod-hls-masterplaylist.html +0 -65
  47. package/dist/examples/vod/tcplayer-vod-hls-token.html +0 -67
  48. package/dist/examples/vod/tcplayer-vod-image-patch.html +0 -66
  49. package/dist/examples/vod/tcplayer-vod-key.html +0 -87
  50. package/dist/examples/vod/tcplayer-vod-level-switch-tips.html +0 -85
  51. package/dist/examples/vod/tcplayer-vod-logo.html +0 -72
  52. package/dist/examples/vod/tcplayer-vod-mirror.html +0 -66
  53. package/dist/examples/vod/tcplayer-vod-mutil.html +0 -68
  54. package/dist/examples/vod/tcplayer-vod-no-control.html +0 -62
  55. package/dist/examples/vod/tcplayer-vod-no-progress.html +0 -64
  56. package/dist/examples/vod/tcplayer-vod-pdt-seek.html +0 -74
  57. package/dist/examples/vod/tcplayer-vod-playlist.html +0 -76
  58. package/dist/examples/vod/tcplayer-vod-preload.html +0 -74
  59. package/dist/examples/vod/tcplayer-vod-progress-marker.html +0 -64
  60. package/dist/examples/vod/tcplayer-vod-refer.html +0 -84
  61. package/dist/examples/vod/tcplayer-vod-size-adaptive.html +0 -70
  62. package/dist/examples/vod/tcplayer-vod-size-full-viewport.html +0 -68
  63. package/dist/examples/vod/tcplayer-vod-size.html +0 -70
  64. package/dist/examples/vod/tcplayer-vod-trial.html +0 -150
  65. package/dist/examples/vod/tcplayer-vod-vr.html +0 -133
  66. package/dist/examples/vod/tcplayer-vod-vtt-thumbnail-src.html +0 -71
  67. package/dist/examples/vod/tcplayer-vod-vtt-thumbnail.html +0 -65
  68. package/dist/examples/vod/tcplayer-vod-x5-playsinline.html +0 -65
  69. package/dist/examples/vod/tcplayer-vod-x5.html +0 -66
  70. package/dist/examples/vod/typlayer-vod-dynamic-init.html +0 -129
  71. package/dist/examples/vod/veplayer.html +0 -38
  72. package/dist/examples/webrtc/tcplayer-src-dynamic.html +0 -92
  73. package/dist/examples/webrtc/tcplayer-src-meeting.html +0 -206
  74. package/dist/examples/webrtc/tcplayer-src-webrtc-abr-new.html +0 -163
  75. package/dist/examples/webrtc/tcplayer-src-webrtc-abr.html +0 -235
  76. package/dist/examples/webrtc/tcplayer-src-webrtc-autoplay.html +0 -124
  77. package/dist/examples/webrtc/tcplayer-src-webrtc-change-src.html +0 -189
  78. package/dist/examples/webrtc/tcplayer-src-webrtc-mutilRes.html +0 -142
  79. package/dist/examples/webrtc/tcplayer-src-webrtc.html +0 -95
  80. package/dist/font/VideoJS.eot +0 -0
  81. package/dist/tcplayer.css +0 -2684
  82. package/dist/tcplayer.v5.2.0.min.js +0 -21
package/dist/examples/webrtc/tcplayer-src-webrtc-abr.html DELETED
@@ -1,235 +0,0 @@
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.cloud.tencent.cn/player/tcplayer/release/v4.5.0/tcplayer.min.css" rel="stylesheet">
10
- <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.1/vconsole.min.js"></script>
11
-
12
- <script src="https://video.sdk.qcloudecdn.com/web/TXLivePlayer-1.2.3.min.js"></script>
13
-
14
- <!-- 引入播放器 js 文件 -->
15
- <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.8.0/tcplayer.v4.8.0.min.js"></script>
16
- <!-- 示例 CSS 样式可自行删除 -->
17
- <style>
18
- html,body{
19
- margin: 0;
20
- padding: 0;
21
- }
22
- .tcplayer {
23
- margin: 0 auto;
24
- }
25
- @media screen and (max-width: 640px) {
26
- .tcplayer,
27
- #player-container-id {
28
- width: 100%;
29
- height: 270px;
30
- }
31
- }
32
- /* 设置logo在高分屏的显示样式 */
33
- @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
34
- .tcp-logo-img {
35
- width: 50%;
36
- }
37
- }
38
- .button-container{
39
- text-align: center;
40
- }
41
- </style>
42
- </head>
43
- <body>
44
-
45
- <button id="other">其他场景流</button>
46
- <button id="1080">1080</button>
47
- <button id="720">720</button>
48
- <button id="540">540</button>
49
- <button id="auto">自动</button>
50
- <br>
51
- 分辨率：
52
- <div id="rate"></div>
53
-
54
-
55
- <!-- 设置播放器容器 -->
56
- <video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
57
- </video>
58
- <!-- <video id="player-native" preload="auto" width="414" height="280" playsinline webkit-playsinline controls
59
- src="https://5664.liveplay.myqcloud.com/live/5664_harchar1.m3u8?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb">
60
- </video> -->
61
- <div class="button-container">
62
- <!-- <button onclick="playFlv()">flv</button> -->
63
- <!-- <button onclick="playHls()">hls</button> -->
64
- <!-- <button onclick="playFail()">模拟快直播-2005事件，降级播放hls</button> -->
65
- <!-- <button onclick="fullscreen()">webkit fullscreen</button> -->
66
- <!-- <button onclick="fullscreen('#player-native')">fullscreen</button> -->
67
- </div>
68
- <!-- <video class="tcplayer" id="player1" preload="auto" width="640" height="360" playsinline webkit-playsinline>
69
- </video> -->
70
- <!-- <video class="tcplayer" id="player2" preload="auto" width="640" height="360" playsinline webkit-playsinline>
71
- </video> -->
72
- <script>
73
- if (TCPlayer.browser.IS_ANDROID || TCPlayer.browser.IS_IOS) {
74
- const vConsole = new VConsole({ maxLogNumber: 1000 });
75
- }
76
-
77
- // webrtc://global-lebtest-play.myqcloud.com/live/lebtest?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=69f1eb8c&tabr_bitrates=deven540p,deven720p,deven1080p&tabr_start_bitrate=deven1080p
78
- // webrtc://global-lebtest-play.myqcloud.com/live/lebtest?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=69f1eb8c&tabr_bitrates=deven540p,deven720p,deven1080p&tabr_start_bitrate=deven720p
79
- // webrtc://global-lebtest-play.myqcloud.com/live/lebtest?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=69f1eb8c&tabr_bitrates=deven540p,deven720p,deven1080p&tabr_start_bitrate=deven540p
80
-
81
- var player = TCPlayer('player-container-id',{
82
- // 封面图
83
- autoplay: true,
84
- // poster:'https://1256993030.vod2.myqcloud.com/20f8b585vodgzp1256993030/0/player/5285890781393938051.png',
85
- multiResolution: {
86
- sources: {
87
- 'FHD': [
88
- {
89
- src: 'webrtc://global-lebtest-play.myqcloud.com/live/lebtest?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=69f1eb8c&tabr_bitrates=deven540p,deven720p,deven1080p&tabr_start_bitrate=deven1080p',
90
- }
91
- ],
92
- 'HD': [
93
- {
94
- src: 'webrtc://global-lebtest-play.myqcloud.com/live/lebtest?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=69f1eb8c&tabr_bitrates=deven540p,deven720p,deven1080p&tabr_start_bitrate=deven720p',
95
- }
96
- ],
97
- 'SD': [
98
- {
99
- src: 'webrtc://global-lebtest-play.myqcloud.com/live/lebtest?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=69f1eb8c&tabr_bitrates=deven540p,deven720p,deven1080p&tabr_start_bitrate=deven540p',
100
- }
101
- ],
102
- 'AUTO': [
103
- {
104
- src: 'webrtc://global-lebtest-play.myqcloud.com/live/lebtest?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=69f1eb8c&tabr_bitrates=deven540p,deven720p,deven1080p&tabr_start_bitrate=deven1080p&tabr_control=auto',
105
- }
106
- ]
107
- },
108
- },
109
- showOrder:['AUTO', 'SD','HD','FHD'],
110
- defaultRes: 'SD',
111
-
112
- // sources: [{
113
- // // 快直播地址
114
- // src: 'webrtc://5664.liveplay.myqcloud.com/live/5664_harchar1?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb'
115
- // },{
116
- // // HLS直播地址
117
- // src: 'https://5664.liveplay.myqcloud.com/live/5664_harchar1.m3u8?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb'
118
- // }],
119
- // 可配置参数说明 https://cloud.tencent.com/document/product/881/30820#options-.E5.8F.82.E6.95.B0.E5.88.97.E8.A1.A8
120
- controlBar: {
121
- // 是否显示进度条
122
- // progressControl:false
123
- },
124
- //
125
- // nativeControlsForTouch:true,
126
- webrtcConfig: {
127
- // 参考 快直播 config 说明
128
- },
129
- hlsConfig: {
130
- // 参考 hls.js config 说明 https://github.com/video-dev/hls.js/blob/f3c6b2712e63ee6ed32957e4035254856d24605e/docs/API.md#fine-tuning
131
- }
132
- });
133
-
134
- document.getElementById('other').addEventListener('click', function() {
135
- player.src('webrtc://5664.liveplay.myqcloud.com/live/5664_harchar1?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb');
136
- });
137
-
138
- document.getElementById('1080').addEventListener('click', function() {
139
- player.src('webrtc://global-lebtest-play.myqcloud.com/live/lebtest?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=69f1eb8c&tabr_bitrates=deven540p,deven720p,deven1080p&tabr_start_bitrate=deven1080p');
140
- });
141
-
142
- document.getElementById('720').addEventListener('click', function() {
143
- player.src('webrtc://global-lebtest-play.myqcloud.com/live/lebtest?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=69f1eb8c&tabr_bitrates=deven540p,deven720p,deven1080p&tabr_start_bitrate=deven720p');
144
- });
145
-
146
- document.getElementById('540').addEventListener('click', function() {
147
- player.src('webrtc://global-lebtest-play.myqcloud.com/live/lebtest?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=69f1eb8c&tabr_bitrates=deven540p,deven720p,deven1080p&tabr_start_bitrate=deven540p');
148
- });
149
-
150
- document.getElementById('auto').addEventListener('click', function() {
151
- player.src('webrtc://global-lebtest-play.myqcloud.com/live/lebtest?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=69f1eb8c&tabr_bitrates=deven540p,deven720p,deven1080p&tabr_start_bitrate=deven1080p&tabr_control=auto');
152
- });
153
-
154
-
155
-
156
- player.on('ready', function() {
157
- console.log('player on ready');
158
- // 禁止拖拽进度条 与隐藏进度条不能同时配置。
159
- // player.controlBar.progressControl.disable();
160
- });
161
-
162
- player.on('webrtcevent', function(event) {
163
- console.log('webrtcEvent', event);
164
- });
165
- player.on('webrtcfallback', function(event) {
166
- console.log('webrtcfallback', event);
167
- });
168
-
169
- player.on('webrtcstats', function(data) {
170
-
171
- try {
172
- document.getElementById('rate').innerHTML = data.data.video.frameWidth + 'x' + data.data.video.frameHeight;
173
- } catch (e) {
174
- console.log('e', e.message);
175
- }
176
-
177
- // console.log('data', event, data);
178
- });
179
-
180
-
181
- // 播放器事件
182
- var events = [
183
- 'loadstart',
184
- 'suspend',
185
- 'abort',
186
- 'error',
187
- 'emptied',
188
- 'stalled',
189
- 'loadedmetadata',
190
- 'loadeddata',
191
- 'canplay',
192
- 'canplaythrough',
193
- 'playing',
194
- 'waiting',
195
- 'seeking',
196
- 'seeked',
197
- 'ended',
198
- 'durationchange',
199
- 'timeupdate',
200
- 'progress',
201
- 'play',
202
- 'pause',
203
- 'ratechange',
204
- 'resize',
205
- 'volumechange'
206
- ];
207
- events.forEach(function(val, i){
208
- player.on(val, function (event) {
209
- if(val !='timeupdate'){
210
- console.log('player event', val);
211
- }
212
- if(val === 'waiting'){
213
- console.log('waiting事件，可以标记为卡顿开始');
214
- }
215
- if(val === 'playing'){
216
- console.log('开始播放或恢复播放，可以标记为卡顿结束');
217
- }
218
- });
219
- });
220
-
221
- function playFail() {
222
- if (player.src().indexOf('webrtc://')===0) {
223
- player.tech(true).webrtcProvider && player.tech(true).webrtcProvider.onPlayEvent(-2005);
224
- }
225
- }
226
- function fullscreen(elementID) {
227
- if (elementID){
228
- document.querySelector(elementID).webkitEnterFullScreen();
229
- return;
230
- }
231
- document.querySelector('video').webkitEnterFullScreen();
232
- }
233
- </script>
234
- </body>
235
- </html>
package/dist/examples/webrtc/tcplayer-src-webrtc-autoplay.html DELETED
@@ -1,124 +0,0 @@
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.cloud.tencent.cn/player/tcplayer/release/v4.5.0/tcplayer.min.css" rel="stylesheet">
10
- <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.1/vconsole.min.js"></script>
11
-
12
- <script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
13
- <!-- <script src="https://cloudcache.tencent-cloud.com/open/qcloud/live/webrtc/js/TXLivePlayer-1.1.0.min.js"></script> -->
14
- <script src="https://wliap-1306264703.cos.ap-nanjing.myqcloud.com/TXLivePlayer-1.2.0.min.js "></script>
15
- <!-- 引入播放器 js 文件 -->
16
- <script src="https://web.sdk.cloud.tencent.cn/player/tcplayer/release/v4.5.0/tcplayer.v4.5.0.min.js"></script>
17
- <!-- 示例 CSS 样式可自行删除 -->
18
- <style>
19
- html,body{
20
- margin: 0;
21
- padding: 0;
22
- }
23
- .tcplayer {
24
- margin: 0 auto;
25
- }
26
- @media screen and (max-width: 640px) {
27
- #player-container-id {
28
- width: 100%;
29
- height: 270px;
30
- }
31
- }
32
- /* 设置logo在高分屏的显示样式 */
33
- @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
34
- .tcp-logo-img {
35
- width: 50%;
36
- }
37
- }
38
- .button-container{
39
- text-align: center;
40
- }
41
- </style>
42
- </head>
43
- <body>
44
-
45
- <!-- 设置播放器容器 -->
46
- <video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
47
- </video>
48
- <div class="button-container">
49
-
50
- </div>
51
- <script>
52
- if (TCPlayer.browser.IS_ANDROID || TCPlayer.browser.IS_IOS) {
53
- const vConsole = new VConsole({ maxLogNumber: 1000 });
54
- }
55
- var events = [
56
- 'loadstart',
57
- 'suspend',
58
- 'abort',
59
- 'error',
60
- 'emptied',
61
- 'stalled',
62
- 'loadedmetadata',
63
- 'loadeddata',
64
- 'canplay',
65
- 'canplaythrough',
66
- 'playing',
67
- 'waiting',
68
- 'seeking',
69
- 'seeked',
70
- 'ended',
71
- 'durationchange',
72
- 'timeupdate',
73
- 'progress',
74
- 'play',
75
- 'pause',
76
- 'ratechange',
77
- 'resize',
78
- 'volumechange'
79
- ];
80
- var player = TCPlayer('player-container-id',{
81
- poster:'https://vodplayerinfo-10005041.file.myqcloud.com/3035579109/vod_paster_pause/paster_pause1469013308.jpg',
82
- autoplay: true,
83
- sources: [{
84
- src: 'webrtc://5664.liveplay.myqcloud.com/live/5664_harchar1?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb'
85
- },{
86
- src: 'https://5664.liveplay.myqcloud.com/live/5664_harchar1.m3u8?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb'
87
- }],
88
-
89
- controlBar: {
90
- // 隐藏进度条
91
- // progressControl:false
92
- },
93
- hlsConfig: {
94
- enableRecoverMediaError: true,
95
- recoverMediaErrorMaxRetry: 5
96
- }
97
- });
98
-
99
- player.on('ready', function() {
100
- console.log('player on ready');
101
- // 禁止拖拽进度条 与隐藏进度条不能同时配置。
102
- // player.controlBar.progressControl.disable();
103
- });
104
-
105
- player.on('webrtcevent', function(event) {
106
- console.log('webrtcEvent', event);
107
- });
108
- events.forEach(function(val, i){
109
- player.on(val, function (event) {
110
- if(val !='timeupdate'){
111
- console.log('player event', val);
112
- }
113
- if(val === 'waiting'){
114
- console.log('卡顿开始，设置标记')
115
- }
116
- if(val === 'playing'){
117
- console.log('开始播放或者标记卡顿结束')
118
- }
119
- });
120
- });
121
-
122
- </script>
123
- </body>
124
- </html>
package/dist/examples/webrtc/tcplayer-src-webrtc-change-src.html DELETED
@@ -1,189 +0,0 @@
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
- <!-- 引入播放器 css 文件 -->
11
- <link href="https://web.sdk.cloud.tencent.cn/player/tcplayer/release/v4.5.3/tcplayer.min.css" rel="stylesheet">
12
- <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.1/vconsole.min.js"></script>
13
-
14
- <script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
15
- <!-- <script src="https://cloudcache.tencent-cloud.com/open/qcloud/live/webrtc/js/TXLivePlayer-1.1.0.min.js"></script> -->
16
- <script src="https://wliap-1306264703.cos.ap-nanjing.myqcloud.com/TXLivePlayer-1.2.0.min.js "></script>
17
- <!-- 引入播放器 js 文件 -->
18
- <!-- <script src="./tcplayer.v4.5.3.js"></script> -->
19
- <script src="../../../dist/tcplayer.v4.5.3.js"></script>
20
- <!-- <script src="https://web.sdk.cloud.tencent.cn/player/tcplayer/release/v4.5.3/tcplayer.v4.5.3.min.js"></script> -->
21
-
22
- <!-- 示例 CSS 样式可自行删除 -->
23
- <style>
24
- html,
25
- body {
26
- margin: 0;
27
- padding: 0;
28
- }
29
-
30
- .tcplayer {
31
- margin: 0 auto;
32
- }
33
-
34
- @media screen and (max-width: 640px) {
35
-
36
- .tcplayer,
37
- #player-container-id {
38
- width: 100%;
39
- height: 270px;
40
- }
41
- }
42
-
43
- /* 设置logo在高分屏的显示样式 */
44
- @media only screen and (min-device-pixel-ratio: 2),
45
- only screen and (-webkit-min-device-pixel-ratio: 2) {
46
- .tcp-logo-img {
47
- width: 50%;
48
- }
49
- }
50
-
51
- .button-container {
52
- text-align: center;
53
- }
54
- </style>
55
- </head>
56
-
57
- <body>
58
-
59
- <!-- 设置播放器容器 -->
60
- <video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
61
- </video>
62
- <!-- <video id="player-native" preload="auto" width="414" height="280" playsinline webkit-playsinline controls
63
- src="https://5664.liveplay.myqcloud.com/live/5664_harchar1.m3u8?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb">
64
- </video> -->
65
- <div class="button-container">
66
- <!-- <button onclick="playFlv()">flv</button> -->
67
- <button onclick="playWebRTC()">WebRTC</button>
68
- <button onclick="playHls()">hls</button>
69
- <button onclick="playMp4()">mp4</button>
70
- <button onclick="playFail()">模拟快直播-2005事件，降级播放hls</button>
71
- <!-- <button onclick="fullscreen()">webkit fullscreen</button> -->
72
- <!-- <button onclick="fullscreen('#player-native')">fullscreen</button> -->
73
- </div>
74
- <!-- <video class="tcplayer" id="player1" preload="auto" width="640" height="360" playsinline webkit-playsinline>
75
- </video> -->
76
- <!-- <video class="tcplayer" id="player2" preload="auto" width="640" height="360" playsinline webkit-playsinline>
77
- </video> -->
78
- <script>
79
- if (TCPlayer.browser.IS_ANDROID || TCPlayer.browser.IS_IOS) {
80
- const vConsole = new VConsole({ maxLogNumber: 1000 });
81
- }
82
-
83
- var player = TCPlayer('player-container-id', {
84
- autoplay: false,
85
- // 封面图
86
- // poster:'https://1256993030.vod2.myqcloud.com/20f8b585vodgzp1256993030/0/player/5285890781393938051.png',
87
- sources: [/* {
88
- // 快直播地址
89
- src: 'webrtc://5664.liveplay.myqcloud.com/live/5664_harchar1?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb'
90
- },{
91
- // HLS直播地址
92
- src: 'https://5664.liveplay.myqcloud.com/live/5664_harchar1.m3u8?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb'
93
- }, */{
94
- // src: 'https://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f40.mp4'
95
- src: 'https://5664.liveplay.myqcloud.com/live/5664_harchar1.m3u8?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb'
96
- }],
97
- // 可配置参数说明 https://cloud.tencent.com/document/product/881/30820#options-.E5.8F.82.E6.95.B0.E5.88.97.E8.A1.A8
98
- controlBar: {
99
- // 是否显示进度条
100
- // progressControl:false
101
- },
102
- //
103
- // nativeControlsForTouch:true,
104
- webrtcConfig: {
105
- // 参考 快直播 config 说明
106
- },
107
- hlsConfig: {
108
- // 参考 hls.js config 说明 https://github.com/video-dev/hls.js/blob/f3c6b2712e63ee6ed32957e4035254856d24605e/docs/API.md#fine-tuning
109
- }
110
- });
111
-
112
- player.on('ready', function () {
113
- console.log('player on ready');
114
- // 禁止拖拽进度条 与隐藏进度条不能同时配置。
115
- // player.controlBar.progressControl.disable();
116
- });
117
-
118
- player.on('webrtcevent', function (event) {
119
- console.log('webrtcEvent', event);
120
- });
121
- player.on('webrtcfallback', function (event) {
122
- console.log('webrtcfallback', event);
123
- });
124
-
125
- // 播放器事件
126
- var events = [
127
- 'loadstart',
128
- 'suspend',
129
- 'abort',
130
- 'error',
131
- 'emptied',
132
- 'stalled',
133
- 'loadedmetadata',
134
- 'loadeddata',
135
- 'canplay',
136
- 'canplaythrough',
137
- 'playing',
138
- 'waiting',
139
- 'seeking',
140
- 'seeked',
141
- 'ended',
142
- 'durationchange',
143
- 'timeupdate',
144
- 'progress',
145
- 'play',
146
- 'pause',
147
- 'ratechange',
148
- 'resize',
149
- 'volumechange'
150
- ];
151
- events.forEach(function (val, i) {
152
- player.on(val, function (event) {
153
- if (val != 'timeupdate') {
154
- console.log('player event', val);
155
- }
156
- if (val === 'waiting') {
157
- console.log('waiting事件，可以标记为卡顿开始');
158
- }
159
- if (val === 'playing') {
160
- console.log('开始播放或恢复播放，可以标记为卡顿结束');
161
- }
162
- });
163
- });
164
-
165
- function playFail() {
166
- if (player.src().indexOf('webrtc://') === 0) {
167
- player.tech(true).webrtcProvider && player.tech(true).webrtcProvider.onPlayEvent(-2005);
168
- }
169
- }
170
- function fullscreen(elementID) {
171
- if (elementID) {
172
- document.querySelector(elementID).webkitEnterFullScreen();
173
- return;
174
- }
175
- document.querySelector('video').webkitEnterFullScreen();
176
- }
177
- function playHls() {
178
- player.src('https://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/adp.10.m3u8');
179
- }
180
- function playMp4() {
181
- player.src('https://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f40.mp4');
182
- }
183
- function playWebRTC() {
184
- player.src('webrtc://5664.liveplay.myqcloud.com/live/5664_harchar1?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb');
185
- }
186
- </script>
187
- </body>
188
-
189
- </html>
package/dist/examples/webrtc/tcplayer-src-webrtc-mutilRes.html DELETED
@@ -1,142 +0,0 @@
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.cloud.tencent.cn/player/tcplayer/release/v4.5.0/tcplayer.min.css" rel="stylesheet">
10
- <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.1/vconsole.min.js"></script>
11
-
12
- <script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
13
- <!-- <script src="https://cloudcache.tencent-cloud.com/open/qcloud/live/webrtc/js/TXLivePlayer-1.1.0.min.js"></script> -->
14
- <script src="https://wliap-1306264703.cos.ap-nanjing.myqcloud.com/TXLivePlayer-1.2.0.min.js "></script>
15
- <!-- 引入播放器 js 文件 -->
16
- <script src="https://web.sdk.cloud.tencent.cn/player/tcplayer/release/v4.5.0/tcplayer.v4.5.0.min.js"></script>
17
- <!-- 示例 CSS 样式可自行删除 -->
18
- <style>
19
- html,body{
20
- margin: 0;
21
- padding: 0;
22
- }
23
- .tcplayer {
24
- margin: 0 auto;
25
- }
26
- @media screen and (max-width: 640px) {
27
- #player-container-id {
28
- width: 100%;
29
- height: 270px;
30
- }
31
- }
32
- /* 设置logo在高分屏的显示样式 */
33
- @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
34
- .tcp-logo-img {
35
- width: 50%;
36
- }
37
- }
38
- .button-container{
39
- text-align: center;
40
- }
41
- </style>
42
- </head>
43
- <body>
44
-
45
- <!-- 设置播放器容器 -->
46
- <video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
47
- </video>
48
- <div class="button-container">
49
-
50
- </div>
51
- <script>
52
- if (TCPlayer.browser.IS_ANDROID || TCPlayer.browser.IS_IOS) {
53
- const vConsole = new VConsole({ maxLogNumber: 1000 });
54
- }
55
- var events = [
56
- 'loadstart',
57
- 'suspend',
58
- 'abort',
59
- 'error',
60
- 'emptied',
61
- 'stalled',
62
- 'loadedmetadata',
63
- 'loadeddata',
64
- 'canplay',
65
- 'canplaythrough',
66
- 'playing',
67
- 'waiting',
68
- 'seeking',
69
- 'seeked',
70
- 'ended',
71
- 'durationchange',
72
- 'timeupdate',
73
- 'progress',
74
- 'play',
75
- 'pause',
76
- 'ratechange',
77
- 'resize',
78
- 'volumechange'
79
- ];
80
- var player = TCPlayer('player-container-id',{
81
- poster:'https://vodplayerinfo-10005041.file.myqcloud.com/3035579109/vod_paster_pause/paster_pause1469013308.jpg',
82
- // autoplay: true,
83
- multiResolution:{
84
- sources:{
85
- 'SD':[
86
- {
87
- src: 'webrtc://5664.liveplay.myqcloud.com/live/5664_harchar1?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb',
88
- }
89
- ],
90
- 'HD':[
91
- {
92
- src: 'webrtc://5664.liveplay.myqcloud.com/live/5664_harchar1?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb',
93
- }
94
- ],
95
- 'FHD':[
96
- {
97
- src: 'webrtc://5664.liveplay.myqcloud.com/live/5664_harchar1?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb',
98
- }
99
- ]
100
- },
101
- // labels:{
102
- // 'SD':'标清','HD':'高清','FHD':'超清'
103
- // },
104
- showOrder:['SD','HD','FHD'],
105
- defaultRes: 'SD'
106
- },
107
- controlBar: {
108
- // 隐藏进度条
109
- // progressControl:false
110
- },
111
- hlsConfig: {
112
- enableRecoverMediaError: true,
113
- recoverMediaErrorMaxRetry: 5
114
- }
115
- });
116
-
117
- player.on('ready', function() {
118
- console.log('player on ready');
119
- // 禁止拖拽进度条 与隐藏进度条不能同时配置。
120
- // player.controlBar.progressControl.disable();
121
- });
122
-
123
- player.on('webrtcevent', function(event) {
124
- console.log('webrtcEvent', event);
125
- });
126
- events.forEach(function(val, i){
127
- player.on(val, function (event) {
128
- if(val !='timeupdate'){
129
- console.log('player event', val);
130
- }
131
- if(val === 'waiting'){
132
- console.log('waiting事件，可以标记为卡顿开始');
133
- }
134
- if(val === 'playing'){
135
- console.log('开始播放或恢复播放，可以标记为卡顿结束');
136
- }
137
- });
138
- });
139
-
140
- </script>
141
- </body>
142
- </html>