tcplayer.js 4.8.0-beta.4 → 5.0.0
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/dist/examples/vod/{tcplayer-vod-all-skip.html → tcplayer-skip.html} +47 -31
- package/dist/examples/vod/tcplayer-vod-all.html +228 -0
- 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-vr.html +138 -0
- package/dist/examples/webrtc/tcplayer-src-webrtc-abr-new.html +109 -0
- package/dist/examples/webrtc/tcplayer-src-webrtc-abr.html +1 -2
- package/dist/examples/webrtc/tcplayer-src-webrtc.html +9 -84
- package/dist/libs/TXLivePlayer-1.3.4.min.js +1 -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.v5.0.0.min.js +26 -0
- package/package.json +2 -2
- package/dist/examples/vod/video.html +0 -15
- package/dist/libs/TXLivePlayer-1.3.0.min.js +0 -1
- package/dist/tcplayer.v4.8.0.min.js +0 -22
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
|
|
7
7
|
<title>腾讯云视频点播示例</title>
|
|
8
8
|
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.min.css" rel="stylesheet"/>
|
|
9
|
-
|
|
9
|
+
|
|
10
10
|
<!--播放器脚本文件-->
|
|
11
11
|
<script src="https://testmig-1306264703.cos.ap-guangzhou.myqcloud.com/vin/tcplayer.v4.8.0.min.js"></script>
|
|
12
12
|
|
|
@@ -33,9 +33,17 @@
|
|
|
33
33
|
</style>
|
|
34
34
|
</head>
|
|
35
35
|
<body>
|
|
36
|
-
|
|
37
|
-
<
|
|
38
|
-
|
|
36
|
+
|
|
37
|
+
<div id="video-wrapper">
|
|
38
|
+
<!-- 设置播放器容器 -->
|
|
39
|
+
<video id="player-container-id1" preload="auto" width="640" height="360" playsinline webkit-playsinline>
|
|
40
|
+
</video>
|
|
41
|
+
|
|
42
|
+
<video id="player-container-id2" style="display: none" preload="auto" width="640" height="360" playsinline webkit-playsinline>
|
|
43
|
+
</video>
|
|
44
|
+
</div>
|
|
45
|
+
|
|
46
|
+
|
|
39
47
|
<!--
|
|
40
48
|
注意事项：
|
|
41
49
|
* 播放器容器必须为 video 标签
|
|
@@ -45,44 +53,52 @@
|
|
|
45
53
|
* 设置 x5-playsinline 属性会使用 X5 UI 的播放器
|
|
46
54
|
-->
|
|
47
55
|
<script>
|
|
48
|
-
var
|
|
49
|
-
var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
|
|
56
|
+
var player = TCPlayer('player-container-id1', { // player-container-id 为播放器容器ID，必须与html中一致
|
|
50
57
|
autoplay: true,
|
|
51
|
-
|
|
52
|
-
//
|
|
53
|
-
// appID: '1500015539',
|
|
54
|
-
// fileID: '3270835010799147274',
|
|
55
|
-
// psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAxNTUzOSwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJPcmlnaW5hbCIsImltYWdlU3ByaXRlRGVmaW5pdGlvbiI6MTAsInJhd0FkYXB0aXZlRGVmaW5pdGlvbiI6MTB9LCJjdXJyZW50VGltZVN0YW1wIjoxNjg5NzUwMTYwLCJleHBpcmVUaW1lU3RhbXAiOjE2ODk4MzY1NjAsImZpbGVJZCI6IjMyNzA4MzUwMTA3OTkxNDcyNzQiLCJ1cmxBY2Nlc3NJbmZvIjp7InQiOiI2NGI4ZGMxMCJ9fQ.cjNK5v1Hlhy10UTvDcnZwTCeSTOliNIsx4nizlCNRtg',
|
|
56
|
-
|
|
58
|
+
|
|
59
|
+
// 6. AES
|
|
57
60
|
fileID: '243791576943072647',
|
|
58
61
|
appID: '1306264703',
|
|
59
62
|
psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMwNjI2NDcwMywiZmlsZUlkIjoiMjQzNzkxNTc2OTQzMDcyNjQ3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDQ2OTk3MSwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTMwNjI2NDcwMy52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.FOcmChHfrGY9tYCDn20MSQi-IqvQ9U_U6qLNgx9MhLg',
|
|
60
63
|
|
|
64
|
+
|
|
61
65
|
hlsConfig: {
|
|
62
66
|
skip: true,
|
|
63
|
-
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
});
|
|
64
70
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
// switchErrorText: '失败', // 切换失败时文案
|
|
78
|
-
}
|
|
71
|
+
window.player = player;
|
|
72
|
+
|
|
73
|
+
player.on('error', function(e) {
|
|
74
|
+
if (e.data.code === 4) {
|
|
75
|
+
|
|
76
|
+
if (window.player) {
|
|
77
|
+
// 先隐藏 再延时销毁，否则会报错
|
|
78
|
+
document.getElementById('player-container-id1').style.display = 'none';
|
|
79
|
+
setTimeout(function() {
|
|
80
|
+
window.player.pause();
|
|
81
|
+
window.player.dispose();
|
|
82
|
+
}, 1000);
|
|
79
83
|
}
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
document.getElementById('player-container-id2').style.display = 'block';
|
|
87
|
+
var player = TCPlayer('player-container-id2', { // player-container-id 为播放器容器ID，必须与html中一致
|
|
88
|
+
autoplay: true,
|
|
89
|
+
|
|
90
|
+
// 6. AES
|
|
91
|
+
fileID: '243791576943072647',
|
|
92
|
+
appID: '1306264703',
|
|
93
|
+
psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMwNjI2NDcwMywiZmlsZUlkIjoiMjQzNzkxNTc2OTQzMDcyNjQ3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDQ2OTk3MSwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTMwNjI2NDcwMy52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.FOcmChHfrGY9tYCDn20MSQi-IqvQ9U_U6qLNgx9MhLg',
|
|
94
|
+
|
|
95
|
+
fakeFullScreen: true,
|
|
96
|
+
hlsConfig: {
|
|
97
|
+
skip: false,
|
|
98
|
+
}
|
|
99
|
+
});
|
|
80
100
|
}
|
|
81
101
|
});
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
// player.src('webrtc://global-lebtest-play.myqcloud.com/live/lebtest?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=69f1eb8c');
|
|
85
|
-
// player.src('https://global-lebtest-play.myqcloud.com/live/lebtest.flv');
|
|
86
102
|
|
|
87
103
|
</script>
|
|
88
104
|
</body>
|
|
@@ -0,0 +1,228 @@
|
|
|
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
|
+
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.min.css" rel="stylesheet"/>
|
|
9
|
+
|
|
10
|
+
<!-- <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.8.0/libs/hls.min.1.1.6.js"></script> -->
|
|
11
|
+
<!-- <script src="http://127.0.0.1:8082/dist/hls.js"></script> -->
|
|
12
|
+
<!--播放器脚本文件-->
|
|
13
|
+
<!-- <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.8.0/tcplayer.v4.8.0.min.js"></script> -->
|
|
14
|
+
<!-- <script src="https://vincentlli-1306264703.cos.ap-nanjing.myqcloud.com/tcplayer/tcplayer.v4.8.0.js"></script> -->
|
|
15
|
+
<!-- <script src="https://webrtc-demo.myqcloud.com/pull-sdk/js/vconsole.min.js"></script> -->
|
|
16
|
+
<script src="http://localhost:8080/dist/tcplayer.v5.0.0.js"></script>
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
<style>
|
|
21
|
+
html,body{
|
|
22
|
+
margin: 0;
|
|
23
|
+
padding: 0;
|
|
24
|
+
}
|
|
25
|
+
.tcplayer {
|
|
26
|
+
margin: 0 auto;
|
|
27
|
+
}
|
|
28
|
+
@media screen and (max-width: 640px) {
|
|
29
|
+
#player-container-id {
|
|
30
|
+
width: 100%;
|
|
31
|
+
height: 270px;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
/* 设置logo在高分屏的显示样式 */
|
|
35
|
+
@media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
|
|
36
|
+
.tcp-logo-img {
|
|
37
|
+
width: 50%;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
</style>
|
|
41
|
+
</head>
|
|
42
|
+
<body>
|
|
43
|
+
<!-- 设置播放器容器 -->
|
|
44
|
+
<video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
|
|
45
|
+
</video>
|
|
46
|
+
<button id="switch">切换</button>
|
|
47
|
+
<!--
|
|
48
|
+
注意事项：
|
|
49
|
+
* 播放器容器必须为 video 标签
|
|
50
|
+
* player-container-id 为播放器容器的ID，可自行设置
|
|
51
|
+
* 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
|
|
52
|
+
* playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
|
|
53
|
+
* 设置 x5-playsinline 属性会使用 X5 UI 的播放器
|
|
54
|
+
-->
|
|
55
|
+
<script>
|
|
56
|
+
// var vConsole = new VConsole();
|
|
57
|
+
// TCPlayer.mountHlsProvider(true);
|
|
58
|
+
var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
|
|
59
|
+
// autoplay: true,
|
|
60
|
+
// language: 'en',
|
|
61
|
+
// 1. 历史数据，无psign场景
|
|
62
|
+
// fileID: '5285890799710670616', // 请传入需要播放的视频filID 必须
|
|
63
|
+
// appID: '1400329073', // 请传入点播账号的appID 必须
|
|
64
|
+
|
|
65
|
+
// 2. 原始视频
|
|
66
|
+
// fileID: '243791576943072647',
|
|
67
|
+
// appID: '1306264703',
|
|
68
|
+
// psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMwNjI2NDcwMywiZmlsZUlkIjoiMjQzNzkxNTc2OTQzMDcyNjQ3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDQ2OTg4NSwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJPcmlnaW5hbCJ9LCJ1cmxBY2Nlc3NJbmZvIjp7ImRvbWFpbiI6IjEzMDYyNjQ3MDMudm9kMi5teXFjbG91ZC5jb20iLCJzY2hlbWUiOiJIVFRQUyJ9fQ.6tX8MyAMYaupCJeyfhUCf_K-li7nZoISeSxEk34R-lw',
|
|
69
|
+
|
|
70
|
+
// 3. AES + widevine + fairplay
|
|
71
|
+
// TODO:playcgi存在drmtoken覆盖问题，导致AES不可用，后端修复
|
|
72
|
+
// fileID: '243791576943072647',
|
|
73
|
+
// appID: '1306264703',
|
|
74
|
+
// psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMwNjI2NDcwMywiZmlsZUlkIjoiMjQzNzkxNTc2OTQzMDcyNjQ3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDQ2OTkwNSwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyLCJ3aWRldmluZURlZmluaXRpb24iOjEzLCJmYWlyUGxheURlZmluaXRpb24iOjExfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTMwNjI2NDcwMy52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.Ip_APIRM7oPyLGGdzdAyPmYs0H3fqtP_hDuCRaKfHy4',
|
|
75
|
+
|
|
76
|
+
// 4. AES + widevine
|
|
77
|
+
// TODO:playcgi存在drmtoken覆盖问题，导致AES不可用，后端修复
|
|
78
|
+
// fileID: '243791576943072647',
|
|
79
|
+
// appID: '1306264703',
|
|
80
|
+
// psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMwNjI2NDcwMywiZmlsZUlkIjoiMjQzNzkxNTc2OTQzMDcyNjQ3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDQ2OTkzMCwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyLCJ3aWRldmluZURlZmluaXRpb24iOjEzfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTMwNjI2NDcwMy52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.v6Tnc9RozzluhDOmsj2pQ920CBevpvUXW0jvzySjmME',
|
|
81
|
+
|
|
82
|
+
// 5. AES + fairplay
|
|
83
|
+
// TODO:playcgi存在drmtoken覆盖问题，导致AES不可用，后端修复
|
|
84
|
+
// fileID: '243791576943072647',
|
|
85
|
+
// appID: '1306264703',
|
|
86
|
+
// psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMwNjI2NDcwMywiZmlsZUlkIjoiMjQzNzkxNTc2OTQzMDcyNjQ3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDQ2OTk1NCwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyLCJmYWlyUGxheURlZmluaXRpb24iOjExfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTMwNjI2NDcwMy52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.vRZS29srBfpGAVXiAixURviFJZel_Aq3jnC_V_bX7hk',
|
|
87
|
+
|
|
88
|
+
// 6. AES
|
|
89
|
+
fileID: '243791576943072647',
|
|
90
|
+
appID: '1306264703',
|
|
91
|
+
psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMwNjI2NDcwMywiZmlsZUlkIjoiMjQzNzkxNTc2OTQzMDcyNjQ3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDQ2OTk3MSwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTMwNjI2NDcwMy52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.FOcmChHfrGY9tYCDn20MSQi-IqvQ9U_U6qLNgx9MhLg',
|
|
92
|
+
// licenseUrl: 'https://license-test.vod2.myqcloud.com/test/license/testV2/1300054025_1/v_cube.license',
|
|
93
|
+
licenseUrl: 'https://license-test.vod2.myqcloud.com/test/license/testV2/1251132654_1/v_cube.license',
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
// 基础版
|
|
98
|
+
// https://license-test.vod2.myqcloud.com/test/license/testV2/1251132654_1/v_cube.license
|
|
99
|
+
|
|
100
|
+
// 高级版
|
|
101
|
+
// https://license-test.vod2.myqcloud.com/test/license/testV2/1251132654_1/v_cube.license
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
// licenseUrl: 'https://license-test.vod2.myqcloud.com/test/license/testV2/1300054025_1/v_cube.license',
|
|
105
|
+
|
|
106
|
+
// licenseUrl: 'https://vincentlli-1306264703.cos.ap-nanjing.myqcloud.com/tcplayer/vcube.license',
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
// fileID: '3270835010498441393',
|
|
110
|
+
// appID: '1500012967',
|
|
111
|
+
// psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAxMjk2NywiZmlsZUlkIjoiMzI3MDgzNTAxMDQ5ODQ0MTM5MyIsImN1cnJlbnRUaW1lU3RhbXAiOjE2ODkwNjY4NzUsImNvbnRlbnRJbmZvIjp7ImF1ZGlvVmlkZW9UeXBlIjoiUHJvdGVjdGVkQWRhcHRpdmUiLCJkcm1BZGFwdGl2ZUluZm8iOnsid2lkZXZpbmVEZWZpbml0aW9uIjoxNDQ0Njc5fX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTUwMDAxMjk2Ny52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFAifX0.kLW4YWXMoomnyzLwzMlLD2jJQnP2NbliQQ33vByC-DI',
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
// 7. widevine
|
|
116
|
+
// fileID: '243791576943072647',
|
|
117
|
+
// appID: '1306264703',
|
|
118
|
+
// psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMwNjI2NDcwMywiZmlsZUlkIjoiMjQzNzkxNTc2OTQzMDcyNjQ3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDQ3MDk3MywiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJ3aWRldmluZURlZmluaXRpb24iOjEzfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTMwNjI2NDcwMy52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.mpuMSDumwNh4RQZVJOxya7z12jQfIWsVt_8ByfGS3r0',
|
|
119
|
+
|
|
120
|
+
// 8. fairplay
|
|
121
|
+
// fileID: '243791576943072647',
|
|
122
|
+
// appID: '1306264703',
|
|
123
|
+
// psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMwNjI2NDcwMywiZmlsZUlkIjoiMjQzNzkxNTc2OTQzMDcyNjQ3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDQ3MTAwMywiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJmYWlyUGxheURlZmluaXRpb24iOjExfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTMwNjI2NDcwMy52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.ysDF4VupO8A2zRD_3uD6uFSbw_NQwhSgJTQyxj5oARI',
|
|
124
|
+
|
|
125
|
+
// 9. 不加密HLS
|
|
126
|
+
// fileID: '243791576943072647',
|
|
127
|
+
// appID: '1306264703',
|
|
128
|
+
// psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMwNjI2NDcwMywiZmlsZUlkIjoiMjQzNzkxNTc2OTQzMDcyNjQ3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDQ3MDAwNiwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJSYXdBZGFwdGl2ZSIsInJhd0FkYXB0aXZlRGVmaW5pdGlvbiI6MTB9LCJ1cmxBY2Nlc3NJbmZvIjp7ImRvbWFpbiI6IjEzMDYyNjQ3MDMudm9kMi5teXFjbG91ZC5jb20iLCJzY2hlbWUiOiJIVFRQUyJ9fQ.-yxAj1SBp-4QK7sC5Sz7E6gFuqRgY06vbN1Nkto0GQA',
|
|
129
|
+
|
|
130
|
+
// fileID: '3270835010468833724',
|
|
131
|
+
// appID: '1500012967',
|
|
132
|
+
// psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAxMjk2NywiZmlsZUlkIjoiMzI3MDgzNTAxMDQ2ODgzMzcyNCIsImN1cnJlbnRUaW1lU3RhbXAiOjE2ODkwNDc4ODUsImNvbnRlbnRJbmZvIjp7ImF1ZGlvVmlkZW9UeXBlIjoiUHJvdGVjdGVkQWRhcHRpdmUiLCJkcm1BZGFwdGl2ZUluZm8iOnsid2lkZXZpbmVEZWZpbml0aW9uIjoxNDQ0Njc5fX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTUwMDAxMjk2Ny52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFAifX0.2shCzGjOrRQF_oa5SpBckm08hvX0GhKw6r-K-0K0thc',
|
|
133
|
+
|
|
134
|
+
// 10. 不加密DASH
|
|
135
|
+
// fileID: '243791576943072647',
|
|
136
|
+
// appID: '1306264703',
|
|
137
|
+
// psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMwNjI2NDcwMywiZmlsZUlkIjoiMjQzNzkxNTc2OTQzMDcyNjQ3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDQ3MDAxOSwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJSYXdBZGFwdGl2ZSIsInJhd0FkYXB0aXZlRGVmaW5pdGlvbiI6MjB9LCJ1cmxBY2Nlc3NJbmZvIjp7ImRvbWFpbiI6IjEzMDYyNjQ3MDMudm9kMi5teXFjbG91ZC5jb20iLCJzY2hlbWUiOiJIVFRQUyJ9fQ.3JcFHAKh9cTajDM1r0uNquuI1q3J4Kk1--X5ZDG5jck',
|
|
138
|
+
|
|
139
|
+
// 11. AES 测试loadVideoByID
|
|
140
|
+
// appID: '1500005692',
|
|
141
|
+
// fileID: '387702307006254554',
|
|
142
|
+
// psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNTY5MiwiZmlsZUlkIjoiMzg3NzAyMzA3MDA2MjU0NTU0IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDMxMDM1MiwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTUwMDAwNTY5Mi52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFAifX0.PFwxL9NNs_gyrR5U3dxwzeip3wZT4M-Fvtd0H2WkjnA',
|
|
143
|
+
webrtcConfig: {
|
|
144
|
+
connectRetryCount: 10,
|
|
145
|
+
connectRetryDelay: 2,
|
|
146
|
+
signalDomain: {
|
|
147
|
+
protocol: 'http', // todo 现网发布要改
|
|
148
|
+
domain: 'webrtc-play-dev.media-cast.vod-qcloud.com', // todo 现网发布要改
|
|
149
|
+
query: false,
|
|
150
|
+
},
|
|
151
|
+
},
|
|
152
|
+
//其他参数请在开发文档中查看
|
|
153
|
+
plugins: {
|
|
154
|
+
// SafeCheck: {
|
|
155
|
+
|
|
156
|
+
// },
|
|
157
|
+
ContinuePlay: {
|
|
158
|
+
// auto: true // 是否在播放时自动续播
|
|
159
|
+
},
|
|
160
|
+
ProgressMarker: true,
|
|
161
|
+
ContextMenu: {
|
|
162
|
+
statistic: true,
|
|
163
|
+
levelSwitch: {
|
|
164
|
+
open: true, // 打开切换提示
|
|
165
|
+
// switchingText: '开始', // 开始切换时文案
|
|
166
|
+
// switchedText: '成功', // 切换成功时文案
|
|
167
|
+
// switchErrorText: '失败', // 切换失败时文案
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
});
|
|
172
|
+
|
|
173
|
+
|
|
174
|
+
// setTimeout(() => {
|
|
175
|
+
// console.log('player ori', player);
|
|
176
|
+
// player.loadVideoByID({
|
|
177
|
+
// fileID: '243791576943072647',
|
|
178
|
+
// appID: '1306264703',
|
|
179
|
+
// psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMwNjI2NDcwMywiZmlsZUlkIjoiMjQzNzkxNTc2OTQzMDcyNjQ3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDQ2OTk3MSwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTMwNjI2NDcwMy52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.FOcmChHfrGY9tYCDn20MSQi-IqvQ9U_U6qLNgx9MhLg',
|
|
180
|
+
// });
|
|
181
|
+
// }, 3000);
|
|
182
|
+
// player.src('http://1305533787.vod2.myqcloud.com/6bfcd0cavodtranssgp1305533787/df5fac093270835010461032124/v.f100010.mp4');
|
|
183
|
+
|
|
184
|
+
// player.src('webrtc://global-lebtest-play.myqcloud.com/live/lebtest?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=69f1eb8c');
|
|
185
|
+
|
|
186
|
+
// player.src('http://vincent.pub/live/sei.m3u8');
|
|
187
|
+
// player.src('https://1305071164.vod2.myqcloud.com/0500fb7evodcq1305071164/76cbdeb53270835009987527597/playlist_eof.m3u8');
|
|
188
|
+
// player.src('https://68789.liveplay.myqcloud.com/live/webrtc_demo_1686626553419.flv');
|
|
189
|
+
|
|
190
|
+
|
|
191
|
+
// player.ready(function() {
|
|
192
|
+
// debugger
|
|
193
|
+
// player.tech_.hlsProvider.hls.removeLevel(2)
|
|
194
|
+
// });
|
|
195
|
+
|
|
196
|
+
player.on('waiting', function(e) {
|
|
197
|
+
console.log('waiting');
|
|
198
|
+
});
|
|
199
|
+
player.on('error', function(e) {
|
|
200
|
+
console.log('e', e);
|
|
201
|
+
});
|
|
202
|
+
|
|
203
|
+
player.on('playcgistart', function(e) {
|
|
204
|
+
console.log('playcgistart', e);
|
|
205
|
+
});
|
|
206
|
+
|
|
207
|
+
player.on('playcgiend', function(e) {
|
|
208
|
+
console.log('playcgiend', e);
|
|
209
|
+
});
|
|
210
|
+
|
|
211
|
+
player.on('pause', function(e) {
|
|
212
|
+
console.log('pause');
|
|
213
|
+
});
|
|
214
|
+
|
|
215
|
+
|
|
216
|
+
|
|
217
|
+
document.getElementById('switch').addEventListener('click', function() {
|
|
218
|
+
player.src('webrtc://68789.liveplay.myqcloud.com/live/webrtc_demo_1688439945507');
|
|
219
|
+
|
|
220
|
+
// player.loadVideoByID({
|
|
221
|
+
// appID: '1500005692',
|
|
222
|
+
// fileID: '387702307006254554',
|
|
223
|
+
// psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNTY5MiwiZmlsZUlkIjoiMzg3NzAyMzA3MDA2MjU0NTU0IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDMxMDM1MiwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTUwMDAwNTY5Mi52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFAifX0.PFwxL9NNs_gyrR5U3dxwzeip3wZT4M-Fvtd0H2WkjnA',
|
|
224
|
+
// });
|
|
225
|
+
});
|
|
226
|
+
</script>
|
|
227
|
+
</body>
|
|
228
|
+
</html>
|
|
@@ -69,9 +69,10 @@
|
|
|
69
69
|
'seeking',
|
|
70
70
|
'seeked',
|
|
71
71
|
'ended',
|
|
72
|
+
'load',
|
|
72
73
|
'durationchange',
|
|
73
|
-
'timeupdate',
|
|
74
|
-
'progress',
|
|
74
|
+
// 'timeupdate',
|
|
75
|
+
// 'progress',
|
|
75
76
|
'play',
|
|
76
77
|
'pause',
|
|
77
78
|
'ratechange',
|
|
@@ -79,8 +80,10 @@
|
|
|
79
80
|
'volumechange'
|
|
80
81
|
];
|
|
81
82
|
var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
|
|
82
|
-
fileID: '
|
|
83
|
-
appID: '
|
|
83
|
+
fileID: '243791576943072647',
|
|
84
|
+
appID: '1306264703',
|
|
85
|
+
psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMwNjI2NDcwMywiZmlsZUlkIjoiMjQzNzkxNTc2OTQzMDcyNjQ3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY3MDQ2OTk3MSwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTMwNjI2NDcwMy52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.FOcmChHfrGY9tYCDn20MSQi-IqvQ9U_U6qLNgx9MhLg',
|
|
86
|
+
|
|
84
87
|
//其他参数请在开发文档中查看
|
|
85
88
|
});
|
|
86
89
|
events.forEach(function(val, i){
|
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
|
|
7
7
|
<title>腾讯云视频点播示例</title>
|
|
8
8
|
|
|
9
|
-
<link href="
|
|
10
|
-
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.
|
|
9
|
+
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.8.0/tcplayer.min.css" rel="stylesheet">
|
|
10
|
+
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.8.0/tcplayer.v4.8.0.min.js"></script>
|
|
11
11
|
<style>
|
|
12
12
|
html,body{
|
|
13
13
|
margin: 0;
|
|
@@ -37,6 +37,10 @@
|
|
|
37
37
|
* 设置 x5-playsinline 属性会使用 X5 UI 的播放器
|
|
38
38
|
-->
|
|
39
39
|
<script>
|
|
40
|
+
// 设置首次水印出现的时间，方便观察效果
|
|
41
|
+
// 不设置会在随机时间间歇出现
|
|
42
|
+
localStorage.setItem('ghostWatermarkFirstShow', 0);
|
|
43
|
+
|
|
40
44
|
// 签名中带有幽灵水印文本
|
|
41
45
|
var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
|
|
42
46
|
fileID: '243791576943072647',
|
|
@@ -0,0 +1,138 @@
|
|
|
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
|
+
|
|
11
|
+
|
|
12
|
+
<link href="https://tcplayer.vcube.tencent.com/tcplayer/release/v4.8.0/tcplayer.min.css" rel="stylesheet" />
|
|
13
|
+
<!-- <script src="http://localhost:8080/libs/plugins/tcplayer-safe-plugin.1.0.0.js"></script>
|
|
14
|
+
<script src="http://localhost:8080/libs/plugins/tcplayer-vr-plugin.1.0.0.js"></script>
|
|
15
|
+
<script src="http://localhost:8080/libs/tcpcrypto.1.0.0.js"></script> -->
|
|
16
|
+
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.8.0/tcplayer.v4.8.0.min.js"></script>
|
|
17
|
+
<!-- <script src="https://tcplayer.vcube.tencent.com/tcplayer-plugins/tcplayer.v4.8.0.min.js"></script> -->
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
<!-- <script src="https://webrtc-demo.myqcloud.com/pull-sdk/js/vconsole.min.js"></script> -->
|
|
21
|
+
|
|
22
|
+
<style>
|
|
23
|
+
html,
|
|
24
|
+
body {
|
|
25
|
+
margin: 0;
|
|
26
|
+
padding: 0;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.tcplayer {
|
|
30
|
+
margin: 0 auto;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@media screen and (max-width: 640px) {
|
|
34
|
+
#player-container-id {
|
|
35
|
+
width: 100%;
|
|
36
|
+
height: 270px;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/* 设置logo在高分屏的显示样式 */
|
|
41
|
+
@media only screen and (min-device-pixel-ratio: 2),
|
|
42
|
+
only screen and (-webkit-min-device-pixel-ratio: 2) {
|
|
43
|
+
.tcp-logo-img {
|
|
44
|
+
width: 50%;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
</style>
|
|
48
|
+
</head>
|
|
49
|
+
|
|
50
|
+
<body style="overflow-y: hidden">
|
|
51
|
+
<!-- 设置播放器容器 -->
|
|
52
|
+
<video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline crossorigin="anonymous">
|
|
53
|
+
</video>
|
|
54
|
+
|
|
55
|
+
<button id="enterVR">enterVR</button>
|
|
56
|
+
<button id="exitVR">exitVR</button>
|
|
57
|
+
<button id="enableSensor">enableSensor</button>
|
|
58
|
+
<button id="gyroscopeVR">gyroscope:VR</button>
|
|
59
|
+
<button id="gyroscopeNone">gyroscope:none</button>
|
|
60
|
+
<button id="lookAt">lookAt</button>
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
<!--
|
|
65
|
+
注意事项：
|
|
66
|
+
* 播放器容器必须为 video 标签
|
|
67
|
+
* player-container-id 为播放器容器的ID，可自行设置
|
|
68
|
+
* 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
|
|
69
|
+
* playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
|
|
70
|
+
* 设置 x5-playsinline 属性会使用 X5 UI 的播放器
|
|
71
|
+
-->
|
|
72
|
+
|
|
73
|
+
<script>
|
|
74
|
+
// var vConsole = new VConsole();
|
|
75
|
+
var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
|
|
76
|
+
reportable: false,
|
|
77
|
+
|
|
78
|
+
// 12. vr
|
|
79
|
+
appID: '1500005692',
|
|
80
|
+
fileID: '243791580518143986',
|
|
81
|
+
psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNTY5MiwiZmlsZUlkIjoiMjQzNzkxNTgwNTE4MTQzOTg2IiwiY3VycmVudFRpbWVTdGFtcCI6MTY4MjMzNzM0NywiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTUwMDAwNTY5Mi52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.g6lUJDbNfLmq8vAiC5dn1GlLTw5HT7dUDxSOCDsKALs',
|
|
82
|
+
licenseUrl: 'https://vincentlli-1306264703.cos.ap-nanjing.myqcloud.com/tcplayer/vcube.license',
|
|
83
|
+
|
|
84
|
+
plugins: {
|
|
85
|
+
VR: {
|
|
86
|
+
// isEnableController: true,
|
|
87
|
+
// isEnableZoom: true,
|
|
88
|
+
// yaw: 0,
|
|
89
|
+
// pitch: 0,
|
|
90
|
+
// fov: 65,
|
|
91
|
+
// yawRange: [-180, 180],
|
|
92
|
+
// pitchRange: [-90, 90],
|
|
93
|
+
// fovRange: [30, 110],
|
|
94
|
+
},
|
|
95
|
+
SafeCheck: true,
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
|
|
99
|
+
// player.ready(function() {
|
|
100
|
+
// player.loadPlugin();
|
|
101
|
+
// });
|
|
102
|
+
|
|
103
|
+
player.on('error', (err) => {
|
|
104
|
+
console.log('err', err);
|
|
105
|
+
});
|
|
106
|
+
|
|
107
|
+
// mp4 vr
|
|
108
|
+
// player.src('https://1305308197.vod2.myqcloud.com/a3557591vodger1305308197/f7270750243791579800235226/f0.mp4');
|
|
109
|
+
|
|
110
|
+
document.getElementById('enterVR').addEventListener('click', function () {
|
|
111
|
+
player.plugins['VR'].enterVR();
|
|
112
|
+
});
|
|
113
|
+
|
|
114
|
+
document.getElementById('exitVR').addEventListener('click', function () {
|
|
115
|
+
player.plugins['VR'].exitVR();
|
|
116
|
+
});
|
|
117
|
+
|
|
118
|
+
document.getElementById('enableSensor').addEventListener('click', function () {
|
|
119
|
+
player.plugins['VR'].enableSensor();
|
|
120
|
+
});
|
|
121
|
+
|
|
122
|
+
document.getElementById('gyroscopeVR').addEventListener('click', function () {
|
|
123
|
+
player.plugins['VR'].setGyroMode('VR');
|
|
124
|
+
});
|
|
125
|
+
|
|
126
|
+
document.getElementById('gyroscopeNone').addEventListener('click', function () {
|
|
127
|
+
player.plugins['VR'].setGyroMode('none');
|
|
128
|
+
});
|
|
129
|
+
|
|
130
|
+
document.getElementById('lookAt').addEventListener('click', function() {
|
|
131
|
+
player.plugins['VR'].lookAt({yaw: 30}, 1000);
|
|
132
|
+
});
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
</script>
|
|
136
|
+
</body>
|
|
137
|
+
|
|
138
|
+
</html>
|
|
@@ -0,0 +1,109 @@
|
|
|
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
|
+
<!-- <script src="http://localhost:8080/dist/tcplayer.v4.8.1.js"></script> -->
|
|
14
|
+
<!-- 示例 CSS 样式可自行删除 -->
|
|
15
|
+
<style>
|
|
16
|
+
html,body{
|
|
17
|
+
margin: 0;
|
|
18
|
+
padding: 0;
|
|
19
|
+
}
|
|
20
|
+
.tcplayer {
|
|
21
|
+
margin: 0 auto;
|
|
22
|
+
}
|
|
23
|
+
@media screen and (max-width: 640px) {
|
|
24
|
+
.tcplayer,
|
|
25
|
+
#player-container-id {
|
|
26
|
+
width: 100%;
|
|
27
|
+
height: 270px;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
/* 设置logo在高分屏的显示样式 */
|
|
31
|
+
@media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
|
|
32
|
+
.tcp-logo-img {
|
|
33
|
+
width: 50%;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
.button-container{
|
|
37
|
+
text-align: center;
|
|
38
|
+
}
|
|
39
|
+
</style>
|
|
40
|
+
</head>
|
|
41
|
+
<body>
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
<div id="rate"></div>
|
|
45
|
+
<!-- 设置播放器容器 -->
|
|
46
|
+
<video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
|
|
47
|
+
</video>
|
|
48
|
+
|
|
49
|
+
<script>
|
|
50
|
+
if (TCPlayer.browser.IS_ANDROID || TCPlayer.browser.IS_IOS) {
|
|
51
|
+
const vConsole = new VConsole({ maxLogNumber: 1000 });
|
|
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=d1080p',
|
|
59
|
+
sources: 'webrtc://global-lebtest-play.myqcloud.com/live/lebtest?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=69f1eb8c&tabr_bitrates=d1080p,d540p,d360p&tabr_start_bitrate=d360p&tabr_control=auto',
|
|
60
|
+
// sources: 'webrtc://5664.liveplay.myqcloud.com/live/5664_harchar1?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb',
|
|
61
|
+
// sources: 'webrtc://arrontest.play.elementtest.org/live/shiftTest',
|
|
62
|
+
// sources: [
|
|
63
|
+
// {
|
|
64
|
+
// src: 'webrtc://global-lebtest-play.myqcloud.com/live/lebtest?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=69f1eb8c&tabr_bitrates=d1080p,d540p,d360p&tabr_start_bitrate=d1080p'
|
|
65
|
+
// }
|
|
66
|
+
// ],
|
|
67
|
+
|
|
68
|
+
webrtcConfig: {
|
|
69
|
+
connectRetryCount: 0,
|
|
70
|
+
fallbackUrl: 'https://global-lebtest-play.myqcloud.com/live/lebtest_HLSABR.m3u8',
|
|
71
|
+
enableAbr: true,
|
|
72
|
+
// 模板名对应的label名
|
|
73
|
+
abrLabels: {
|
|
74
|
+
d1080p: 'FHD1',
|
|
75
|
+
d540p: 'HD2',
|
|
76
|
+
d360p: 'SD3',
|
|
77
|
+
auto: 'AUTO4',
|
|
78
|
+
},
|
|
79
|
+
// 参考 快直播 config 说明
|
|
80
|
+
},
|
|
81
|
+
});
|
|
82
|
+
|
|
83
|
+
// player.src([{src: 'webrtc://global-lebtest-play.myqcloud.com/live/lebtest?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=69f1eb8c&tabr_bitrates=d1080p,d540p,d360p&tabr_start_bitrate=d1080p'}])
|
|
84
|
+
|
|
85
|
+
player.on('webrtcevent', function(event) {
|
|
86
|
+
console.log('webrtcEvent', event);
|
|
87
|
+
});
|
|
88
|
+
player.on('webrtcfallback', function(event) {
|
|
89
|
+
console.log('webrtcfallback', event);
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
player.on('webrtceventtest', function(event) {
|
|
93
|
+
console.log('webrtceventtest', event);
|
|
94
|
+
})
|
|
95
|
+
|
|
96
|
+
player.on('webrtcstats', function(data) {
|
|
97
|
+
|
|
98
|
+
try {
|
|
99
|
+
document.getElementById('rate').innerHTML = data.data.video.frameWidth + 'x' + data.data.video.frameHeight;
|
|
100
|
+
} catch (e) {
|
|
101
|
+
console.log('e', e.message);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// console.log('data', event, data);
|
|
105
|
+
});
|
|
106
|
+
|
|
107
|
+
</script>
|
|
108
|
+
</body>
|
|
109
|
+
</html>
|
|
@@ -9,11 +9,10 @@
|
|
|
9
9
|
<link href="https://web.sdk.cloud.tencent.cn/player/tcplayer/release/v4.5.0/tcplayer.min.css" rel="stylesheet">
|
|
10
10
|
<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.1/vconsole.min.js"></script>
|
|
11
11
|
|
|
12
|
-
<script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
|
|
13
12
|
<script src="https://video.sdk.qcloudecdn.com/web/TXLivePlayer-1.2.3.min.js"></script>
|
|
14
13
|
|
|
15
14
|
<!-- 引入播放器 js 文件 -->
|
|
16
|
-
<script src="https://
|
|
15
|
+
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.8.0/tcplayer.v4.8.0.min.js"></script>
|
|
17
16
|
<!-- 示例 CSS 样式可自行删除 -->
|
|
18
17
|
<style>
|
|
19
18
|
html,body{
|