tcplayer.js 5.2.0-beta.1 → 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 (80) 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/dist/console/vod-player-v3.html +0 -125
  10. package/dist/console/vod-player.html +0 -124
  11. package/dist/examples/vod/7447398155146701990.jpg +0 -0
  12. package/dist/examples/vod/7447398155146701990.vtt +0 -301
  13. package/dist/examples/vod/tcplayer-av1.html +0 -123
  14. package/dist/examples/vod/tcplayer-skip.html +0 -105
  15. package/dist/examples/vod/tcplayer-vod-all.html +0 -273
  16. package/dist/examples/vod/tcplayer-vod-audio-tracks.html +0 -66
  17. package/dist/examples/vod/tcplayer-vod-base-flash.html +0 -64
  18. package/dist/examples/vod/tcplayer-vod-base-native-control.html +0 -68
  19. package/dist/examples/vod/tcplayer-vod-base-v4-dash.html +0 -84
  20. package/dist/examples/vod/tcplayer-vod-base-v4-quality-api.html +0 -90
  21. package/dist/examples/vod/tcplayer-vod-base-v4.html +0 -78
  22. package/dist/examples/vod/tcplayer-vod-base.html +0 -76
  23. package/dist/examples/vod/tcplayer-vod-change-file-statistic.html +0 -79
  24. package/dist/examples/vod/tcplayer-vod-change-file.html +0 -76
  25. package/dist/examples/vod/tcplayer-vod-continue-play-by-fileid.html +0 -70
  26. package/dist/examples/vod/tcplayer-vod-continue-play-by-url.html +0 -72
  27. package/dist/examples/vod/tcplayer-vod-costom-host.html +0 -66
  28. package/dist/examples/vod/tcplayer-vod-custom-enter-full-viewport.html +0 -88
  29. package/dist/examples/vod/tcplayer-vod-custom-playcgi.html +0 -60
  30. package/dist/examples/vod/tcplayer-vod-custom-ui.html +0 -98
  31. package/dist/examples/vod/tcplayer-vod-definition.html +0 -71
  32. package/dist/examples/vod/tcplayer-vod-drm-fairplay.html +0 -165
  33. package/dist/examples/vod/tcplayer-vod-drm-token-auto.html +0 -101
  34. package/dist/examples/vod/tcplayer-vod-drm-token.html +0 -156
  35. package/dist/examples/vod/tcplayer-vod-drm-widevine.html +0 -165
  36. package/dist/examples/vod/tcplayer-vod-drm.html +0 -164
  37. package/dist/examples/vod/tcplayer-vod-dynamic-watermark.html +0 -85
  38. package/dist/examples/vod/tcplayer-vod-enter-full-viewport.html +0 -87
  39. package/dist/examples/vod/tcplayer-vod-event.html +0 -96
  40. package/dist/examples/vod/tcplayer-vod-ghost-watermark.html +0 -52
  41. package/dist/examples/vod/tcplayer-vod-hls-decrypt-key-tool.html +0 -215
  42. package/dist/examples/vod/tcplayer-vod-hls-decrypt-key.html +0 -76
  43. package/dist/examples/vod/tcplayer-vod-hls-encrypt-private.html +0 -97
  44. package/dist/examples/vod/tcplayer-vod-hls-encrypt.html +0 -61
  45. package/dist/examples/vod/tcplayer-vod-hls-masterplaylist.html +0 -65
  46. package/dist/examples/vod/tcplayer-vod-hls-token.html +0 -67
  47. package/dist/examples/vod/tcplayer-vod-image-patch.html +0 -66
  48. package/dist/examples/vod/tcplayer-vod-key.html +0 -87
  49. package/dist/examples/vod/tcplayer-vod-level-switch-tips.html +0 -85
  50. package/dist/examples/vod/tcplayer-vod-logo.html +0 -72
  51. package/dist/examples/vod/tcplayer-vod-mirror.html +0 -66
  52. package/dist/examples/vod/tcplayer-vod-mutil.html +0 -68
  53. package/dist/examples/vod/tcplayer-vod-no-control.html +0 -62
  54. package/dist/examples/vod/tcplayer-vod-no-progress.html +0 -64
  55. package/dist/examples/vod/tcplayer-vod-pdt-seek.html +0 -74
  56. package/dist/examples/vod/tcplayer-vod-playlist.html +0 -76
  57. package/dist/examples/vod/tcplayer-vod-preload.html +0 -74
  58. package/dist/examples/vod/tcplayer-vod-progress-marker.html +0 -64
  59. package/dist/examples/vod/tcplayer-vod-refer.html +0 -84
  60. package/dist/examples/vod/tcplayer-vod-size-adaptive.html +0 -70
  61. package/dist/examples/vod/tcplayer-vod-size-full-viewport.html +0 -68
  62. package/dist/examples/vod/tcplayer-vod-size.html +0 -70
  63. package/dist/examples/vod/tcplayer-vod-trial.html +0 -150
  64. package/dist/examples/vod/tcplayer-vod-vr.html +0 -133
  65. package/dist/examples/vod/tcplayer-vod-vtt-thumbnail-src.html +0 -71
  66. package/dist/examples/vod/tcplayer-vod-vtt-thumbnail.html +0 -65
  67. package/dist/examples/vod/tcplayer-vod-x5-playsinline.html +0 -65
  68. package/dist/examples/vod/tcplayer-vod-x5.html +0 -66
  69. package/dist/examples/vod/typlayer-vod-dynamic-init.html +0 -129
  70. package/dist/examples/webrtc/tcplayer-src-dynamic.html +0 -92
  71. package/dist/examples/webrtc/tcplayer-src-meeting.html +0 -206
  72. package/dist/examples/webrtc/tcplayer-src-webrtc-abr-new.html +0 -163
  73. package/dist/examples/webrtc/tcplayer-src-webrtc-abr.html +0 -235
  74. package/dist/examples/webrtc/tcplayer-src-webrtc-autoplay.html +0 -124
  75. package/dist/examples/webrtc/tcplayer-src-webrtc-change-src.html +0 -189
  76. package/dist/examples/webrtc/tcplayer-src-webrtc-mutilRes.html +0 -142
  77. package/dist/examples/webrtc/tcplayer-src-webrtc.html +0 -90
  78. package/dist/font/VideoJS.eot +0 -0
  79. package/dist/tcplayer.css +0 -2684
  80. package/dist/tcplayer.v5.2.0.min.js +0 -20
