tcplayer.js 4.9.0-beta.2 → 4.9.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.
- package/CHANGELOG.md +120 -0
- package/dist/examples/vod/dvr-event-sprite.html +212 -0
- package/dist/examples/vod/tcplayer-hls-live-5.0.0.html +83 -154
- package/dist/examples/vod/tcplayer-vod-all.html +107 -25
- package/dist/examples/vod/tcplayer-vod-base.html +19 -26
- package/dist/examples/vod/tcplayer-vod-event.html +7 -4
- package/dist/examples/vod/tcplayer-vod-ghost-watermark.html +6 -2
- package/dist/examples/vod/tcplayer-vod-trial.html +150 -0
- package/dist/examples/vod/tcplayer-vod-vr.html +138 -0
- package/dist/examples/vod/tcplayer-vod-vtt-thumbnail-src.html +82 -48
- package/dist/examples/vod/{tcplayer-continue-play.html → youling.html} +67 -52
- package/dist/examples/webrtc/tcplayer-src-webrtc.html +23 -91
- package/dist/libs/TXLivePlayer-1.3.4.min.js +1 -1
- package/dist/libs/TXLivePlayer-1.3.5.min.js +1 -0
- package/dist/libs/flv.min.1.6.4.js +10 -0
- package/dist/libs/tcpcrypto.1.0.0.js +2 -0
- package/dist/plugins/tcplayer-safe-check-plugin.1.0.0.js +2 -0
- package/dist/plugins/tcplayer-vr-plugin.1.0.0.js +2 -0
- package/dist/tcplayer.css +154 -2
- package/dist/tcplayer.min.css +1 -1
- package/dist/tcplayer.v4.9.1.min.js +20 -0
- package/package.json +2 -2
- package/dist/examples/vod/axios.html +0 -56
- package/dist/examples/webrtc/tcplayer-test-fallback.html +0 -111
- package/dist/examples/webrtc/tcplayer.v4.8.0.min.js +0 -17
- package/dist/tcplayer.v4.9.0.min.js +0 -18
|
@@ -1,71 +1,105 @@
|
|
|
1
|
+
|
|
1
2
|
<!DOCTYPE html>
|
|
2
3
|
<html lang="en">
|
|
3
4
|
<head>
|
|
4
5
|
<meta charset="UTF-8">
|
|
5
6
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
6
7
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
|
|
7
|
-
<title
|
|
8
|
-
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
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 样式可自行删除 -->
|
|
8
|
+
<title>Tcplayer Demo</title>
|
|
9
|
+
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/tcplayer.min.css" rel="stylesheet">
|
|
10
|
+
<!-- <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/libs/hls.min.0.13.2m.js"></script> -->
|
|
11
|
+
<script src="http://localhost:8081/dist/tcplayer.v4.9.1.js"></script>
|
|
12
|
+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
|
|
19
13
|
<style>
|
|
20
14
|
html,body{
|
|
21
15
|
margin: 0;
|
|
22
16
|
padding: 0;
|
|
23
17
|
}
|
|
24
|
-
|
|
18
|
+
body {
|
|
19
|
+
max-width: 1280px;
|
|
25
20
|
margin: 0 auto;
|
|
26
21
|
}
|
|
27
|
-
|
|
28
|
-
|
|
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
|
-
}
|
|
22
|
+
.tcplayer {
|
|
23
|
+
margin: 0 auto;
|
|
38
24
|
}
|
|
25
|
+
|
|
39
26
|
</style>
|
|
40
27
|
</head>
|
|
41
28
|
<body>
|
|
42
|
-
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
29
|
+
|
|
30
|
+
<div id="container">
|
|
31
|
+
<video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
|
|
32
|
+
</video>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<br/>
|
|
36
|
+
|
|
37
|
+
<div class="input-group mb-3">
|
|
38
|
+
<span class="input-group-text" id="inputGroup-sizing-default">LIVE URL</span>
|
|
39
|
+
<input type="text" id="liveInput" value="http://5000.liveplay.myqcloud.com/testflv/5000_sprite_test_old.m3u8" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<div class="input-group mb-3">
|
|
43
|
+
<span class="input-group-text" id="inputGroup-sizing-default">DVR URL</span>
|
|
44
|
+
<input type="text" id="dvrInput" value="http://5000.liveplay.myqcloud.com/testflv/5000_sprite_test_old.m3u8?txTimeshift=on&tsFormat=unix&tsStart=1706253300&tsEnd=1706260500" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
<br/>
|
|
48
|
+
|
|
49
|
+
<button type="button" id="init" class="btn btn-primary">init player</button>
|
|
50
|
+
<button type="button" id="dvrBtn" class="btn btn-primary">switch DVR</button>
|
|
51
|
+
<button type="button" id="liveBtn" class="btn btn-primary">switch LIVE</button>
|
|
52
|
+
|
|
53
|
+
<br/>
|
|
54
|
+
|
|
53
55
|
<script>
|
|
54
|
-
var player =
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
56
|
+
var player = null;
|
|
57
|
+
|
|
58
|
+
function initVideo () {
|
|
59
|
+
document.getElementById('container').innerHTML = `<video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline></video>`;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
function initPlayer () {
|
|
63
|
+
const dvrInputValue = document.getElementById('dvrInput').value;
|
|
64
|
+
const liveInputValue = document.getElementById('liveInput').value;
|
|
65
|
+
console.log('dvrInputValue', dvrInputValue, liveInputValue);
|
|
66
|
+
|
|
67
|
+
player && player.dispose();
|
|
68
|
+
initVideo();
|
|
69
|
+
player = TCPlayer("player-container-id", {
|
|
70
|
+
autoplay: true,
|
|
71
|
+
language: 'en',
|
|
72
|
+
sources: liveInputValue,
|
|
73
|
+
plugins:{
|
|
74
|
+
PDT: true,
|
|
75
|
+
Dvr:{
|
|
76
|
+
mode: 'event',
|
|
77
|
+
dvrButton: true,
|
|
78
|
+
liveURL: liveInputValue,
|
|
79
|
+
shiftURL: dvrInputValue,
|
|
80
|
+
},
|
|
81
|
+
VttThumbnail:{
|
|
82
|
+
enable: true,
|
|
83
|
+
}
|
|
61
84
|
}
|
|
62
|
-
}
|
|
63
|
-
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
initPlayer();
|
|
89
|
+
|
|
90
|
+
document.getElementById('init').addEventListener('click', function() {
|
|
91
|
+
initPlayer();
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
document.getElementById('liveBtn').addEventListener('click', function() {
|
|
95
|
+
const liveInputValue = document.getElementById('liveInput').value;
|
|
96
|
+
player.src(liveInputValue);
|
|
97
|
+
});
|
|
98
|
+
|
|
99
|
+
document.getElementById('dvrBtn').addEventListener('click', function() {
|
|
100
|
+
const dvrInputValue = document.getElementById('dvrInput').value;
|
|
101
|
+
player.src(dvrInputValue);
|
|
64
102
|
});
|
|
65
|
-
/*
|
|
66
|
-
注意事项：
|
|
67
|
-
* 如何生成预览图与vtt文件，查看相关文档https://cloud.tencent.com/document/product/266/8101
|
|
68
|
-
*/
|
|
69
103
|
</script>
|
|
70
104
|
</body>
|
|
71
105
|
</html>
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
|
|
2
1
|
<!DOCTYPE html>
|
|
3
2
|
<html lang="en">
|
|
4
3
|
<head>
|
|
@@ -21,17 +20,25 @@
|
|
|
21
20
|
<!--<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/libs/dash.all.min.4.5.2.js"></script>-->
|
|
22
21
|
<!--播放器脚本文件-->
|
|
23
22
|
<!--<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/tcplayer.v4.7.2.min.js"></script>-->
|
|
24
|
-
<!--<script src="https://testmig-1306264703.cos.ap-guangzhou.myqcloud.com/lingxi/
|
|
23
|
+
<!--<script src="https://testmig-1306264703.cos.ap-guangzhou.myqcloud.com/lingxi/js/flv.min0905.js"></script>
|
|
25
24
|
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v5.0.0/tcplayer.min.css" rel="stylesheet"/>
|
|
26
25
|
|
|
27
|
-
|
|
26
|
+
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v5.0.0/tcplayer.v5.0.0.min.js"></script>-->
|
|
27
|
+
<!--<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v5.0.1/tcplayer.v5.0.1.min.js"></script>-->
|
|
28
|
+
|
|
28
29
|
|
|
30
|
+
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v5.0.0/tcplayer.min.css" rel="stylesheet"/>
|
|
31
|
+
<!--播放器脚本文件-->
|
|
32
|
+
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v5.0.1/tcplayer.v5.0.1.min.js"></script>
|
|
33
|
+
|
|
34
|
+
<!-- <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v5.0.0/tcplayer.v5.0.0.min.js"></script> -->
|
|
35
|
+
|
|
29
36
|
<!--<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>-->
|
|
30
37
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
38
|
+
<!--<script src="https://static.lexiang-asset.net/lake/tcplayer@v4.5.1/TXLivePlayer-1.2.1.min.js"></script>
|
|
39
|
+
<script src="https://static.lexiang-asset.net/lake/tcplayer@v4.5.1/libs/flv.min.1.6.2.js"></script>
|
|
40
|
+
<script src="https://static.lexiang-asset.net/lake/tcplayer@v4.5.1/libs/hls.min.0.13.2m.js"></script>-->
|
|
41
|
+
<!--<script src="tcplayer.v4.8.0.min0904.js"></script>-->
|
|
35
42
|
|
|
36
43
|
|
|
37
44
|
<script src="https://webrtc-demo.myqcloud.com/pull-sdk/js/vconsole.min.js"></script>
|
|
@@ -59,12 +66,12 @@
|
|
|
59
66
|
</head>
|
|
60
67
|
<body>
|
|
61
68
|
<!-- 设置播放器容器 -->
|
|
62
|
-
<video id="player-container-id" preload="auto" width="
|
|
69
|
+
<video id="player-container-id" preload="auto" width="400px" height='250px' webkit-playsinline style="background:lightblue" playsinline webkit-playsinline>
|
|
63
70
|
|
|
64
71
|
|
|
65
72
|
</video>
|
|
66
73
|
<!--<video id="player-container-id2" preload="auto" width="960px" height='540px' webkit-playsinline style="background:lightblue" playsinline webkit-playsinline> </vidoe>-->
|
|
67
|
-
|
|
74
|
+
<!--<button onclick="change()">切换流</button>-->
|
|
68
75
|
<!--<button onclick="quitPinP()">画中画Q</button>-->
|
|
69
76
|
<!--<button onclick="playy1()">重新load</button>
|
|
70
77
|
<button onclick="playy2()">先load再play</button>-->
|
|
@@ -78,7 +85,7 @@
|
|
|
78
85
|
* 设置 x5-playsinline 属性会使用 X5 UI 的播放器
|
|
79
86
|
-->
|
|
80
87
|
<script>
|
|
81
|
-
|
|
88
|
+
var vConsole = new VConsole();
|
|
82
89
|
|
|
83
90
|
var events = [
|
|
84
91
|
"loadstart",
|
|
@@ -106,43 +113,51 @@
|
|
|
106
113
|
"volumechange"
|
|
107
114
|
];
|
|
108
115
|
//skipHlsJs:true
|
|
116
|
+
|
|
117
|
+
localStorage.setItem('ghostWatermarkFirstShow', 0);
|
|
109
118
|
var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
//
|
|
127
|
-
//
|
|
128
|
-
|
|
119
|
+
|
|
120
|
+
// sources:[{src: 'https://live.zhuoshangsoft.com/live/4663880250_lowQlty.flv?txSecret=024dfe8ee2ce589b45111c76ecf388ac&txTime=66D48F7F', }],
|
|
121
|
+
// sources:[{src: 'https://liteavapp.qcloud.com/live/liteavdemoplayerstreamid.flv', }],
|
|
122
|
+
// sources:[{src: "https://liteavapp.qcloud.com/live/liteavdemoplayerstreamid.m3u8", type: 'application/x-mpegURL'}],
|
|
123
|
+
fileID: '387702307847129127',
|
|
124
|
+
appID: '1500006438',
|
|
125
|
+
psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNjQzOCwiZmlsZUlkIjoiMzg3NzAyMzA3ODQ3MTI5MTI3IiwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJSYXdBZGFwdGl2ZSIsInJhd0FkYXB0aXZlRGVmaW5pdGlvbiI6MTB9LCJjdXJyZW50VGltZVN0YW1wIjoxNjg2ODgzMzYwLCJnaG9zdFdhdGVybWFya0luZm8iOnsidGV4dCI6Imdob3N0IGlzIHdhdGNoaW5nIn19.0G2o4P5xVZ7zFlFUgBLntfX03iGxK9ntD_AONClUUno',
|
|
126
|
+
|
|
127
|
+
// -----以上是测试用的url和fildid--------
|
|
128
|
+
|
|
129
|
+
// fileID:"5576678022404297202",
|
|
130
|
+
// appID:"1321292697",
|
|
131
|
+
// psign:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMyMTI5MjY5NywiZmlsZUlkIjoiNTU3NjY3ODAyMjQwNDI5NzIwMiIsImN1cnJlbnRUaW1lU3RhbXAiOjE2OTcwODM2NTUsImV4cGlyZVRpbWVTdGFtcCI6MTcwNDg1OTY1NSwicGNmZyI6ImljcmVhdGUiLCJjb250ZW50SW5mbyI6eyJhdWRpb1ZpZGVvVHlwZSI6IlByb3RlY3RlZEFkYXB0aXZlIiwiZHJtQWRhcHRpdmVJbmZvIjp7InByaXZhdGVFbmNyeXB0aW9uRGVmaW5pdGlvbiI6MTQ1MjEzM319LCJ1cmxBY2Nlc3NJbmZvIjp7InQiOiI2NTllMTgwNyIsImV4cGVyIjowLCJybGltaXQiOjMsInVzIjoiNzJkNGNkMTEwMSJ9LCJnaG9zdFdhdGVybWFya0luZm8iOnsidGV4dCI6IjE1MDU3OTU0MjXniZvmtpsifSwiaWF0IjoxNjk3MDgzNjU1fQ.Hg7bKBdlqjNCS8-DuOYFL6ySESuN-6tleXheH2IGoi8",
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
// flvConfig:{
|
|
136
|
+
// lazyLoadMaxDuration：5*60,
|
|
137
|
+
// }
|
|
138
|
+
// fakeFullscreen: true,
|
|
129
139
|
muted:true,
|
|
130
|
-
|
|
131
|
-
|
|
140
|
+
autoplay:true,
|
|
141
|
+
// hlsConfig: {
|
|
132
142
|
// maxBufferLength: 10,
|
|
133
143
|
// maxBufferSize: 40 * 1024 * 1024,
|
|
134
144
|
// maxMaxBufferLength: 30,
|
|
135
145
|
// debug:true,
|
|
136
|
-
|
|
146
|
+
// },
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
//flvConfig:{
|
|
151
|
+
// hasAudio:false,
|
|
152
|
+
//},
|
|
137
153
|
licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1253985742_1/v_cube.license',
|
|
138
|
-
//
|
|
139
|
-
|
|
140
|
-
// "Without anti-leech information.": "没带防盗链检测参数，请添加后重试"
|
|
141
|
-
// }
|
|
142
|
-
// }
|
|
154
|
+
// licenseUrl:""
|
|
155
|
+
|
|
143
156
|
});
|
|
157
|
+
|
|
158
|
+
// player.src("https://1500005692.vod2.myqcloud.com/43843706vodtranscq1500005692/62656d94387702300542496289/v.f100240.m3u8");
|
|
159
|
+
|
|
144
160
|
|
|
145
|
-
//console.log(player);
|
|
146
161
|
|
|
147
162
|
|
|
148
163
|
// events.forEach(function(val, i){
|
|
@@ -151,28 +166,22 @@
|
|
|
151
166
|
// });
|
|
152
167
|
//});
|
|
153
168
|
|
|
154
|
-
player.ready(function() {
|
|
155
|
-
|
|
156
|
-
});
|
|
157
|
-
|
|
158
|
-
|
|
159
169
|
function change(){
|
|
160
|
-
|
|
170
|
+
player.src("https://live.zhuoshangsoft.com/live/4663880250_highQlty.flv?txSecret=86dc9c5cd53e7f830451317aee0f2f28&txTime=66D48F7F");
|
|
161
171
|
|
|
162
|
-
// player.src("https://testmig-1306264703.cos.ap-guangzhou.myqcloud.com/lingxi/SVID_20221115_105059_1.mp4");
|
|
163
172
|
// var a = localStorage.getItem(key);
|
|
164
173
|
// console.log(a);
|
|
165
174
|
|
|
166
|
-
// player.loadVideoByID({
|
|
167
|
-
// appID: '1500005692',
|
|
168
|
-
// fileID: '387702307006254554',
|
|
169
|
-
// psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNTY5MiwiZmlsZUlkIjoiMzg3NzAyMzA3MDA2MjU0NTU0IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDMxMDM1MiwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTUwMDAwNTY5Mi52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFAifX0.PFwxL9NNs_gyrR5U3dxwzeip3wZT4M-Fvtd0H2WkjnA',
|
|
170
|
-
// });
|
|
171
175
|
|
|
172
176
|
}
|
|
177
|
+
// player.on("fullscreenchange",function(){
|
|
178
|
+
//
|
|
179
|
+
// var a = player.isFullscreen()
|
|
180
|
+
// console.log(a);
|
|
181
|
+
// })
|
|
173
182
|
|
|
174
183
|
|
|
175
|
-
|
|
184
|
+
|
|
176
185
|
// setTimeout(function(){
|
|
177
186
|
// var getplaystate = player.paused();
|
|
178
187
|
// if(getplaystate==true){
|
|
@@ -185,7 +194,13 @@ function change(){
|
|
|
185
194
|
// },1000)
|
|
186
195
|
|
|
187
196
|
//})
|
|
188
|
-
|
|
197
|
+
|
|
198
|
+
|
|
199
|
+
player.one("timeupdate",function(e){
|
|
200
|
+
console.log(e);
|
|
201
|
+
var videoduration = player.duration();
|
|
202
|
+
console.log(videoduration);
|
|
203
|
+
})
|
|
189
204
|
|
|
190
205
|
|
|
191
206
|
|
|
@@ -7,17 +7,10 @@
|
|
|
7
7
|
<title>腾讯视频云快直播示例</title>
|
|
8
8
|
<!-- 引入播放器 css 文件 -->
|
|
9
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
|
-
<script src="https://testmig-1306264703.cos.ap-guangzhou.myqcloud.com/wm/TXLivePlayer-1.2.1.min.js"></script>
|
|
16
|
-
|
|
17
|
-
|
|
18
10
|
|
|
19
11
|
<!-- 引入播放器 js 文件 -->
|
|
20
|
-
<script src="
|
|
12
|
+
<script src="http://localhost:8080/dist/tcplayer.v4.9.1.js"></script>
|
|
13
|
+
<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.1/vconsole.min.js"></script>
|
|
21
14
|
<!-- 示例 CSS 样式可自行删除 -->
|
|
22
15
|
<style>
|
|
23
16
|
html,body{
|
|
@@ -50,48 +43,35 @@
|
|
|
50
43
|
<!-- 设置播放器容器 -->
|
|
51
44
|
<video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
|
|
52
45
|
</video>
|
|
53
|
-
|
|
54
|
-
src="https://5664.liveplay.myqcloud.com/live/5664_harchar1.m3u8?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb">
|
|
55
|
-
</video> -->
|
|
46
|
+
|
|
56
47
|
<div class="button-container">
|
|
57
|
-
<!-- <button onclick="playFlv()">flv</button> -->
|
|
58
|
-
<!-- <button onclick="playHls()">hls</button> -->
|
|
59
|
-
<!-- <button onclick="playFail()">模拟快直播-2005事件，降级播放hls</button> -->
|
|
60
|
-
<!-- <button onclick="fullscreen()">webkit fullscreen</button> -->
|
|
61
|
-
<!-- <button onclick="fullscreen('#player-native')">fullscreen</button> -->
|
|
62
48
|
</div>
|
|
63
|
-
<!-- <video class="tcplayer" id="player1" preload="auto" width="640" height="360" playsinline webkit-playsinline>
|
|
64
|
-
</video> -->
|
|
65
|
-
<!-- <video class="tcplayer" id="player2" preload="auto" width="640" height="360" playsinline webkit-playsinline>
|
|
66
|
-
</video> -->
|
|
67
49
|
<script>
|
|
68
50
|
if (TCPlayer.browser.IS_ANDROID || TCPlayer.browser.IS_IOS) {
|
|
69
51
|
const vConsole = new VConsole({ maxLogNumber: 1000 });
|
|
70
52
|
}
|
|
71
53
|
|
|
72
54
|
var player = TCPlayer('player-container-id',{
|
|
73
|
-
//
|
|
74
|
-
//
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
},{
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
}],
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
55
|
+
// sources: [{
|
|
56
|
+
// src: 'webrtc://global-lebtest-play.myqcloud.com/live/lebtest?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=69f1eb8c',
|
|
57
|
+
// }, {
|
|
58
|
+
// // 快直播地址
|
|
59
|
+
// src: 'webrtc://5664.liveplay.myqcloud.com/live/5664_harchar1?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb'
|
|
60
|
+
// },{
|
|
61
|
+
// // HLS直播地址
|
|
62
|
+
// src: 'https://5664.liveplay.myqcloud.com/live/5664_harchar1.m3u8?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb'
|
|
63
|
+
// }],
|
|
64
|
+
|
|
65
|
+
sources: [
|
|
66
|
+
{
|
|
67
|
+
src: "webrtc://68789.liveplay.myqcloud.com/live/webrtc_demo_1708584926047",
|
|
68
|
+
// src: 'webrtc://global-lebtest-play.myqcloud.com/live/lebtest?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=69f1eb8c',
|
|
69
|
+
},
|
|
70
|
+
],
|
|
71
|
+
|
|
89
72
|
webrtcConfig: {
|
|
90
|
-
|
|
73
|
+
receiveSEI: true,
|
|
91
74
|
},
|
|
92
|
-
hlsConfig: {
|
|
93
|
-
// 参考 hls.js config 说明 https://github.com/video-dev/hls.js/blob/f3c6b2712e63ee6ed32957e4035254856d24605e/docs/API.md#fine-tuning
|
|
94
|
-
}
|
|
95
75
|
});
|
|
96
76
|
|
|
97
77
|
|
|
@@ -108,58 +88,10 @@ src="https://5664.liveplay.myqcloud.com/live/5664_harchar1.m3u8?txSecret=f22a813
|
|
|
108
88
|
console.log('webrtcfallback', event);
|
|
109
89
|
});
|
|
110
90
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
'loadstart',
|
|
114
|
-
'suspend',
|
|
115
|
-
'abort',
|
|
116
|
-
'error',
|
|
117
|
-
'emptied',
|
|
118
|
-
'stalled',
|
|
119
|
-
'loadedmetadata',
|
|
120
|
-
'loadeddata',
|
|
121
|
-
'canplay',
|
|
122
|
-
'canplaythrough',
|
|
123
|
-
'playing',
|
|
124
|
-
'waiting',
|
|
125
|
-
'seeking',
|
|
126
|
-
'seeked',
|
|
127
|
-
'ended',
|
|
128
|
-
'durationchange',
|
|
129
|
-
'timeupdate',
|
|
130
|
-
'progress',
|
|
131
|
-
'play',
|
|
132
|
-
'pause',
|
|
133
|
-
'ratechange',
|
|
134
|
-
'resize',
|
|
135
|
-
'volumechange'
|
|
136
|
-
];
|
|
137
|
-
events.forEach(function(val, i){
|
|
138
|
-
player.on(val, function (event) {
|
|
139
|
-
if(val !='timeupdate'){
|
|
140
|
-
console.log('player event', val);
|
|
141
|
-
}
|
|
142
|
-
if(val === 'waiting'){
|
|
143
|
-
console.log('waiting事件，可以标记为卡顿开始');
|
|
144
|
-
}
|
|
145
|
-
if(val === 'playing'){
|
|
146
|
-
console.log('开始播放或恢复播放，可以标记为卡顿结束');
|
|
147
|
-
}
|
|
148
|
-
});
|
|
91
|
+
player.on('webrtcsei', function(event) {
|
|
92
|
+
console.log('webrtcsei', event.data);
|
|
149
93
|
});
|
|
150
94
|
|
|
151
|
-
function playFail() {
|
|
152
|
-
if (player.src().indexOf('webrtc://')===0) {
|
|
153
|
-
player.tech(true).webrtcProvider && player.tech(true).webrtcProvider.onPlayEvent(-2005);
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
function fullscreen(elementID) {
|
|
157
|
-
if (elementID){
|
|
158
|
-
document.querySelector(elementID).webkitEnterFullScreen();
|
|
159
|
-
return;
|
|
160
|
-
}
|
|
161
|
-
document.querySelector('video').webkitEnterFullScreen();
|
|
162
|
-
}
|
|
163
95
|
</script>
|
|
164
96
|
</body>
|
|
165
97
|
</html>
|