tcplayer.js 4.9.0-beta.1 → 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
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
## TCplayer 更新日志
|
|
2
|
+
|
|
3
|
+
### TCplayer 4.6.0 @ 2022.11.04
|
|
4
|
+
- 新增支持多音轨
|
|
5
|
+
- 新增支持url形式的续播
|
|
6
|
+
- 修复部分问题
|
|
7
|
+
|
|
8
|
+
### TCplayer 4.5.4 @ 2022.8.26
|
|
9
|
+
- 新增支持快直播 abr，更新 txliveplayer
|
|
10
|
+
- 新增支持 av1 in flv，更新 flv.js
|
|
11
|
+
- 新增支持华曦达 DRM
|
|
12
|
+
- 新增支持快直播和标准直播统一自动播放被阻止事件到 blocked
|
|
13
|
+
- 新增支持打点回调事件
|
|
14
|
+
- 修复部分问题
|
|
15
|
+
|
|
16
|
+
### TCplayer 4.5.3 @ 2022.6.15
|
|
17
|
+
- 新增支持点播商业级 DRM
|
|
18
|
+
|
|
19
|
+
### TCplayer 4.5.2 @ 2022.4.15
|
|
20
|
+
- 修复通过劫持 mse 绕过私有加密方案盗取视频的漏洞
|
|
21
|
+
- 修复部分上报数据问题
|
|
22
|
+
|
|
23
|
+
### TCplayer 4.5.0 @ 2022.1.14
|
|
24
|
+
- 新增支持标准直播和快直播数据上报功能
|
|
25
|
+
- 新增支持 MP3 音频格式播放
|
|
26
|
+
- 新增支持弱网追帧能力
|
|
27
|
+
- 优化水印功能，支持更多配置项
|
|
28
|
+
- 修复若干问题
|
|
29
|
+
|
|
30
|
+
### TCplayer 4.4.0 @ 2021.12.14
|
|
31
|
+
- 新增支持快直播播放
|
|
32
|
+
- 新增点播场景的数据上报功能
|
|
33
|
+
- 新增支持通过 v4 接口播放媒体原文件和转码文件
|
|
34
|
+
|
|
35
|
+
### TCplayer 4.1 @ 2020.7.10
|
|
36
|
+
- 修改默认 hls.js 版本为0.13.2。
|
|
37
|
+
- 支持开启 Key 防盗链功能。
|
|
38
|
+
- 修复其他已知问题。
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
### TCplayer 4.0 @ 2020.6.17
|
|
42
|
+
- 修复试看视频时长保持显示原始时长。
|
|
43
|
+
- 启用后台清晰度配置。
|
|
44
|
+
- 修复其他已知问题。
|
|
45
|
+
|
|
46
|
+
## TCplayerLite 更新日志
|
|
47
|
+
### TCplayerLite 2.4.1 @ 2021.06.25
|
|
48
|
+
- 新增支持 v1 信令的 WebRTC 的流地址。
|
|
49
|
+
- 增加 webrtcConfig 参数。
|
|
50
|
+
- 增加 WebRTC 卡顿、卡顿结束、推流结束事件。
|
|
51
|
+
|
|
52
|
+
### TCplayerLite 2.4.0 @ 2021.06.03
|
|
53
|
+
- 增加对快直播功能的支持。
|
|
54
|
+
- 修复其他已知问题。
|
|
55
|
+
|
|
56
|
+
### TCplayerLite 2.3.3 @ 2020.07.01
|
|
57
|
+
- 修复 X5 环境下切换全屏时，事件派发异常的问题。
|
|
58
|
+
- 规避 hls 切换源时，相关事件触发时机很慢，导致封面显示异常的问题。
|
|
59
|
+
|
|
60
|
+
### TCplayerLite 2.3.2 @ 2019.08.20
|
|
61
|
+
- 修改默认 hls 版本为0.12.4。
|
|
62
|
+
- 修复其他已知问题。
|
|
63
|
+
|
|
64
|
+
### TCplayerLite 2.3.1 @ 2019.04.26
|
|
65
|
+
- 增加 fivConfig 参数。
|
|
66
|
+
- 默认加载 flv.1.5.js。
|
|
67
|
+
- 修复其他已知问题。
|
|
68
|
+
|
|
69
|
+
### TCplayerLite 2.3.0 @ 2019.04.19
|
|
70
|
+
- 增加部分功能参数选项。
|
|
71
|
+
- 参数 coverpic 改为 poster。
|
|
72
|
+
- destroy 销毁 flv.js 实例。
|
|
73
|
+
- 修复其他已知问题。
|
|
74
|
+
|
|
75
|
+
### TCplayerLite 2.2.3 @ 2018.12.17
|
|
76
|
+
- 优化播放逻辑。
|
|
77
|
+
- 解决 iOS 微信没有播放事件触发的情况下，出现 loading 动画的问题。
|
|
78
|
+
- 修复其他已知问题。
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
### TCplayerLite 2.2.2 @ 2018.05.03
|
|
82
|
+
- 优化 loading 组件。
|
|
83
|
+
- 优化 Flash destroy 方法。
|
|
84
|
+
- 默认使用 H5 播放。
|
|
85
|
+
- 修复已知问题。
|
|
86
|
+
|
|
87
|
+
### TCplayerLite 2.2.1 @ 2017.12.20
|
|
88
|
+
- 增加可配置清晰度文案功能。
|
|
89
|
+
- 设置默认清晰度。
|
|
90
|
+
- 支持切换清晰度方法。
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
### TCplayerLite 2.2.1 @ 2017.12.07
|
|
94
|
+
- 增加 systemFullscreen 参数。
|
|
95
|
+
- 增加 flashUrl 参数。
|
|
96
|
+
- 修复音量 Max 后进行静音切换的 UI 问题。
|
|
97
|
+
- 修复 iOS 11 微信下需要单击两次才能播放的问题。
|
|
98
|
+
- 修复 safari 11 系统样式被遮挡的问题。
|
|
99
|
+
- 适配在 x5 内核会触发 seeking，但不会触发 seeked 的情况。
|
|
100
|
+
- 修复进度条拖拽到起始位置，设置 currentTime 失败的问题。
|
|
101
|
+
- 切换清晰度保持音量不变。
|
|
102
|
+
- 修复页面宽度为0，播放器宽度判断失败问题。
|
|
103
|
+
- destroy 方法增加完全销毁播放器节点。
|
|
104
|
+
|
|
105
|
+
### TCplayerLite 2.2.0 @ 2017.06.30
|
|
106
|
+
- 增加控制播放环境判断的参数： Flash、h5_flv、x5_player。
|
|
107
|
+
- 调整播放器初始化逻辑，优化错误提示效果。
|
|
108
|
+
- 增加 flv.js 支持，在符合条件的情况下可以采用 flv.js 播放 FLV。
|
|
109
|
+
- 支持 x5-video-orientation 属性。
|
|
110
|
+
- 增加播放环境判断逻辑，可通过参数调整 H5 与 Flash 的优先级，以及是否启用 TBS 播放。
|
|
111
|
+
- 启用版本号发布方式，避免影响旧版本的使用者。
|
|
112
|
+
- 优化事件触发的时间戳，统一为标准时间。
|
|
113
|
+
- Bug 修复。
|
|
114
|
+
|
|
115
|
+
### TCplayerLite 2.1.0 @ 2017.03.04
|
|
116
|
+
至2017.06.30，经历数次的迭代开发，逐步趋于稳定，目前文档的功能描述中，如果没有特殊说明，皆基于此版本。
|
|
117
|
+
|
|
118
|
+
## Adapter 插件更新日志
|
|
119
|
+
### Adapter 插件发布 @ 2021.07.16
|
|
120
|
+
首次发布播放器 Adapter 版
|
|
@@ -0,0 +1,212 @@
|
|
|
1
|
+
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>LVB Timeshift Sprite Tester</title>
|
|
5
|
+
</head>
|
|
6
|
+
<body>
|
|
7
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
|
8
|
+
<script src="https://cdn.jsdelivr.net/npm/hls.js@1.4.12/dist/hls.min.js"></script>
|
|
9
|
+
Play Domain: <input id="playDomain" type="text" size="64" value="5000.liveplay.myqcloud.com"><br/>
|
|
10
|
+
Play Path: <input id="playPath" type="text" size="64" value="testflv"><br/>
|
|
11
|
+
Stream Id: <input id="playStreamId" type="text" size="64" value="5000_sprite_test_old"><br/>
|
|
12
|
+
Player StartTime: <input id="playStarttime" type="datetime-local"><br/>
|
|
13
|
+
Player EndTime: <input id="playEndtime" type="datetime-local"><br/>
|
|
14
|
+
Query Mode: <input id="queryMode" type="text" value="1"><br/>
|
|
15
|
+
<button id="getSpriteConfig">GetSpriteConfig</button><b style="color:Tomato;">Step1</b><br/>
|
|
16
|
+
<p id="status"></p>
|
|
17
|
+
|
|
18
|
+
URL: <input id="playUrl" type="text" size="128" >
|
|
19
|
+
<button id="play">Play</button><b style="color:Tomato;">Step2</b><br/>
|
|
20
|
+
<video height="600" id="video" controls></video>
|
|
21
|
+
<img id="imgSpriteSub" referrerpolicy="no-referrer" width="0" height="0">
|
|
22
|
+
@<img id="imgSprite" referrerpolicy="no-referrer" width="0" height="0">
|
|
23
|
+
|
|
24
|
+
<p>Sprite Info:</p>
|
|
25
|
+
Prefix: <input type="text" id="picPrefix" disabled="disabled" size="100" value="https://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s"></br>
|
|
26
|
+
Width: <input type="text" id="picWidth" disabled="disabled" value="100"></br>
|
|
27
|
+
Height: <input type="text" id="picHeight" disabled="disabled" value="100"></br>
|
|
28
|
+
Columns: <input type="text" id="picColumns" disabled="disabled" value="4"></br>
|
|
29
|
+
Rows: <input type="text" id="picRows" disabled="disabled" value="3"></br>
|
|
30
|
+
Interval: <input type="text" id="picInterval" disabled="disabled" value="10"></br>
|
|
31
|
+
Playback Offset: <input type="time" id="playOffset" step="1" value="00:00:00">
|
|
32
|
+
<button id="showSprite">Show Sprite</button> <b style="color:Tomato;">Step3</b>
|
|
33
|
+
<p id="spriteStatus"></p>
|
|
34
|
+
|
|
35
|
+
<script>
|
|
36
|
+
// global vars
|
|
37
|
+
var gSpriteConfig = [{}];
|
|
38
|
+
var gConfigIndex = 0;
|
|
39
|
+
var gRelativeOffset = 0;
|
|
40
|
+
|
|
41
|
+
// global init
|
|
42
|
+
var now = new Date();
|
|
43
|
+
var utcStart = new Date(now.getTime() + 8*3600*1000 - 3600*1000);
|
|
44
|
+
var utcEnd = new Date(now.getTime() + 8*3600*1000 + 3600*1000);
|
|
45
|
+
$('#playStarttime').val(utcStart.toISOString().substr(0,16));
|
|
46
|
+
$('#playEndtime').val(utcEnd.toISOString().substr(0,16));
|
|
47
|
+
$('#getSpriteConfig').click(function(){getSpriteConfig();});
|
|
48
|
+
$('#play').click(function(){play();});
|
|
49
|
+
$('#showSprite').click(function(){showSprite();});
|
|
50
|
+
$('#playOffset').on('input', function(){updateSpriteInfo();});
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
// functions
|
|
54
|
+
function getPlayOffset() { // playoffset in seconds
|
|
55
|
+
var tVal = $("#playOffset").val();
|
|
56
|
+
var tArray = tVal.split(":");
|
|
57
|
+
return parseInt(tArray[0]) * 3600 + parseInt(tArray[1]) * 60 + parseInt(tArray[2]);
|
|
58
|
+
}
|
|
59
|
+
function getPlayStarttime() {
|
|
60
|
+
var playStarttime = new Date($('#playStarttime').val());
|
|
61
|
+
return playStarttime.getTime() / 1000;
|
|
62
|
+
}
|
|
63
|
+
function getPlayEndtime() {
|
|
64
|
+
var playEndtime = new Date($('#playEndtime').val());
|
|
65
|
+
return playEndtime.getTime() / 1000;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
function getSpriteConfig() {
|
|
69
|
+
var playStarttime = getPlayStarttime();
|
|
70
|
+
var playEndtime = getPlayEndtime();
|
|
71
|
+
var urlPrefix = "http://" + $('#playDomain').val() +
|
|
72
|
+
"/" + $('#playPath').val() +
|
|
73
|
+
"/" + $('#playStreamId').val();
|
|
74
|
+
var spriteUrl = urlPrefix +
|
|
75
|
+
".json?txTimeshift=on&tsFormat=unix" +
|
|
76
|
+
"&tsSpritemode=" + $('#queryMode').val() +
|
|
77
|
+
"&tsStart=" + playStarttime +
|
|
78
|
+
"&tsEnd=" + playEndtime;
|
|
79
|
+
// xrh req
|
|
80
|
+
$.get(spriteUrl, function(data, status){
|
|
81
|
+
var statusInfo = spriteUrl + "</br>===></br>" + data + "</br>---</br>";
|
|
82
|
+
gSpriteConfig = JSON.parse(data);
|
|
83
|
+
gSpriteConfig.sort((a, b) => {
|
|
84
|
+
return a.start_time - b.start_time; // ascending order
|
|
85
|
+
});
|
|
86
|
+
for (let i = 0; i < gSpriteConfig.length; i++) {
|
|
87
|
+
var ssConf = gSpriteConfig[i];
|
|
88
|
+
if (i == 0 && playStarttime > ssConf.start_time) {
|
|
89
|
+
ssConf.hidden_dur = playStarttime - ssConf.start_time;
|
|
90
|
+
ssConf.play_dur = ssConf.end_time - playStarttime;
|
|
91
|
+
if (ssConf.hasOwnProperty("duration"))
|
|
92
|
+
{
|
|
93
|
+
// estimate previous play duration
|
|
94
|
+
ssConf.play_dur = ssConf.duration * ssConf.play_dur / (ssConf.end_time - ssConf.start_time);
|
|
95
|
+
ssConf.hidden_dur = ssConf.duration - ssConf.play_dur;
|
|
96
|
+
}
|
|
97
|
+
} else {
|
|
98
|
+
ssConf.hidden_dur = 0;
|
|
99
|
+
ssConf.play_dur = ssConf.end_time - ssConf.start_time;
|
|
100
|
+
if (ssConf.hasOwnProperty("duration"))
|
|
101
|
+
ssConf.play_dur = ssConf.duration;
|
|
102
|
+
}
|
|
103
|
+
var unixStart = new Date(ssConf.start_time * 1000);
|
|
104
|
+
var unixEnd = new Date(ssConf.end_time * 1000);
|
|
105
|
+
statusInfo += "[" + unixStart.toLocaleString() + ", " + unixEnd.toLocaleString() + "], " + ssConf.duration + "</br>";
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
// set status info
|
|
109
|
+
$("#status").html(statusInfo);
|
|
110
|
+
var playUrl = urlPrefix + ".m3u8?txTimeshift=on&tsFormat=unix" + /* &tsEventmode=on */
|
|
111
|
+
"&tsStart=" + playStarttime +
|
|
112
|
+
"&tsEnd=" + playEndtime;
|
|
113
|
+
$("#playUrl").val(playUrl);
|
|
114
|
+
|
|
115
|
+
updateSpriteInfo();
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
function updateSpriteInfo() {
|
|
120
|
+
if (gSpriteConfig.length == 0)
|
|
121
|
+
return;
|
|
122
|
+
|
|
123
|
+
// calculate the right sid(session) and play offset(within session)
|
|
124
|
+
var playOffset = getPlayOffset();
|
|
125
|
+
var sumDuration = 0;
|
|
126
|
+
gRelativeOffset = playOffset;
|
|
127
|
+
for (let i = 0; i < gSpriteConfig.length; i++) {
|
|
128
|
+
if (playOffset < sumDuration + gSpriteConfig[i].play_dur) {
|
|
129
|
+
gConfigIndex = i;
|
|
130
|
+
gRelativeOffset = playOffset - sumDuration + gSpriteConfig[i].hidden_dur;
|
|
131
|
+
break;
|
|
132
|
+
}
|
|
133
|
+
sumDuration += gSpriteConfig[i].play_dur;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
var sprite = gSpriteConfig[gConfigIndex];
|
|
137
|
+
$("#picPrefix").val("http://" + $('#playDomain').val() + sprite.path);
|
|
138
|
+
$("#picWidth").val(sprite.width);
|
|
139
|
+
$("#picHeight").val(sprite.height);
|
|
140
|
+
$("#picColumns").val(sprite.cols);
|
|
141
|
+
$("#picRows").val(sprite.rows);
|
|
142
|
+
$("#picInterval").val(sprite.interval);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
function showSprite() {
|
|
146
|
+
// calculate sprite image info
|
|
147
|
+
var picPrefix = $("#picPrefix").val();
|
|
148
|
+
var picWidth = parseInt($("#picWidth").val());
|
|
149
|
+
var picHeight = parseInt($("#picHeight").val());
|
|
150
|
+
var picColumns = parseInt($("#picColumns").val());
|
|
151
|
+
var picRows = parseInt($("#picRows").val());
|
|
152
|
+
var picInterval = parseInt($("#picInterval").val());
|
|
153
|
+
|
|
154
|
+
var picNo = Math.floor(gRelativeOffset / (picInterval * picColumns * picRows));
|
|
155
|
+
var picOffset = Math.floor(gRelativeOffset % (picInterval * picColumns * picRows) / picInterval)
|
|
156
|
+
|
|
157
|
+
// show status
|
|
158
|
+
var picUrl = picPrefix + picNo + ".jpg";
|
|
159
|
+
$("#spriteStatus").html("sprite pic no: " + picNo +
|
|
160
|
+
", sprite inner offset: " + picOffset +
|
|
161
|
+
", relative play offset(s): " + gRelativeOffset);
|
|
162
|
+
|
|
163
|
+
// hardcode for test
|
|
164
|
+
if (picUrl.indexOf("images.cnblogs.com") >= 0) {
|
|
165
|
+
cnPicNo = picNo + 1;
|
|
166
|
+
cnPicNo = cnPicNo.toString();
|
|
167
|
+
while (cnPicNo.length < 3)
|
|
168
|
+
cnPicNo = "0" + cnPicNo;
|
|
169
|
+
picUrl = picPrefix + cnPicNo + ".jpg";
|
|
170
|
+
}
|
|
171
|
+
picUrl += "?txTimeshift=on"
|
|
172
|
+
|
|
173
|
+
// show sprite
|
|
174
|
+
$("#imgSprite").attr("height", picHeight * picRows);
|
|
175
|
+
$("#imgSprite").attr("width", picWidth * picColumns);
|
|
176
|
+
$("#imgSprite").attr("src", picUrl);
|
|
177
|
+
|
|
178
|
+
var xpos = -Math.floor(picOffset % picColumns) * picWidth;
|
|
179
|
+
var ypos = -Math.floor(picOffset / picColumns) * picHeight;
|
|
180
|
+
$("#imgSpriteSub").attr("height", picHeight);
|
|
181
|
+
$("#imgSpriteSub").attr("width", picWidth);
|
|
182
|
+
$("#imgSpriteSub").css("background", "url(" + picUrl + ") " + xpos + "px " + ypos + "px");
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
function play() {
|
|
186
|
+
var playUrl = $('#playUrl').val(); // 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'
|
|
187
|
+
var video = document.getElementById('video');
|
|
188
|
+
if (Hls.isSupported()) {
|
|
189
|
+
var hls = new Hls({
|
|
190
|
+
debug: true,
|
|
191
|
+
});
|
|
192
|
+
hls.loadSource(playUrl);
|
|
193
|
+
hls.attachMedia(video);
|
|
194
|
+
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
|
|
195
|
+
video.muted = true;
|
|
196
|
+
video.play();
|
|
197
|
+
});
|
|
198
|
+
}
|
|
199
|
+
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
|
|
200
|
+
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
|
|
201
|
+
// This is using the built-in support of the plain video element, without using hls.js.
|
|
202
|
+
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
|
203
|
+
video.src = playUrl;
|
|
204
|
+
video.addEventListener('canplay', function () {
|
|
205
|
+
video.play();
|
|
206
|
+
});
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
</script>
|
|
210
|
+
</body>
|
|
211
|
+
</html>
|
|
212
|
+
|
|
@@ -1,183 +1,112 @@
|
|
|
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
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
<!--http://cloudcache.tencent-cloud.com/open/qcloud/video/vcplayer/libs/hls.min.0.12.4.js-->
|
|
17
|
-
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 FLV 格式的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 flv.min.x.x.x.js。-->
|
|
18
|
-
<!--<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/libs/flv.min.1.6.3.js"></script>-->
|
|
19
|
-
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 DASH 视频，需要在 tcplayer.vx.x.x.min.js 之前引入 dash.min.x.x.x.js。-->
|
|
20
|
-
<!--<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/libs/dash.all.min.4.5.2.js"></script>-->
|
|
21
|
-
<!--播放器脚本文件-->
|
|
22
|
-
<!--<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/tcplayer.v4.7.2.min.js"></script>-->
|
|
23
|
-
<!--<script src="https://testmig-1306264703.cos.ap-guangzhou.myqcloud.com/lingxi/js/flv.min0905.js"></script>
|
|
24
|
-
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v5.0.0/tcplayer.min.css" rel="stylesheet"/>
|
|
25
|
-
|
|
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
|
-
|
|
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.0/tcplayer.v5.0.0.min.js"></script>
|
|
33
|
-
|
|
34
|
-
<!--<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>-->
|
|
35
|
-
|
|
36
|
-
<!--<script src="https://static.lexiang-asset.net/lake/tcplayer@v4.5.1/TXLivePlayer-1.2.1.min.js"></script>
|
|
37
|
-
<script src="https://static.lexiang-asset.net/lake/tcplayer@v4.5.1/libs/flv.min.1.6.2.js"></script>
|
|
38
|
-
<script src="https://static.lexiang-asset.net/lake/tcplayer@v4.5.1/libs/hls.min.0.13.2m.js"></script>-->
|
|
39
|
-
<!--<script src="tcplayer.v4.8.0.min0904.js"></script>-->
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
<!--<script src="https://webrtc-demo.myqcloud.com/pull-sdk/js/vconsole.min.js"></script>-->
|
|
43
|
-
|
|
44
|
-
|
|
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="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/tcplayer.v4.5.2.min.js"></script> -->
|
|
12
|
+
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v5.0.0/tcplayer.min.css" rel="stylesheet">
|
|
13
|
+
<!-- <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v5.0.1/libs/hls.min.1.1.6.js"></script> -->
|
|
14
|
+
<!-- <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v5.0.1/tcplayer.v5.0.1.min.js"></script> -->
|
|
15
|
+
<script src="http://10.21.119.52:8080/dist/tcplayer.v5.0.1.js"></script>
|
|
45
16
|
<style>
|
|
46
|
-
html,body{
|
|
17
|
+
html,body{
|
|
47
18
|
margin: 0;
|
|
48
19
|
padding: 0;
|
|
49
|
-
height: 100%;
|
|
50
20
|
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
@media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
|
|
59
|
-
.tcp-logo-img {
|
|
60
|
-
width: 50%;
|
|
21
|
+
.tcplayer {
|
|
22
|
+
margin: 0 auto;
|
|
23
|
+
}
|
|
24
|
+
@media screen and (max-width: 480px) {
|
|
25
|
+
#player-container-id {
|
|
26
|
+
width: 100%;
|
|
27
|
+
height: 240px;
|
|
61
28
|
}
|
|
62
29
|
}
|
|
63
30
|
</style>
|
|
64
31
|
</head>
|
|
65
32
|
<body>
|
|
66
|
-
<!-- 设置播放器容器 -->
|
|
67
|
-
<video id="player-container-id" preload="auto" width="400px" height='250px' webkit-playsinline style="background:lightblue" playsinline webkit-playsinline>
|
|
68
33
|
|
|
69
|
-
|
|
34
|
+
<video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
|
|
70
35
|
</video>
|
|
71
|
-
|
|
72
|
-
<!--<button onclick="change()">切换流</button>-->
|
|
73
|
-
<!--<button onclick="quitPinP()">画中画Q</button>-->
|
|
74
|
-
<!--<button onclick="playy1()">重新load</button>
|
|
75
|
-
<button onclick="playy2()">先load再play</button>-->
|
|
76
|
-
<!--<button onclick="Destory()">销毁播放器</button>-->
|
|
77
|
-
<!--
|
|
78
|
-
注意事项：
|
|
79
|
-
* 播放器容器必须为 video 标签
|
|
80
|
-
* player-container-id 为播放器容器的ID，可自行设置
|
|
81
|
-
* 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
|
|
82
|
-
* playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
|
|
83
|
-
* 设置 x5-playsinline 属性会使用 X5 UI 的播放器
|
|
84
|
-
-->
|
|
36
|
+
|
|
85
37
|
<script>
|
|
86
|
-
//var vConsole = new VConsole();
|
|
87
|
-
|
|
88
|
-
var events = [
|
|
89
|
-
"loadstart",
|
|
90
|
-
"suspend",
|
|
91
|
-
"abort",
|
|
92
|
-
"error",
|
|
93
|
-
"emptied",
|
|
94
|
-
"stalled",
|
|
95
|
-
"loadedmetadata",
|
|
96
|
-
"loadeddata",
|
|
97
|
-
"canplay",
|
|
98
|
-
"canplaythrough",
|
|
99
|
-
"playing",
|
|
100
|
-
"waiting",
|
|
101
|
-
"seeking",
|
|
102
|
-
"seeked",
|
|
103
|
-
"ended",
|
|
104
|
-
"durationchange",
|
|
105
|
-
"timeupdate",
|
|
106
|
-
"progress",
|
|
107
|
-
"play",
|
|
108
|
-
"pause",
|
|
109
|
-
"ratechange",
|
|
110
|
-
"resize",
|
|
111
|
-
"volumechange"
|
|
112
|
-
];
|
|
113
|
-
//skipHlsJs:true
|
|
114
|
-
var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
|
|
115
|
-
|
|
116
|
-
// sources:[{src: 'https://live.zhuoshangsoft.com/live/4663880250_lowQlty.flv?txSecret=024dfe8ee2ce589b45111c76ecf388ac&txTime=66D48F7F', }],
|
|
117
|
-
sources:[{src: 'https://liteavapp.qcloud.com/live/liteavdemoplayerstreamid.flv', }],
|
|
118
|
-
// sources:[{src: "https://liteavapp.qcloud.com/live/liteavdemoplayerstreamid.m3u8", }],
|
|
119
|
-
// flvConfig:{
|
|
120
|
-
// lazyLoadMaxDuration：5*60,
|
|
121
|
-
// }
|
|
122
|
-
// fakeFullscreen: true,
|
|
123
|
-
// muted:true,
|
|
124
|
-
// autoplay:true,
|
|
125
|
-
// hlsConfig: {
|
|
126
|
-
// maxBufferLength: 10,
|
|
127
|
-
// maxBufferSize: 40 * 1024 * 1024,
|
|
128
|
-
// maxMaxBufferLength: 30,
|
|
129
|
-
// debug:true,
|
|
130
|
-
// },
|
|
131
|
-
|
|
132
|
-
flvConfig:{
|
|
133
|
-
hasAudio:false,
|
|
134
|
-
},
|
|
135
|
-
licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1314658011_1/v_cube.license',
|
|
136
38
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
// player.src("https://1500005692.vod2.myqcloud.com/43843706vodtranscq1500005692/62656d94387702300542496289/v.f100240.m3u8");
|
|
39
|
+
|
|
140
40
|
|
|
41
|
+
function generateUUID() {
|
|
42
|
+
let d = new Date().getTime();
|
|
43
|
+
let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
|
|
44
|
+
let r = (d + Math.random() * 16) % 16 | 0;
|
|
45
|
+
d = Math.floor(d / 16);
|
|
46
|
+
return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
|
|
47
|
+
});
|
|
48
|
+
return uuid;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
// 鍒濆鍖栬吘璁挱鏀惧櫒
|
|
52
|
+
var tcPlayer;
|
|
53
|
+
function initTCPlayer() {
|
|
54
|
+
tcPlayer = TCPlayer('player-container-id', {
|
|
55
|
+
sources: [{
|
|
56
|
+
// src: 'webrtc://play.ibstop.cn/live/c7132685e8524bd0996f780fbad5de87',
|
|
57
|
+
src: 'webrtc://play.ibstop.cn/live/aead6d63ae314b1fb6a795bbc7652cbb'
|
|
58
|
+
// src: playUrl
|
|
59
|
+
}],
|
|
60
|
+
// webrtcConfig: {
|
|
61
|
+
// fallbackUrl: 'http://play.ibstop.cn/live/1953e4f28e1a4e53ad091d50bd0a7f72.flv',
|
|
62
|
+
// },
|
|
63
|
+
licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1251943848_1/v_cube.license',
|
|
64
|
+
autoplay: true,
|
|
65
|
+
|
|
66
|
+
// controls: false
|
|
67
|
+
});
|
|
68
|
+
tcPlayer.on('webrtcfallback', function (event) {
|
|
69
|
+
console.log(event);
|
|
70
|
+
});
|
|
71
|
+
tcPlayer.on('webrtcevent', function (event) {
|
|
72
|
+
// 浠庡洖璋冨弬鏁� event 涓幏鍙栦簨浠剁姸鎬佺爜鍙婄浉鍏虫暟鎹�
|
|
73
|
+
console.log(event);
|
|
74
|
+
});
|
|
75
|
+
tcPlayer.on('error', function (error) {
|
|
76
|
+
// 鍋氫竴浜涘鐞�
|
|
77
|
+
console.log('error', error);
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
tcPlayer.on('blocked', function() {
|
|
81
|
+
console.log('blocked');
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
tcPlayer.on('pause', function() {
|
|
85
|
+
console.log('pause');
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
tcPlayer.on('fullscreenchange', function(e) {
|
|
89
|
+
console.log('eee', e, tcPlayer.isFullscreen());
|
|
90
|
+
})
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
setTimeout(() => {
|
|
95
|
+
tcPlayer.play();
|
|
96
|
+
}, 500);
|
|
97
|
+
|
|
141
98
|
|
|
142
|
-
|
|
143
99
|
|
|
144
|
-
// events.forEach(function(val, i){
|
|
145
|
-
// player.on(val, function (event) {
|
|
146
|
-
// console.info(val, event);
|
|
147
|
-
// });
|
|
148
|
-
//});
|
|
149
100
|
|
|
150
|
-
function change(){
|
|
151
|
-
player.src("https://live.zhuoshangsoft.com/live/4663880250_highQlty.flv?txSecret=86dc9c5cd53e7f830451317aee0f2f28&txTime=66D48F7F");
|
|
152
101
|
|
|
153
|
-
// var a = localStorage.getItem(key);
|
|
154
|
-
// console.log(a);
|
|
155
|
-
|
|
156
|
-
|
|
157
102
|
}
|
|
158
|
-
player.on("ended",function(){
|
|
159
|
-
console.log("ended抛出来了");
|
|
160
|
-
})
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
// setTimeout(function(){
|
|
165
|
-
// var getplaystate = player.paused();
|
|
166
|
-
// if(getplaystate==true){
|
|
167
|
-
// console.log("没有自动播放");
|
|
168
|
-
// //没有自动播放做操作
|
|
169
|
-
// }else{
|
|
170
|
-
// console.log("自动播放了");
|
|
171
|
-
// player.load();
|
|
172
|
-
// }
|
|
173
|
-
// },1000)
|
|
174
|
-
|
|
175
|
-
//})
|
|
176
|
-
//
|
|
177
|
-
|
|
178
103
|
|
|
179
104
|
|
|
180
|
-
|
|
105
|
+
|
|
106
|
+
initTCPlayer()
|
|
107
|
+
|
|
181
108
|
</script>
|
|
182
109
|
</body>
|
|
183
|
-
</html>
|
|
110
|
+
</html>
|
|
111
|
+
|
|
112
|
+
|