package/dist/examples/vod/tcplayer-vod-drm-token.html DELETED
@@ -1,156 +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 Dash，需要引入 hls.js dash.js -->
16
- <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.12.4.js"></script>
17
- <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/libs/dash.all.min.2.9.3.js"></script>
18
- <!-- 引入播放器 js 文件 -->
19
- <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.js"></script>
20
- <!-- 示例 CSS 样式可自行删除 -->
21
- <style>
22
- html,body{
23
- margin: 0;
24
- padding: 0;
25
- }
26
- .tcplayer {
27
- margin: 0 auto;
28
- }
29
- @media screen and (max-width: 640px) {
30
- #player-container-id {
31
- width: 100%;
32
- height: 270px;
33
- }
34
- }
35
- /* 设置logo在高分屏的显示样式 */
36
- @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
37
- .tcp-logo-img {
38
- width: 50%;
39
- }
40
- }
41
- .form-control{
42
- border-radius: 0px;
43
- width: 300px;
44
- height: 30px;
45
- display: block;
46
- margin: 10px;
47
- }
48
- button{
49
- margin: 0 10px;
50
- }
51
- </style>
52
- </head>
53
- <body>
54
-
55
- <input class="form-control" type="text" placeholder="appID" id="appID" value="1256468886">
56
- <input class="form-control" type="text" placeholder="fileID" id="fileID" value="5285890787511552106">
57
- <input class="form-control" type="text" placeholder="playDefinition" id="playDefinition" value="20">
58
- <input class="form-control" type="text" placeholder="t" id="t" value="">
59
- <input class="form-control" type="text" placeholder="us" id="us" value="">
60
- <input class="form-control" type="text" placeholder="sign" id="sign" value="">
61
- <input class="form-control" type="text" placeholder="certificateUri" id="certificateUri">
62
- <input class="form-control" type="text" placeholder="token" id="token">
63
- <button type="button" id="btn-get-token">Step 1 Get token</button>
64
- <button type="button" id="btn-load-video">Step 2 Load Video</button>
65
- <!-- 设置播放器容器 -->
66
- <video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
67
- </video>
68
- <!--
69
- 注意事项：
70
- * 播放器容器必须为 video 标签
71
- * player-container-id 为播放器容器的ID，可自行设置
72
- * 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
73
- * playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
74
- * 设置 x5-playsinline 属性会使用 X5 UI 的播放器
75
- -->
76
- <script>
77
- console.log(navigator.userAgent, TCPlayer.browser, window.navigator.requestMediaKeySystemAccess);
78
-
79
- var widevineOptions = [
80
- {
81
- // initDataTypes: ['keyids', 'webm'],
82
- initDataTypes: ['cenc', 'webm', 'mp4'],
83
- audioCapabilities: [
84
- { contentType: 'audio/mp4; codecs="mp4a.40.2"'},
85
- { contentType: 'audio/webm; codecs="opus"' },
86
- { contentType: 'audio/webm; codecs="vorbis"' }
87
- ],
88
- videoCapabilities: [
89
- { contentType: 'video/mp4; codecs="avc1.42c01e"'},
90
- { contentType: 'video/webm; codecs="vp9"' , robustness: 'foo'},
91
- { contentType: 'video/webm; codecs="vp8"' , robustness: 'bar'}
92
- ]
93
- }
94
- ];
95
- try {
96
- navigator.requestMediaKeySystemAccess('com.widevine.alpha', widevineOptions).then(function (keySystemAccess) {
97
- console.log(keySystemAccess.getConfiguration())
98
- }).catch(function (e) {
99
- console.log(e);
100
- return false;
101
- });
102
- } catch (e) {
103
- console.log(e);
104
- }
105
- var t,
106
- us,
107
- sign;
108
-
109
- var player = TCPlayer('player-container-id', {
110
- Html5: {
111
- nativeTextTracks: false
112
- },
113
- plugins: {
114
- DRM: true,
115
- ProgressMarker: {},
116
- }
117
- });
118
- var btnGetToken = document.querySelector('#btn-get-token');
119
- btnGetToken.addEventListener('click', function () {
120
- var request = new XMLHttpRequest();
121
- request.addEventListener('load', function (event) {
122
- document.querySelector('#token').value = event.target.response;
123
- }, false);
124
- request.open('GET', 'https://demo.vod2.myqcloud.com/drm/gettoken?fileId='+document.querySelector('#fileID').value+'&appId='+document.querySelector('#appID').value, true);
125
- request.send();
126
- });
127
-
128
- var btnLoadVideo = document.querySelector('#btn-load-video');
129
- btnLoadVideo.addEventListener('click', function () {
130
- if (!document.querySelector('#token').value) {
131
- return
132
- }
133
-
134
- t = document.querySelector('#t').value;
135
- us = document.querySelector('#us').value;
136
- sign = document.querySelector('#sign').value;
137
-
138
- player.DRM().setOptions({
139
- token: document.querySelector('#token').value,
140
- certificateUri: document.querySelector('#certificateUri').value || 'https://5000.drm.myqcloud.com/huaxida_test/fairplay.cer',
141
- });
142
-
143
- player.loadVideoByID({
144
- fileID: document.querySelector('#fileID').value || '15517827183920333646', // 请传入需要播放的视频filID 必须
145
- appID: document.querySelector('#appID').value || '1253039488' // 请传入点播账号的appID 必须
146
- ,playDefinition: document.querySelector('#playDefinition').value || '10'
147
- ,t: t
148
- ,us: us
149
- ,sign: sign
150
- })
151
- });
152
-
153
- </script>
154
-
155
- </body>
156
- </html>
package/dist/examples/vod/tcplayer-vod-drm-widevine.html DELETED
@@ -1,165 +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 Dash，需要引入 hls.js dash.js -->
16
- <!-- <script src="https://testmig-1306264703.cos.ap-guangzhou.myqcloud.com/wm/hls.js"></script> -->
17
-
18
- <!-- <script src="https://hls-js.netlify.app/dist/hls.js"></script> -->
19
-
20
- <script src="https://testmig-1306264703.cos.ap-guangzhou.myqcloud.com/wm/hls.js"></script>
21
-
22
-
23
- <!-- <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script> -->
24
-
25
- <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/libs/dash.all.min.2.9.3.js"></script>
26
- <!-- 引入播放器 js 文件 -->
27
- <!-- <script src="http://localhost:8081/dist/tcplayer.v4.5.1.js"></script> -->
28
- <script src="https://testmig-1306264703.cos.ap-guangzhou.myqcloud.com/drm3/tcplayer.v4.5.1.js"></script>
29
-
30
- <!-- 示例 CSS 样式可自行删除 -->
31
- <style>
32
- html,body{
33
- margin: 0;
34
- padding: 0;
35
- }
36
- .tcplayer {
37
- margin: 0 auto;
38
- }
39
- @media screen and (max-width: 640px) {
40
- #player-container-id {
41
- width: 100%;
42
- height: 270px;
43
- }
44
- }
45
- /* 设置logo在高分屏的显示样式 */
46
- @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
47
- .tcp-logo-img {
48
- width: 50%;
49
- }
50
- }
51
- .form-control{
52
- border-radius: 0px;
53
- width: 300px;
54
- height: 30px;
55
- display: block;
56
- margin: 10px;
57
- }
58
- button{
59
- margin: 0 10px;
60
- }
61
- </style>
62
- </head>
63
- <body>
64
- <!-- 设置播放器容器 -->
65
- <video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
66
- </video>
67
- <!--
68
- 注意事项：
69
- * 播放器容器必须为 video 标签
70
- * player-container-id 为播放器容器的ID，可自行设置
71
- * 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
72
- * playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
73
- * 设置 x5-playsinline 属性会使用 X5 UI 的播放器
74
- -->
75
- <script>
76
- var vConsole = new VConsole();
77
-
78
- var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
79
-
80
- // widevine hls 1
81
- appID: '1500012293', // 请传入点播账号的appID 必须
82
- fileID: '387702299520678240', // 请传入需要播放的视频filID 必须
83
- psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAxMjI5MywiZmlsZUlkIjoiMzg3NzAyMjk5NTIwNjc4MjQwIiwiY3VycmVudFRpbWVTdGFtcCI6MTY1MDQ0MTg2NCwicGNmZyI6IndpZGV2aW5laGxzIiwidXJsQWNjZXNzSW5mbyI6e30sImRybUxpY2Vuc2VJbmZvIjp7fX0.0IKncrqPTdnuVBFMD4hGoXyTlrOwSlw8x7yW4uIEmzE',
84
- //其他参数请在开发文档中查看
85
-
86
- // widevine hls 2
87
- // appID: '1500012293', // 请传入点播账号的appID 必须
88
- // fileID: '387702299658017544',
89
- // psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAxMjI5MywiZmlsZUlkIjoiMzg3NzAyMjk5NjU4MDE3NTQ0IiwiY3VycmVudFRpbWVTdGFtcCI6MTY1MDYxMTUxMCwicGNmZyI6IndpZGV2aW5laGxzIiwidXJsQWNjZXNzSW5mbyI6e30sImRybUxpY2Vuc2VJbmZvIjp7fX0.zAh5g8BmTYtosXnM642uqcSSwSmtUq2npfFZU5VI4k8',
90
-
91
- // widevine dash
92
- // appID: '1500012293', // 请传入点播账号的appID 必须
93
- // fileID: '387702299658017544',
94
- // psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAxMjI5MywiZmlsZUlkIjoiMzg3NzAyMjk5NjU4MDE3NTQ0IiwiY3VycmVudFRpbWVTdGFtcCI6MTY1MDYxMTUxMCwicGNmZyI6IndpZGV2aW5lZGFzaCIsInVybEFjY2Vzc0luZm8iOnt9LCJkcm1MaWNlbnNlSW5mbyI6e319.AmJh4Nm3kZt_sQ-5CZ-yZLkYEnGoIkvulzYuBRFlGd0',
95
-
96
- // fairplay hls
97
- // appID: '1500012293', // 请传入点播账号的appID 必须
98
- // fileID: '387702299658017544',
99
- // psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAxMjI5MywiZmlsZUlkIjoiMzg3NzAyMjk5NjU4MDE3NTQ0IiwiY3VycmVudFRpbWVTdGFtcCI6MTY1MDYxMTUxMCwicGNmZyI6ImZhaXJwbGF5aGxzIiwidXJsQWNjZXNzSW5mbyI6e30sImRybUxpY2Vuc2VJbmZvIjp7fX0.O4P15WUAN3i5bAeiJTSus9RFvFC9sVZzA_DxiEnFlJ4',
100
-
101
- // alldrm
102
- // appID: '1500012293', // 请传入点播账号的appID 必须
103
- // fileID: '387702299658017544',
104
- // psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAxMjI5MywiZmlsZUlkIjoiMzg3NzAyMjk5NjU4MDE3NTQ0IiwiY3VycmVudFRpbWVTdGFtcCI6MTY1MDYxMTUxMCwicGNmZyI6ImFsbGRybSIsInVybEFjY2Vzc0luZm8iOnt9LCJkcm1MaWNlbnNlSW5mbyI6e319.3ki3MGF6pjc7B5eImKOYVNPdvaLh057qsx300wwK-oA',
105
-
106
- // fileID: "387702296829661431",
107
- // appID: "1400177511",
108
- // psign:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTQwMDE3NzUxMSwiZmlsZUlkIjoiMzg3NzAyMjk2ODI5NjYxNDMxIiwiY3VycmVudFRpbWVTdGFtcCI6MTY1MDUzNzY4OSwidXJsQWNjZXNzSW5mbyI6e30sImRybUxpY2Vuc2VJbmZvIjp7fX0.zG9mFJdZfFH5NhvLVvc1BlEhAiRLL0u2BhFIcoSOmH4",
109
- plugins: {
110
- // DRM: {
111
- // certificateUri: 'https://cert.drm.vod-qcloud.com/cert/v1/ca19f2033ba3c5c0350ec6cba3df579f/fairplay.cer',
112
- // },
113
- ProgressMarker: true,
114
- ContextMenu: {
115
- statistic: true,
116
- levelSwitch: {
117
- open: true, // 打开切换提示
118
- // switchingText: '开始', // 开始切换时文案
119
- // switchedText: '成功', // 切换成功时文案
120
- // switchErrorText: '失败', // 切换失败时文案
121
- }
122
- }
123
- }
124
- });
125
-
126
- player.on('ended', function() {
127
- console.log('ended');
128
- })
129
-
130
- // var vConsole = new VConsole();
131
-
132
- // var player,
133
- // fileID = '5285890787511552106',
134
- // appID = '1256468886',
135
- // playDefinition = '20',
136
- // request = new XMLHttpRequest();
137
- // /**
138
- // * 播放DRM内容有一下两个步骤
139
- // * 1. 获取播放 DRM 内容用到的 token
140
- // * 2. 将准备好的参数传递给播放器进行初始化
141
- // */
142
- // request.addEventListener('load', function (event) {
143
- // player = TCPlayer('player-container-id', {
144
- // appID: appID, // 请传入点播账号的appID 必须
145
- // fileID: fileID // 请传入需要播放的视频filID 必须
146
- // // ,playDefinition: playDefinition // 请传入播放模版 必须 关于播放模版请看 **链接**
147
- // ,Html5: {
148
- // nativeTextTracks: false // 在 safari 开启支持 webvtt 解析
149
- // },
150
- // plugins: {
151
- // // DRM: {
152
- // // token: event.target.response, // 传入您的后台服务签发的 token
153
- // // certificateUri: 'https://5000.drm.myqcloud.com/huaxida_test/fairplay.cer', // 传入 Fairplay 播放需要用到的证书地址
154
- // // },
155
- // ProgressMarker: {},
156
- // }
157
- // });
158
-
159
- // }, false);
160
- // request.open('GET', 'https://demo.vod2.myqcloud.com/drm/gettoken?fileId='+fileID+'&appId='+appID, true); // 去您的 token 签发服务地址获取token
161
- // request.send();
162
-
163
- </script>
164
- </body>
165
- </html>
package/dist/examples/vod/tcplayer-vod-drm.html DELETED
@@ -1,164 +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 Dash，需要引入 hls.js dash.js -->
16
- <!-- <script src="https://testmig-1306264703.cos.ap-guangzhou.myqcloud.com/wm/hls.js"></script> -->
17
-
18
- <!-- <script src="https://hls-js.netlify.app/dist/hls.js"></script> -->
19
-
20
- <script src="https://testmig-1306264703.cos.ap-guangzhou.myqcloud.com/wm/hls.js"></script>
21
-
22
-
23
- <!-- <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script> -->
24
-
25
- <script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/libs/dash.all.min.2.9.3.js"></script>
26
- <!-- 引入播放器 js 文件 -->
27
- <script src="https://testmig-1306264703.cos.ap-guangzhou.myqcloud.com/drm3/tcplayer.v4.5.1.js"></script>
28
- <!-- 示例 CSS 样式可自行删除 -->
29
- <style>
30
- html,body{
31
- margin: 0;
32
- padding: 0;
33
- }
34
- .tcplayer {
35
- margin: 0 auto;
36
- }
37
- @media screen and (max-width: 640px) {
38
- #player-container-id {
39
- width: 100%;
40
- height: 270px;
41
- }
42
- }
43
- /* 设置logo在高分屏的显示样式 */
44
- @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
45
- .tcp-logo-img {
46
- width: 50%;
47
- }
48
- }
49
- .form-control{
50
- border-radius: 0px;
51
- width: 300px;
52
- height: 30px;
53
- display: block;
54
- margin: 10px;
55
- }
56
- button{
57
- margin: 0 10px;
58
- }
59
- </style>
60
- </head>
61
- <body>
62
- <!-- 设置播放器容器 -->
63
- <video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
64
- </video>
65
- <!--
66
- 注意事项：
67
- * 播放器容器必须为 video 标签
68
- * player-container-id 为播放器容器的ID，可自行设置
69
- * 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
70
- * playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
71
- * 设置 x5-playsinline 属性会使用 X5 UI 的播放器
72
- -->
73
- <script>
74
-
75
- var vConsole = new VConsole();
76
-
77
- var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
78
-
79
- // widevine hls 1
80
- // appID: '1500012293', // 请传入点播账号的appID 必须
81
- // fileID: '387702299520678240', // 请传入需要播放的视频filID 必须
82
- // psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAxMjI5MywiZmlsZUlkIjoiMzg3NzAyMjk5NTIwNjc4MjQwIiwiY3VycmVudFRpbWVTdGFtcCI6MTY1MDQ0MTg2NCwicGNmZyI6IndpZGV2aW5laGxzIiwidXJsQWNjZXNzSW5mbyI6e30sImRybUxpY2Vuc2VJbmZvIjp7fX0.0IKncrqPTdnuVBFMD4hGoXyTlrOwSlw8x7yW4uIEmzE',
83
- //其他参数请在开发文档中查看
84
-
85
- // widevine hls 2
86
- // appID: '1500012293', // 请传入点播账号的appID 必须
87
- // fileID: '387702299658017544',
88
- // psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAxMjI5MywiZmlsZUlkIjoiMzg3NzAyMjk5NjU4MDE3NTQ0IiwiY3VycmVudFRpbWVTdGFtcCI6MTY1MDYxMTUxMCwicGNmZyI6IndpZGV2aW5laGxzIiwidXJsQWNjZXNzSW5mbyI6e30sImRybUxpY2Vuc2VJbmZvIjp7fX0.zAh5g8BmTYtosXnM642uqcSSwSmtUq2npfFZU5VI4k8',
89
-
90
- // widevine dash
91
- // appID: '1500012293', // 请传入点播账号的appID 必须
92
- // fileID: '387702299658017544',
93
- // psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAxMjI5MywiZmlsZUlkIjoiMzg3NzAyMjk5NjU4MDE3NTQ0IiwiY3VycmVudFRpbWVTdGFtcCI6MTY1MDYxMTUxMCwicGNmZyI6IndpZGV2aW5lZGFzaCIsInVybEFjY2Vzc0luZm8iOnt9LCJkcm1MaWNlbnNlSW5mbyI6e319.AmJh4Nm3kZt_sQ-5CZ-yZLkYEnGoIkvulzYuBRFlGd0',
94
-
95
- // fairplay hls
96
- // appID: '1500012293', // 请传入点播账号的appID 必须
97
- // fileID: '387702299658017544',
98
- // psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAxMjI5MywiZmlsZUlkIjoiMzg3NzAyMjk5NjU4MDE3NTQ0IiwiY3VycmVudFRpbWVTdGFtcCI6MTY1MDYxMTUxMCwicGNmZyI6ImZhaXJwbGF5aGxzIiwidXJsQWNjZXNzSW5mbyI6e30sImRybUxpY2Vuc2VJbmZvIjp7fX0.O4P15WUAN3i5bAeiJTSus9RFvFC9sVZzA_DxiEnFlJ4',
99
-
100
- // alldrm
101
- appID: '1500012293', // 请传入点播账号的appID 必须
102
- fileID: '387702299658017544',
103
- psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAxMjI5MywiZmlsZUlkIjoiMzg3NzAyMjk5NjU4MDE3NTQ0IiwiY3VycmVudFRpbWVTdGFtcCI6MTY1MDYxMTUxMCwicGNmZyI6ImFsbGRybSIsInVybEFjY2Vzc0luZm8iOnt9LCJkcm1MaWNlbnNlSW5mbyI6e319.3ki3MGF6pjc7B5eImKOYVNPdvaLh057qsx300wwK-oA',
104
-
105
- // fileID: "387702296829661431",
106
- // appID: "1400177511",
107
- // psign:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTQwMDE3NzUxMSwiZmlsZUlkIjoiMzg3NzAyMjk2ODI5NjYxNDMxIiwiY3VycmVudFRpbWVTdGFtcCI6MTY1MDUzNzY4OSwidXJsQWNjZXNzSW5mbyI6e30sImRybUxpY2Vuc2VJbmZvIjp7fX0.zG9mFJdZfFH5NhvLVvc1BlEhAiRLL0u2BhFIcoSOmH4",
108
- plugins: {
109
- DRM: {
110
- certificateUri: 'https://cert.drm.vod-qcloud.com/cert/v1/ca19f2033ba3c5c0350ec6cba3df579f/fairplay.cer',
111
- },
112
- ProgressMarker: true,
113
- ContextMenu: {
114
- statistic: true,
115
- levelSwitch: {
116
- open: true, // 打开切换提示
117
- // switchingText: '开始', // 开始切换时文案
118
- // switchedText: '成功', // 切换成功时文案
119
- // switchErrorText: '失败', // 切换失败时文案
120
- }
121
- }
122
- }
123
- });
124
-
125
- player.on('ended', function() {
126
- console.log('ended');
127
- })
128
-
129
- // var vConsole = new VConsole();
130
-
131
- // var player,
132
- // fileID = '5285890787511552106',
133
- // appID = '1256468886',
134
- // playDefinition = '20',
135
- // request = new XMLHttpRequest();
136
- // /**
137
- // * 播放DRM内容有一下两个步骤
138
- // * 1. 获取播放 DRM 内容用到的 token
139
- // * 2. 将准备好的参数传递给播放器进行初始化
140
- // */
141
- // request.addEventListener('load', function (event) {
142
- // player = TCPlayer('player-container-id', {
143
- // appID: appID, // 请传入点播账号的appID 必须
144
- // fileID: fileID // 请传入需要播放的视频filID 必须
145
- // // ,playDefinition: playDefinition // 请传入播放模版 必须 关于播放模版请看 **链接**
146
- // ,Html5: {
147
- // nativeTextTracks: false // 在 safari 开启支持 webvtt 解析
148
- // },
149
- // plugins: {
150
- // // DRM: {
151
- // // token: event.target.response, // 传入您的后台服务签发的 token
152
- // // certificateUri: 'https://5000.drm.myqcloud.com/huaxida_test/fairplay.cer', // 传入 Fairplay 播放需要用到的证书地址
153
- // // },
154
- // ProgressMarker: {},
155
- // }
156
- // });
157
-
158
- // }, false);
159
- // request.open('GET', 'https://demo.vod2.myqcloud.com/drm/gettoken?fileId='+fileID+'&appId='+appID, true); // 去您的 token 签发服务地址获取token
160
- // request.send();
161
-
162
- </script>
163
- </body>
164
- </html>
package/dist/examples/vod/tcplayer-vod-dynamic-watermark.html DELETED
@@ -1,85 +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://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="https://imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.12.4.js"></script>
16
- <!-- 引入播放器 js 文件 -->
17
- <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.v4.6.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
- /* 设置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
- <video id="player-container-id" preload="auto" width="740" height="360" playsinline webkit-playsinline>
38
- </video>
39
- <!--
40
- 注意事项：
41
- * 播放器容器必须为 video 标签
42
- * player-container-id 为播放器容器的ID，可自行设置
43
- * 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
44
- * playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
45
- * 设置 x5-playsinline 属性会使用 X5 UI 的播放器
46
- -->
47
- <script>
48
- var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
49
- fileID: '7447398157015849771', // 请传入需要播放的视频filID 必须
50
- appID: '1256993030' // 请传入点播账号的appID 必须
51
- //其他参数请在开发文档中查看
52
- ,plugins:{
53
- DynamicWatermark: { //
54
- type: 'text',
55
- speed: 0,// 建议取值范围 0<= speed <=1，默认值 0.2
56
- content: '7447398157015849771', // 类型必须为String，
57
- opacity: 1,
58
- fontSize: '12px', // type === text 时有效, 其余字段通用
59
- // color: 'red',
60
- left: '2%',
61
- top: '2%',
62
- // // right: '',
63
- // // bottom: '',
64
-
65
- // type: 'image',
66
- // content: 'https://tcplayer-1306264703.cos.ap-nanjing.myqcloud.com/picture/icon-vcube.png',
67
- // width: '200px', // type === image 时有效, 其余字段通用
68
- // height: 'auto', // type === image 时有效, 其余字段通用
69
-
70
- // 注意：
71
- // 1. 水印移动范围为实际视频显示区域，如果视频自带黑边，播放器无法进行规避。
72
- // 2. 在使用动态水印功能时，播放器对象的引用不能暴露到全局环境，否则动态水印可以轻易去除。
73
- // 3. 动态水印不适合移动端场景，特别是劫持播放的场景。常见问题：https://cloud.tencent.com/document/product/881/20219
74
- // 4. 可以通过屏蔽全屏按钮，规避部分全屏后被劫持导致水印失效的情况。
75
- }
76
- }
77
- });
78
- // 动态水印插件的其他方法
79
- // player.DynamicWatermark().pauseAnimation() // 暂停动态水印动画，这时不能去掉水印的dom节点
80
- // player.DynamicWatermark().resumeAnimation() // 恢复动态水印动画，这时不能去掉水印的dom节点
81
- // player.DynamicWatermark().startAnimation() // 开始动态水印动画。
82
- // player.DynamicWatermark().stopAnimation() // 停止动态水印动画，这时可以去掉水印的dom节点。不建议使用
83
- </script>
84
- </body>
85
- </html>
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>