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/typlayer-vod-dynamic-init.html DELETED
@@ -1,129 +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.12.4.js"></script>
16
- <!-- 引入播放器 js 文件 -->
17
- <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.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
- .button-container{
40
- text-align: center;
41
- }
42
-
43
- #video-container-id{
44
- display:none;
45
- }
46
- </style>
47
- </head>
48
- <body>
49
- <!-- 设置播放器容器 -->
50
- <div id="video-container"/></div>
51
- <br>
52
- <div class="button-container">
53
- <button onclick="loadVideo()">加载</button>
54
- <button onclick="showVideo()">隐藏/显示</button>
55
- <button onclick="disposeVideo()">销毁</button>
56
- </div>
57
- <!--
58
- 注意事项：
59
- * 播放器容器必须为 video 标签
60
- * player-container-id 为播放器容器的ID，可自行设置
61
- * 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
62
- * playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
63
- * 设置 x5-playsinline 属性会使用 X5 UI 的播放器
64
- -->
65
- <script>
66
- var a,b;
67
- //动态加载播放器
68
- function loadVideo() {
69
- var container = document.getElementById('video-container');
70
- var getvideo = document.getElementById("player-container-id");
71
- if(getvideo==null){
72
- container.innerHTML = '<video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>';
73
- player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
74
- fileID: '7447398157015849771', // 请传入需要播放的视频filID 必须
75
- appID: '1256993030', // 请传入点播账号的appID 必须
76
- });
77
- // 监听play的次数，根据次数判断用户点击显示/隐藏按钮时是否调用play()或pause
78
- a=0;
79
- player.on('play', function(){
80
- a+=1;
81
- });
82
- // 监听pause次数，用法同上
83
- b=0;
84
- player.on('pause', function(){
85
- b+=1;
86
- });
87
- }else{
88
- alert('播放器已经初始化过了。');
89
- }
90
- };
91
-
92
- //隐藏/显示播放器
93
- function showVideo(){
94
- var container = document.getElementById('video-container');
95
- var getvideo = document.getElementById("player-container-id");
96
- var videoheight = container.clientHeight;
97
- if(getvideo==null){
98
- alert("播放器还没有初始化。");
99
- }else if(videoheight>0){
100
- getvideo.style.display='none';
101
- // 判断隐藏前是否有点击播放以及暂停
102
- if(a>0 && a==b){
103
- a+=1000;
104
- }else{
105
- player.pause();
106
- }
107
- }else if(videoheight<=0){
108
- getvideo.style.display='block';
109
- // 判断显示前是否有点击播放以及是用户主观暂停还是隐藏时调用的暂停
110
- if(a>0 && a>1000 ){
111
- a-=1000;
112
- }else if(a>0 && a==b){
113
- player.play();
114
- }
115
- }
116
- };
117
-
118
- //销毁播放器
119
- function disposeVideo(){
120
- var getvideo = document.getElementById("player-container-id");
121
- if(getvideo==null){
122
- alert("播放器还没有初始化。");
123
- }else{
124
- player.dispose();
125
- }
126
- };
127
- </script>
128
- </body>
129
- </html>
package/dist/examples/vod/veplayer.html DELETED
@@ -1,38 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="zh">
3
- <head>
4
- <title>VePlayer</title>
5
- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
6
- <meta name="referrer" content="no-referrer">
7
- <link rel="stylesheet" href="//lf-unpkg.volccdn.com/obj/vcloudfe/sdk/@volcengine/veplayer/1.9.5//index.min.css">
8
- <script>window.gfdatav1={"env":"prod","idc":"lq","ver":"1.0.0.607","canary":0,"envName":"prod","region":"cn","runtime":"workerV2","extra":{"canaryType":null}}</script><script src="//lf-unpkg.volccdn.com/obj/vcloudfe/sdk/@volcengine/veplayer/1.9.5//index.min.js"></script>
9
- </head>
10
- <body>
11
- <div id="mse"></div>
12
- <script>
13
- const playerSdk = new VePlayer({
14
- id: 'mse',
15
- lang: 'zh',
16
- width: 640,
17
- height: 360,
18
- unionId: 'veplayer_demo',
19
- getVideoByToken: {
20
- playAuthToken: 'FileType为evideo的playAuthToken',
21
- getDrmAuthToken: (playAuthIds, vid, unionInfo) => {
22
- // 请求业务服务端生成 PrivateDrmAuthToken
23
- const request = window.fetch(`https://video-server.demo.com/api/GetDrmKeyToken/?kid=${encodeURIComponent(playAuthIds)}&vid=${vid}&uid=${unionInfo}`);
24
- return request.then(res => res.json()).then(data => data.result);
25
- }
26
- },
27
- vodLogOpts: {
28
- vtype: 'MP4',
29
- tag: '版权视频',
30
- drm_type: 1,
31
- line_app_id: 348293,
32
- line_user_id: 'veplayer_web_demo'
33
- }
34
- });
35
- </script>
36
- </body>
37
-
38
- </html>
package/dist/examples/webrtc/tcplayer-src-dynamic.html DELETED
@@ -1,92 +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>TCPlayer</title>
10
- <link href="https://static.yololiv.com/static/files/tcplayer/tcplayer.min.css" rel="stylesheet" />
11
- <script src="https://static.yololiv.com/static/files/tcplayer/libs/TXLivePlayer-1.2.0.min.js"></script>
12
- <script src="https://static.yololiv.com/static/files/tcplayer/libs/hls.min.0.13.2m.js"></script>
13
- <script src="https://static.yololiv.com/static/files/tcplayer/libs/flv.min.1.6.2.js"></script>
14
- <script src="https://static.yololiv.com/static/files/tcplayer/tcplayer.v4.5.2.min.js"></script>
15
- <style>
16
- html,
17
- body {
18
- margin: 0;
19
- padding: 0;
20
- }
21
-
22
- .tcplayer {
23
- margin: 0 auto;
24
- }
25
-
26
- @media screen and (max-width: 640px) {
27
- #player-container-id {
28
- width: 100%;
29
- height: 270px;
30
- }
31
- }
32
-
33
- /* 设置logo在高分屏的显示样式 */
34
- @media only screen and (min-device-pixel-ratio: 2),
35
- only screen and (-webkit-min-device-pixel-ratio: 2) {
36
- .tcp-logo-img {
37
- width: 50%;
38
- }
39
- }
40
- </style>
41
- </head>
42
-
43
- <body>
44
- <div id="player-container-id">
45
-
46
- </div>
47
- <button id="button">init player</button>
48
- <script>
49
- document.getElementById('button').addEventListener('click', init);
50
- let player, playing
51
- function init() {
52
- const video = document.createElement('video');
53
- video.id = 'player-id'
54
- video.autoplay = false;
55
- video.controls = false;
56
- video.muted = false;
57
- video.height = 360;
58
- video.width = 640;
59
-
60
- video.setAttribute('playsInline', '');
61
- video.setAttribute('webkit-playsinline', '');
62
-
63
- const container = document.getElementById('player-container-id');
64
-
65
- container.appendChild(video)
66
- player = TCPlayer('player-id', {
67
- sources: [{
68
- src: 'https://stream-pull-test.yololiv.com/yololiv/939069875606675457_yo480p30f.m3u8?txSecret=2d876289500eac2c62e4865c6f9646ef&txTime=75ca2e44',
69
- }]
70
- });
71
-
72
- player.one('playing', (event) => {
73
- playing = true;
74
- })
75
-
76
- setTimeout(() => {
77
- if (!playing) {
78
- reInit();
79
- }
80
- }, 2000);
81
- player.play();
82
- }
83
-
84
- function reInit() {
85
- player.dispose();
86
- init();
87
- }
88
-
89
- </script>
90
- </body>
91
-
92
- </html>
package/dist/examples/webrtc/tcplayer-src-meeting.html DELETED
@@ -1,206 +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://hlsjs.video-dev.org/dist/hls.js"></script> -->
16
- <!-- <script src="https://cloudcache.tencent-cloud.com/open/qcloud/live/webrtc/js/TXLivePlayer-1.1.0.min.js"></script> -->
17
- <script src="https://wliap-1306264703.cos.ap-nanjing.myqcloud.com/TXLivePlayer-1.2.0.min.js "></script>
18
- <!-- 引入播放器 js 文件 -->
19
- <script src="../../../dist/tcplayer.v4.7.2.js"></script>
20
- <!-- <script src="https://static.futunn.com/nnlive/lib/js/tcplayer.v4.5.2.min-d98d38ad6c0d398de78b6ad4ae40ba27.js"></script> -->
21
- <!-- <script src="https://web.sdk.cloud.tencent.cn/player/tcplayer/release/v4.5.3/tcplayer.v4.5.3.min.js"></script> -->
22
-
23
- <!-- 示例 CSS 样式可自行删除 -->
24
- <style>
25
- html,
26
- body {
27
- margin: 0;
28
- padding: 0;
29
- }
30
-
31
- .tcplayer {
32
- margin: 0 auto;
33
- }
34
-
35
- @media screen and (max-width: 640px) {
36
-
37
- .tcplayer,
38
- #player-container-id {
39
- width: 100%;
40
- height: 270px;
41
- }
42
- }
43
-
44
- /* 设置logo在高分屏的显示样式 */
45
- @media only screen and (min-device-pixel-ratio: 2),
46
- only screen and (-webkit-min-device-pixel-ratio: 2) {
47
- .tcp-logo-img {
48
- width: 50%;
49
- }
50
- }
51
-
52
- .button-container {
53
- text-align: center;
54
- }
55
- </style>
56
- </head>
57
-
58
- <body>
59
-
60
- <!-- 设置播放器容器 -->
61
- <video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
62
- </video>
63
- <!-- <video id="player-native" preload="auto" width="414" height="280" playsinline webkit-playsinline controls
64
- src="https://5664.liveplay.myqcloud.com/live/5664_harchar1.m3u8?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb">
65
- </video> -->
66
- <div class="button-container">
67
- <!-- <button onclick="playFlv()">flv</button> -->
68
- <button onclick="playWebRTC()">WebRTC</button>
69
- <button onclick="playHls()">hls</button>
70
- <button onclick="playMp4()">mp4</button>
71
- <button onclick="playFail()">模拟快直播-2005事件，降级播放hls</button>
72
- <!-- <button onclick="fullscreen()">webkit fullscreen</button> -->
73
- <!-- <button onclick="fullscreen('#player-native')">fullscreen</button> -->
74
- </div>
75
- <!-- <video class="tcplayer" id="player1" preload="auto" width="640" height="360" playsinline webkit-playsinline>
76
- </video> -->
77
- <!-- <video class="tcplayer" id="player2" preload="auto" width="640" height="360" playsinline webkit-playsinline>
78
- </video> -->
79
- <script>
80
- if (TCPlayer.browser.IS_ANDROID || TCPlayer.browser.IS_IOS) {
81
- const vConsole = new VConsole({ maxLogNumber: 1000 });
82
- }
83
-
84
- var player = TCPlayer('player-container-id', {
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://liveplay.wemeet.tencent.com/trtc_1400143280/stream_18219061098254429397_648623388.m3u8?txTime=62da4bb7&txSecret=BEDDE265B11E30308A254C7E7AD24095'
96
- // src: 'https://liveplay.futunn.com/live/3159_e8c6d97e97531cd9e552d3805e3b63bb.m3u8?txWMID=173540'
97
- src: 'https://liveplaydemo.qcloud.com/trtc_1400704311/1400704311_666004_666004_0_main.m3u8?txSecret=6d36db21b33795c07f0de8b283d9f128&txTime=643FD606'
98
- // src: 'https://5664.liveplay.myqcloud.com/live/5664_harchar1.m3u8?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb'
99
- }],
100
- // 可配置参数说明 https://cloud.tencent.com/document/product/881/30820#options-.E5.8F.82.E6.95.B0.E5.88.97.E8.A1.A8
101
- controlBar: {
102
- // 是否显示进度条
103
- // progressControl:false
104
- },
105
- //
106
- // nativeControlsForTouch:true,
107
- webrtcConfig: {
108
- // 参考 快直播 config 说明
109
- },
110
- hlsConfig: {
111
- // 参考 hls.js config 说明 https://github.com/video-dev/hls.js/blob/f3c6b2712e63ee6ed32957e4035254856d24605e/docs/API.md#fine-tuning
112
- },
113
- autoplay: true
114
- });
115
-
116
- player.on('ready', function () {
117
- console.log('player on ready');
118
- // 禁止拖拽进度条 与隐藏进度条不能同时配置。
119
- // player.controlBar.progressControl.disable();
120
- });
121
-
122
- player.on('webrtcevent', function (event) {
123
- console.log('webrtcEvent', event);
124
- });
125
- player.on('webrtcfallback', function (event) {
126
- console.log('webrtcfallback', event);
127
- });
128
-
129
- // 播放器事件
130
- var events = [
131
- 'loadstart',
132
- 'suspend',
133
- 'abort',
134
- 'error',
135
- 'emptied',
136
- 'stalled',
137
- 'loadedmetadata',
138
- 'loadeddata',
139
- 'canplay',
140
- 'canplaythrough',
141
- 'playing',
142
- 'waiting',
143
- 'seeking',
144
- 'seeked',
145
- 'ended',
146
- 'durationchange',
147
- 'timeupdate',
148
- 'progress',
149
- 'play',
150
- 'pause',
151
- 'ratechange',
152
- 'resize',
153
- 'volumechange'
154
- ];
155
- events.forEach(function (val, i) {
156
- player.on(val, function (event) {
157
- console.log(player.currentTime());
158
- if (val != 'timeupdate') {
159
- console.log('player event', val);
160
- }
161
- if (val === 'waiting') {
162
- console.log('waiting事件，可以标记为卡顿开始');
163
- }
164
- if (val === 'playing') {
165
- console.log('开始播放或恢复播放，可以标记为卡顿结束');
166
- }
167
- });
168
- });
169
- // 规避 hls.js 偶现seeking后不触发seeked 的问题
170
- let timeout
171
- player.one('seeking', (event) => {
172
- console.log('on seek');
173
- timeout = setTimeout(function () {
174
- player.currentTime(Math.ceil(player.currentTime()));
175
- }, 500);
176
- player.one('seeked', (event) => {
177
- console.log('on seeked', timeout);
178
- clearTimeout(timeout);
179
- })
180
- })
181
-
182
- function playFail() {
183
- if (player.src().indexOf('webrtc://') === 0) {
184
- player.tech(true).webrtcProvider && player.tech(true).webrtcProvider.onPlayEvent(-2005);
185
- }
186
- }
187
- function fullscreen(elementID) {
188
- if (elementID) {
189
- document.querySelector(elementID).webkitEnterFullScreen();
190
- return;
191
- }
192
- document.querySelector('video').webkitEnterFullScreen();
193
- }
194
- function playHls() {
195
- player.src('https://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/adp.10.m3u8');
196
- }
197
- function playMp4() {
198
- player.src('https://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f40.mp4');
199
- }
200
- function playWebRTC() {
201
- player.src('webrtc://5664.liveplay.myqcloud.com/live/5664_harchar1?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb');
202
- }
203
- </script>
204
- </body>
205
-
206
- </html>
package/dist/examples/webrtc/tcplayer-src-webrtc-abr-new.html DELETED
@@ -1,163 +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.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
- <!-- 示例 CSS 样式可自行删除 -->
14
- <style>
15
- html,body{
16
- margin: 0;
17
- padding: 0;
18
- }
19
- .tcplayer {
20
- margin: 0 auto;
21
- }
22
- @media screen and (max-width: 640px) {
23
- .tcplayer,
24
- #player-container-id {
25
- width: 100%;
26
- height: 270px;
27
- }
28
- }
29
- /* 设置logo在高分屏的显示样式 */
30
- @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
31
- .tcp-logo-img {
32
- width: 50%;
33
- }
34
- }
35
- .button-container{
36
- text-align: center;
37
- }
38
- </style>
39
- </head>
40
- <body>
41
-
42
-
43
- <div id="rate"></div>
44
- <!-- 设置播放器容器 -->
45
- <video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
46
- </video>
47
-
48
- <script>
49
- if (TCPlayer.browser.IS_ANDROID || TCPlayer.browser.IS_IOS) {
50
- const vConsole = new VConsole({ maxLogNumber: 1000 });
51
- }
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=d540p&tabr_control=auto',
59
- // sources: [
60
- // {
61
- // src: 'webrtc://global-lebtest-play.myqcloud.com/live/lebtest?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=69f1eb8c&tabr_bitrates=d1080p,d540p,d360p&tabr_start_bitrate=d1080p'
62
- // }
63
- // ],
64
-
65
- licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1306264703_1/v_cube.license',
66
-
67
- webrtcConfig: {
68
- // receiveSEI: true,
69
- connectRetryCount: 0,
70
- // fallbackUrl: 'https://global-lebtest-play.myqcloud.com/live/lebtest_HLSABR.m3u8',
71
- enableAbr: false,
72
- // 模板名对应的label名
73
- abrLabels: {
74
- // d1080p: 'FHD1',
75
- // d540p: 'HD2',
76
- // d360p: 'SD3',
77
- // auto: 'AUTO4',
78
- },
79
- // 参考 快直播 config 说明
80
- },
81
- });
82
-
83
-
84
- player.on('webrtcfallback', function(event) {
85
-
86
- });
87
-
88
- player.on('webrtcevent', function(event) {
89
- console.log('webrtcEvent', event);
90
- });
91
-
92
- player.on('webrtcsei', function(event) {
93
- console.log('event', event);
94
- });
95
- player.on('webrtcfallback', function(event) {
96
- console.log('webrtcfallback', event);
97
- });
98
-
99
- player.on('debug', function(event, data) {
100
- console.log('debug', event, data);
101
- });
102
- player.on('webrtcstats', function(data) {
103
-
104
- try {
105
- document.getElementById('rate').innerHTML = data.data.video.frameWidth + 'x' + data.data.video.frameHeight;
106
- } catch (e) {
107
- console.log('e', e.message);
108
- }
109
-
110
- });
111
-
112
- // player.on('webrtcevent', function(event) {
113
- // console.log('webrtcEvent', event);
114
- // });
115
-
116
- player.on('webrtcsei', function(event) {
117
- console.log('event', event);
118
- });
119
- player.on('webrtcfallback', function(event) {
120
- console.log('webrtcfallback', event);
121
- });
122
-
123
- player.on('debug', function(event, data) {
124
- console.log('debug', event, data);
125
- });
126
- player.on('webrtcstats', function(data) {
127
-
128
- try {
129
- document.getElementById('rate').innerHTML = data.data.video.frameWidth + 'x' + data.data.video.frameHeight;
130
- } catch (e) {
131
- console.log('e', e.message);
132
- }
133
-
134
- });
135
-
136
- // player.on('webrtcevent', function(event) {
137
- // console.log('webrtcEvent', event);
138
- // });
139
- // player.on('webrtcfallback', function(event) {
140
- // console.log('webrtcfallback', event);
141
- // });
142
-
143
- // player.on('webrtceventtest', function(event) {
144
- // console.log('webrtceventtest', event);
145
- // })
146
-
147
- // player.on('debug', function(event, data) {
148
- // console.log('debug', event, data);
149
- // });
150
- // player.on('webrtcstats', function(data) {
151
-
152
- // try {
153
- // document.getElementById('rate').innerHTML = data.data.video.frameWidth + 'x' + data.data.video.frameHeight;
154
- // } catch (e) {
155
- // console.log('e', e.message);
156
- // }
157
-
158
- // // console.log('data', event, data);
159
- // });
160
-
161
- </script>
162
- </body>
163
- </html>