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/vod/tcplayer-vod-enter-full-viewport.html DELETED
@@ -1,87 +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="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.css" rel="stylesheet">
10
- <!-- 如需在IE8、9浏览器中初始化播放器，浏览器需支持Flash并在页面中引入 -->
11
- <!--[if lt IE 9]>
12
- <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/ie8/videojs-ie8.js"></script>
13
- <![endif]-->
14
- <!-- 如果需要在 Chrome Firefox 等现代浏览器中通过H5播放hls，需要引入 hls.js -->
15
- <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
16
- <!-- 引入播放器 js 文件 -->
17
- <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>
18
- <!-- 示例 CSS 样式可自行删除 -->
19
- <style>
20
- html,body{
21
- margin: 0;
22
- padding: 0;
23
- }
24
- .tcplayer {
25
- margin: 0 auto;
26
- }
27
- @media screen and (max-width: 640px) {
28
- #player-container-id {
29
- width: 100%;
30
- height: 270px;
31
- }
32
- }
33
- /* 设置logo在高分屏的显示样式 */
34
- @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
35
- .tcp-logo-img {
36
- width: 50%;
37
- }
38
- }
39
- </style>
40
- </head>
41
- <body>
42
- <!-- 设置播放器容器 -->
43
- <video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
44
- </video>
45
- <!--
46
- 注意事项：
47
- * 播放器容器必须为 video 标签
48
- * player-container-id 为播放器容器的ID，可自行设置
49
- * 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
50
- * playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
51
- * 设置 x5-playsinline 属性会使用 X5 UI 的播放器
52
- -->
53
- <script>
54
-
55
- var FullscreenToggle = TCPlayer.getComponent('FullscreenToggle');
56
- var MyButton = TCPlayer.extend(FullscreenToggle, {
57
- constructor: function() {
58
- FullscreenToggle.apply(this, arguments);
59
- /* initialize your button */
60
- this.addClass('yourClass')
61
- },
62
- handleClick: function() {
63
- // do something on click
64
- if (!this.player_.isFullscreen()) {
65
- this.player_.isFullscreen(true);
66
- this.player_.enterFullWindow();
67
- } else {
68
- this.player_.isFullscreen(false);
69
- this.player_.exitFullWindow();
70
- }
71
- this.player_.trigger('fullscreenchange');
72
- }
73
- });
74
- TCPlayer.registerComponent('MyButton', MyButton);
75
-
76
- var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
77
- fileID: '5285890799710670616', // 请传入需要播放的视频filID 必须
78
- appID: '1400329073', // 请传入点播账号的appID 必须
79
- //其他参数请在开发文档中查看
80
- controlBar: {
81
- fullscreenToggle: false
82
- }
83
- });
84
- player.getChild('controlBar').addChild('myButton', {});
85
- </script>
86
- </body>
87
- </html>
package/dist/examples/vod/tcplayer-vod-event.html DELETED
@@ -1,96 +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="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.css" rel="stylesheet">
10
- <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/libs/vconsole.min.3.3.0.js"></script>
11
- <!-- 如需在IE8、9浏览器中初始化播放器，浏览器需支持Flash并在页面中引入 -->
12
- <!--[if lt IE 9]>
13
- <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/ie8/videojs-ie8.js"></script>
14
- <![endif]-->
15
- <!-- 如果需要在 Chrome Firefox 等现代浏览器中通过H5播放hls，需要引入 hls.js -->
16
- <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
17
- <!-- 引入播放器 js 文件 -->
18
- <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>
19
- <!-- 示例 CSS 样式可自行删除 -->
20
- <style>
21
- html,body{
22
- margin: 0;
23
- padding: 0;
24
- }
25
- .tcplayer {
26
- margin: 0 auto;
27
- }
28
- @media screen and (max-width: 640px) {
29
- #player-container-id {
30
- width: 100%;
31
- height: 270px;
32
- }
33
- }
34
- /* 设置logo在高分屏的显示样式 */
35
- @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
36
- .tcp-logo-img {
37
- width: 50%;
38
- }
39
- }
40
- </style>
41
- </head>
42
- <body>
43
- <!-- 设置播放器容器 -->
44
- <video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
45
- </video>
46
- <!--
47
- 注意事项：
48
- * 播放器容器必须为 video 标签
49
- * player-container-id 为播放器容器的ID，可自行设置
50
- * 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
51
- * playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
52
- * 设置 x5-playsinline 属性会使用 X5 UI 的播放器
53
- -->
54
- <script>
55
- var vConsole = new VConsole();
56
- var events = [
57
- 'loadstart',
58
- 'suspend',
59
- 'abort',
60
- 'error',
61
- 'emptied',
62
- 'stalled',
63
- 'loadedmetadata',
64
- 'loadeddata',
65
- 'canplay',
66
- 'canplaythrough',
67
- 'playing',
68
- 'waiting',
69
- 'seeking',
70
- 'seeked',
71
- 'ended',
72
- 'load',
73
- 'durationchange',
74
- // 'timeupdate',
75
- // 'progress',
76
- 'play',
77
- 'pause',
78
- 'ratechange',
79
- 'resize',
80
- 'volumechange'
81
- ];
82
- var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
83
- fileID: '243791576943072647',
84
- appID: '1306264703',
85
- psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMwNjI2NDcwMywiZmlsZUlkIjoiMjQzNzkxNTc2OTQzMDcyNjQ3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDQ2OTk3MSwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTMwNjI2NDcwMy52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.FOcmChHfrGY9tYCDn20MSQi-IqvQ9U_U6qLNgx9MhLg',
86
-
87
- //其他参数请在开发文档中查看
88
- });
89
- events.forEach(function(val, i){
90
- player.on(val, function (event) {
91
- console.info(val, event);
92
- });
93
- });
94
- </script>
95
- </body>
96
- </html>
package/dist/examples/vod/tcplayer-vod-ghost-watermark.html DELETED
@@ -1,52 +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
-
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
- <style>
12
- html,body{
13
- margin: 0;
14
- padding: 0;
15
- }
16
- .tcplayer {
17
- margin: 0 auto;
18
- }
19
- /* 设置logo在高分屏的显示样式 */
20
- @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
21
- .tcp-logo-img {
22
- width: 50%;
23
- }
24
- }
25
- </style>
26
- </head>
27
- <body>
28
- <!-- 设置播放器容器 -->
29
- <video id="player-container-id" preload="auto" width="740" height="360" playsinline webkit-playsinline>
30
- </video>
31
- <!--
32
- 注意事项：
33
- * 播放器容器必须为 video 标签
34
- * player-container-id 为播放器容器的ID，可自行设置
35
- * 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
36
- * playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
37
- * 设置 x5-playsinline 属性会使用 X5 UI 的播放器
38
- -->
39
- <script>
40
- // 设置首次水印出现的时间，方便观察效果
41
- // 不设置会在随机时间间歇出现
42
- localStorage.setItem('ghostWatermarkFirstShow', 0);
43
-
44
- // 签名中带有幽灵水印文本
45
- var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
46
- fileID: '243791576943072647',
47
- appID: '1306264703',
48
- psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMwNjI2NDcwMywiZmlsZUlkIjoiMjQzNzkxNTc2OTQzMDcyNjQ3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDQ2OTk3MSwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTMwNjI2NDcwMy52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn0sImdob3N0V2F0ZXJtYXJrSW5mbyI6eyJ0ZXh0IjoiZ2hvc3Qgd2F0ZXJtYXJrIHRlc3QhIn19.ULXKWsm1-Uao6a2I3tyAhIoOXCfii5hN0SnCqZeqPrM',
49
- });
50
- </script>
51
- </body>
52
- </html>
package/dist/examples/vod/tcplayer-vod-hls-decrypt-key-tool.html DELETED
@@ -1,215 +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="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.css" rel="stylesheet">
10
- <!-- 如需在IE8、9浏览器中初始化播放器，浏览器需支持Flash并在页面中引入 -->
11
- <!--[if lt IE 9]>
12
- <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/ie8/videojs-ie8.js"></script>
13
- <![endif]-->
14
- <!-- 如果需要在 Chrome Firefox 等现代浏览器中通过H5播放hls，需要引入 hls.js -->
15
- <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
16
- <!-- 引入播放器 js 文件 -->
17
- <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>
18
- <!-- 示例 CSS 样式可自行删除 -->
19
- <style>
20
- html,body{
21
- margin: 0;
22
- padding: 0;
23
- }
24
- @media screen and (max-width: 640px) {
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
- .wrapper {
37
- display: flex;
38
- flex-direction: column;
39
- align-items: center;
40
- padding-top: 30px;
41
- }
42
- .input-wrapper {
43
- display: flex;
44
- flex-direction: column;
45
- margin-bottom: 20px;
46
- }
47
- .input-label {
48
- width: 20%;
49
- }
50
- .input {
51
- width: 80%;
52
- }
53
- .input-property {
54
- display: flex;
55
- width: 300px;
56
- padding-bottom: 20px;
57
- justify-content: space-between;
58
- }
59
- .tcplayer-hls {
60
- background: #1c1c1c;
61
- }
62
- .input-tips {
63
- color: white;
64
- position: absolute;
65
- width: 100%;
66
- height: 100%;
67
- display: flex;
68
- justify-content: center;
69
- align-items: center;
70
- }
71
- .video-wrapper {
72
- position: relative;
73
- width: 640px;
74
- height: 360px;
75
- }
76
- </style>
77
- </head>
78
- <body>
79
- <!-- 设置播放器容器 -->
80
- <div class="wrapper">
81
- <div class="input-wrapper">
82
- <div class="input-property">
83
- <div class="input-label">appID:</div>
84
- <input
85
- class="input"
86
- placeholder="请输入appID"
87
- value=""
88
- id="appID"
89
- required
90
- minlength="10"
91
- maxlength="10"/>
92
- </div>
93
- <div class="input-property">
94
- <div class="input-label">fileID:</div>
95
- <input
96
- class="input"
97
- placeholder="请输入fileID"
98
- value=""
99
- id="fileID"
100
- required
101
- minlength="19"
102
- maxlength="19"/>
103
- </div>
104
- <div class="input-property">
105
- <div class="input-label">psign:</div>
106
- <input
107
- class="input"
108
- placeholder="请输入psign"
109
- value=""
110
- id="psign"/>
111
- </div>
112
- <div class="input-property">
113
- <div style="font-weight: 600;font-size: 16px">
114
- 注：
115
- <a href="https://vods.cloud.tencent.com/signature/super-player-sign.html">点击生成psign</a>
116
- </div>
117
- </div>
118
- <div class="input-property">
119
- <div class="input-label">hlsDebug: </div>
120
- <label for="debug">
121
- <input type="radio" name="debug" value="open" checked=”true”>开启
122
- <input type="radio" name="debug" value="close">关闭
123
- </label>
124
- </div>
125
- <div class="input-property">
126
- <div class="input-label">dkeydebug: </div>
127
- <label for="dkey">
128
- <input type="radio" name="dkey" value="close" checked=”true”>正常解密
129
- <input type="radio" name="dkey" value="open">跳过解密
130
- </label>
131
- </div>
132
- <button id="load-tcplayer">点击加载视频</button>
133
- </div>
134
- <div class="video-wrapper">
135
- <div class="input-tips" id="tips">
136
- 请正确输入相关测试参数后加载视频
137
- </div>
138
- <video id="player-container-id" class="tcplayer-hls" preload="auto" width="640" height="360" playsinline webkit-playsinline>
139
- </video>
140
- </div>
141
- </div>
142
-
143
- <!--
144
- 注意事项：
145
- * 播放器容器必须为 video 标签
146
- * player-container-id 为播放器容器的ID，可自行设置
147
- * 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
148
- * playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
149
- * 设置 x5-playsinline 属性会使用 X5 UI 的播放器
150
- -->
151
- <script>
152
- if(TCPlayer.browser.IS_TBS && Hls.isSupported()){
153
- TCPlayer.mountHlsProvider(true);
154
- }
155
- let loadBtn = document.querySelector('#load-tcplayer')
156
- let appIDInput = document.querySelector('#appID')
157
- let fileIDInput = document.querySelector('#fileID')
158
- let psignInput = document.querySelector('#psign')
159
- let tips = document.querySelector('#tips')
160
- let debugInput = document.getElementsByName("debug")
161
- let dkeyInput = document.getElementsByName("dkey")
162
-
163
- loadBtn.addEventListener('click', function () {
164
-
165
- let appID = appIDInput.value
166
- let fileID = fileIDInput.value
167
- let psign = psignInput.value
168
- let debug = false
169
- for (let i = 0; i < debugInput.length; i++) {
170
- if (debugInput[i].checked && debugInput[i].value === 'open') {
171
- debug = true
172
- }
173
- }
174
- let dkey = false
175
- for (let j = 0; j < dkeyInput.length; j++) {
176
- if (dkeyInput[j].checked && dkeyInput[j].value === 'open') {
177
- dkey = true
178
- }
179
- }
180
-
181
- if (appID.length !== 10 || !/^([1-9][0-9]*)$/.test(appID)) {
182
- alert("appID 输入有误")
183
- appIDInput.value = ''
184
- return
185
- }
186
- if (fileID.length !== 19 || !/^([1-9][0-9]*)$/.test(fileID)) {
187
- alert("fileID 输入有误")
188
- fileIDInput.value = ''
189
- return
190
- }
191
- if (psign.length === 0) {
192
- alert("psign 输入有误")
193
- psignInput.value = ''
194
- return
195
- }
196
- if (appID && fileID && psign) {
197
- var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
198
- fileID: fileID,
199
- appID: appID,
200
- psign: psign,
201
- dKeyDebug: dkey,
202
- hlsConfig: {
203
- debug: debug
204
- }
205
- //其他参数请在开发文档中查看
206
- });
207
- tips.style.display = 'none'
208
- }
209
-
210
-
211
- })
212
-
213
- </script>
214
- </body>
215
- </html>
package/dist/examples/vod/tcplayer-vod-hls-decrypt-key.html DELETED
@@ -1,76 +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="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.css" rel="stylesheet">
10
- <!-- 如需在IE8、9浏览器中初始化播放器，浏览器需支持Flash并在页面中引入 -->
11
- <!--[if lt IE 9]>
12
- <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/ie8/videojs-ie8.js"></script>
13
- <![endif]-->
14
- <!-- 如果需要在 Chrome Firefox 等现代浏览器中通过H5播放hls，需要引入 hls.js -->
15
- <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
16
- <!-- 引入播放器 js 文件 -->
17
- <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>
18
- <!-- 示例 CSS 样式可自行删除 -->
19
- <style>
20
- html,body{
21
- margin: 0;
22
- padding: 0;
23
- }
24
- .tcplayer {
25
- margin: 0 auto;
26
- }
27
- @media screen and (max-width: 640px) {
28
- #player-container-id {
29
- width: 100%;
30
- height: 270px;
31
- }
32
- }
33
- /* 设置logo在高分屏的显示样式 */
34
- @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
35
- .tcp-logo-img {
36
- width: 50%;
37
- }
38
- }
39
- </style>
40
- </head>
41
- <body>
42
- <!-- 设置播放器容器 -->
43
- <video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
44
- </video>
45
- <!--
46
- 注意事项：
47
- * 播放器容器必须为 video 标签
48
- * player-container-id 为播放器容器的ID，可自行设置
49
- * 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
50
- * playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
51
- * 设置 x5-playsinline 属性会使用 X5 UI 的播放器
52
- -->
53
- <script>
54
- if(TCPlayer.browser.IS_TBS && Hls.isSupported()){
55
- TCPlayer.mountHlsProvider(true);
56
- }
57
-
58
- var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
59
- // fileID: '5285890799710670616',
60
- // appID: '1400329073'
61
-
62
- // fileID: '7447398157015849771',
63
- // appID: '1256993030'
64
-
65
- fileID: '5285890800381509430',
66
- appID: '1400329071',
67
- psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTQwMDMyOTA3MSwiZmlsZUlkIjoiNTI4NTg5MDgwMDM4MTUwOTQzMCIsImN1cnJlbnRUaW1lU3RhbXAiOjE1OTIyOTAxMjQsImV4cGlyZVRpbWVTdGFtcCI6MTYyMzgyNjQ2NCwicGNmZyI6ImJhc2ljRHJtUHJlc2V0IiwidXJsQWNjZXNzSW5mbyI6eyJ0IjoiNjBjOWEwMjAifX0.JvUXNKcN5VdrXmb_-YgZVLjawS08fiv12NWmIU9hDPk' // fileID: '5285890799886667885',
68
- // appID: '1400295357'
69
- // ,psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTQwMDI5NTM1NywiZmlsZUlkIjoiNTI4NTg5MDc5OTg4NjY2Nzg4NSIsImN1cnJlbnRUaW1lU3RhbXAiOjEsImV4cGlyZVRpbWVTdGFtcCI6MjE0NzQ4MzY0NywicGNmZyI6IlNpbXBsZUFlc1Rlc3QiLCJ1cmxBY2Nlc3NJbmZvIjp7InQiOiI3ZmZmZmZmZiIsImV4cGVyIjo0MjB9LCJkcm1MaWNlbnNlSW5mbyI6eyJleHBpcmVUaW1lU3RhbXAiOjIxNDc0ODM2NDd9fQ.qRx4BqCRVkjpw52F0ywPAs-ldwuVQNPUfgrLEPh3f7U'
70
-
71
-
72
- //其他参数请在开发文档中查看
73
- });
74
- </script>
75
- </body>
76
- </html>
package/dist/examples/vod/tcplayer-vod-hls-encrypt-private.html DELETED
@@ -1,97 +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.qcloud.com/player/tcplayer/release/v4.3.0/tcplayer.min.css" rel="stylesheet">
10
- <!-- 如需在IE8、9浏览器中初始化播放器，浏览器需支持Flash并在页面中引入 -->
11
- <!--[if lt IE 9]>
12
- <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.3.0/ie8/videojs-ie8.min.js"></script>
13
- <![endif]-->
14
- <!-- 如果需要在 Chrome Firefox 等现代浏览器中通过H5播放hls，需要引入 hls.js -->
15
- <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.3.0/libs/hls.min.0.13.2m.js"></script>
16
- <!-- 引入播放器 js 文件 -->
17
- <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.3.0/tcplayer.v4.3.0.min.js"></script>
18
- <!-- 示例 CSS 样式可自行删除 -->
19
- <style>
20
- html,body{
21
- margin: 0;
22
- padding: 0;
23
- }
24
- .tcplayer {
25
- margin: 0 auto;
26
- }
27
- @media screen and (max-width: 640px) {
28
- #player-container-id {
29
- width: 100%;
30
- height: 270px;
31
- }
32
- }
33
-
34
- </style>
35
- </head>
36
- <body>
37
- <!-- 设置播放器容器 -->
38
- <video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
39
- </video>
40
-
41
- <!--
42
- 注意事项：
43
- * 播放器容器必须为 video 标签
44
- * player-container-id 为播放器容器的ID，可自行设置
45
- * 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
46
- * playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
47
- * 设置 x5-playsinline 属性会使用 X5 UI 的播放器
48
- -->
49
-
50
- <script>
51
-
52
- // https://vods.cloud.tencent.com/signature/super-player-sign.html
53
-
54
- // params3: {
55
- // 1500005696
56
- // 3701925921299637010
57
- // 1626860176
58
- // 2626859179
59
- // private
60
- // 9c92b0ab ().toString(16)
61
- // 2626859179
62
- // 2
63
- // yd02dsLY2GJBvptS9GRe
64
- // }
65
-
66
- // // 不开防盗链
67
- // var params0 = {
68
- // fileID: '3701925919799336043', // 请传入需要播放的视频filID 必须
69
- // appID: '1500005692', // 请传入点播账号的appID 必须
70
- // }
71
-
72
- // // 不加密
73
- // var params1 = { // player-container-id 为播放器容器ID，必须与html中一致
74
- // fileID: '3701925921299637010', // 请传入需要播放的视频filID 必须
75
- // appID: '1500005696', // 请传入点播账号的appID 必须
76
- // psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNTY5NiwiZmlsZUlkIjoiMzcwMTkyNTkyMTI5OTYzNzAxMCIsImN1cnJlbnRUaW1lU3RhbXAiOjE2MjY4NjAxNzYsImV4cGlyZVRpbWVTdGFtcCI6MjYyNjg1OTE3OSwicGNmZyI6ImRlZmF1bHQiLCJ1cmxBY2Nlc3NJbmZvIjp7InQiOiI5YzkyYjBhYiJ9LCJkcm1MaWNlbnNlSW5mbyI6e319.RQvfYWmrFLXghw5QWZ5WE-3jC0eilv69o99DC1A-wx0',
77
- // };
78
-
79
- // // 标准加密
80
- // var params2 = { // player-container-id 为播放器容器ID，必须与html中一致
81
- // fileID: '3701925921299637010', // 请传入需要播放的视频filID 必须
82
- // appID: '1500005696', // 请传入点播账号的appID 必须
83
- // psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNTY5NiwiZmlsZUlkIjoiMzcwMTkyNTkyMTI5OTYzNzAxMCIsImN1cnJlbnRUaW1lU3RhbXAiOjE2MjY4NjAxNzYsImV4cGlyZVRpbWVTdGFtcCI6MjYyNjg1OTE3OSwicGNmZyI6ImJhc2ljRHJtUHJlc2V0IiwidXJsQWNjZXNzSW5mbyI6eyJ0IjoiOWM5MmIwYWIifSwiZHJtTGljZW5zZUluZm8iOnt9fQ.XIO5Aa4Sl6CBHxc6ICJE3g84Xrw4cbrKmpv6CrRsMoQ',
84
- // };
85
-
86
- // 私有加密 计算psign时将 strictMode设置为2
87
- var params3 = { // player-container-id 为播放器容器ID，必须与html中一致
88
- fileID: '3701925921299637010', // 请传入需要播放的视频filID 必须
89
- appID: '1500005696', // 请传入点播账号的appID 必须
90
- psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNTY5NiwiZmlsZUlkIjoiMzcwMTkyNTkyMTI5OTYzNzAxMCIsImN1cnJlbnRUaW1lU3RhbXAiOjE2MjY4NjAxNzYsImV4cGlyZVRpbWVTdGFtcCI6MjYyNjg1OTE3OSwicGNmZyI6InByaXZhdGUiLCJ1cmxBY2Nlc3NJbmZvIjp7InQiOiI5YzkyYjBhYiJ9LCJkcm1MaWNlbnNlSW5mbyI6eyJleHBpcmVUaW1lU3RhbXAiOjI2MjY4NTkxNzksInN0cmljdE1vZGUiOjJ9fQ.Bo5K5ThInc4n8AlzIZQ-CP9a49M2mEr9-zQLH9ocQgI',
91
- };
92
-
93
- var player = TCPlayer('player-container-id', params3);
94
-
95
- </script>
96
- </body>
97
- </html>