tcplayer.js 4.7.0 → 4.8.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.
Files changed (80) hide show
  1. package/dist/console/vod-player-v3.html +125 -0
  2. package/dist/console/vod-player.html +124 -0
  3. package/dist/examples/vod/7447398155146701990.jpg +0 -0
  4. package/dist/examples/vod/7447398155146701990.vtt +301 -0
  5. package/dist/examples/vod/tcplayer-av1.html +123 -0
  6. package/dist/examples/vod/tcplayer-vod-all.html +135 -0
  7. package/dist/examples/vod/tcplayer-vod-audio-tracks.html +66 -0
  8. package/dist/examples/vod/tcplayer-vod-base-flash.html +64 -0
  9. package/dist/examples/vod/tcplayer-vod-base-native-control.html +68 -0
  10. package/dist/examples/vod/tcplayer-vod-base-v4-dash.html +84 -0
  11. package/dist/examples/vod/tcplayer-vod-base-v4-quality-api.html +90 -0
  12. package/dist/examples/vod/tcplayer-vod-base-v4.html +78 -0
  13. package/dist/examples/vod/tcplayer-vod-base.html +76 -0
  14. package/dist/examples/vod/tcplayer-vod-change-file-statistic.html +79 -0
  15. package/dist/examples/vod/tcplayer-vod-change-file.html +76 -0
  16. package/dist/examples/vod/tcplayer-vod-continue-play-by-fileid.html +70 -0
  17. package/dist/examples/vod/tcplayer-vod-continue-play-by-url.html +72 -0
  18. package/dist/examples/vod/tcplayer-vod-costom-host.html +66 -0
  19. package/dist/examples/vod/tcplayer-vod-custom-enter-full-viewport.html +88 -0
  20. package/dist/examples/vod/tcplayer-vod-custom-ui.html +98 -0
  21. package/dist/examples/vod/tcplayer-vod-definition.html +71 -0
  22. package/dist/examples/vod/tcplayer-vod-drm-fairplay.html +165 -0
  23. package/dist/examples/vod/tcplayer-vod-drm-token-auto.html +101 -0
  24. package/dist/examples/vod/tcplayer-vod-drm-token.html +156 -0
  25. package/dist/examples/vod/tcplayer-vod-drm-widevine.html +165 -0
  26. package/dist/examples/vod/tcplayer-vod-drm.html +164 -0
  27. package/dist/examples/vod/tcplayer-vod-dynamic-watermark.html +85 -0
  28. package/dist/examples/vod/tcplayer-vod-enter-full-viewport.html +87 -0
  29. package/dist/examples/vod/tcplayer-vod-event.html +93 -0
  30. package/dist/examples/vod/tcplayer-vod-ghost-watermark.html +48 -0
  31. package/dist/examples/vod/tcplayer-vod-hls-decrypt-key-tool.html +215 -0
  32. package/dist/examples/vod/tcplayer-vod-hls-decrypt-key.html +76 -0
  33. package/dist/examples/vod/tcplayer-vod-hls-encrypt-private.html +97 -0
  34. package/dist/examples/vod/tcplayer-vod-hls-encrypt.html +61 -0
  35. package/dist/examples/vod/tcplayer-vod-hls-masterplaylist.html +65 -0
  36. package/dist/examples/vod/tcplayer-vod-hls-token.html +67 -0
  37. package/dist/examples/vod/tcplayer-vod-image-patch.html +66 -0
  38. package/dist/examples/vod/tcplayer-vod-key.html +87 -0
  39. package/dist/examples/vod/tcplayer-vod-level-switch-tips.html +85 -0
  40. package/dist/examples/vod/tcplayer-vod-logo.html +72 -0
  41. package/dist/examples/vod/tcplayer-vod-mirror.html +66 -0
  42. package/dist/examples/vod/tcplayer-vod-mutil.html +68 -0
  43. package/dist/examples/vod/tcplayer-vod-no-control.html +62 -0
  44. package/dist/examples/vod/tcplayer-vod-no-progress.html +64 -0
  45. package/dist/examples/vod/tcplayer-vod-playlist.html +76 -0
  46. package/dist/examples/vod/tcplayer-vod-preload.html +74 -0
  47. package/dist/examples/vod/tcplayer-vod-progress-marker.html +64 -0
  48. package/dist/examples/vod/tcplayer-vod-refer.html +84 -0
  49. package/dist/examples/vod/tcplayer-vod-size-adaptive.html +70 -0
  50. package/dist/examples/vod/tcplayer-vod-size-full-viewport.html +68 -0
  51. package/dist/examples/vod/tcplayer-vod-size.html +70 -0
  52. package/dist/examples/vod/tcplayer-vod-vtt-thumbnail-src.html +71 -0
  53. package/dist/examples/vod/tcplayer-vod-vtt-thumbnail.html +65 -0
  54. package/dist/examples/vod/tcplayer-vod-x5-playsinline.html +65 -0
  55. package/dist/examples/vod/tcplayer-vod-x5.html +66 -0
  56. package/dist/examples/vod/typlayer-vod-dynamic-init.html +129 -0
  57. package/dist/examples/webrtc/tcplayer-src-dynamic.html +92 -0
  58. package/dist/examples/webrtc/tcplayer-src-meeting.html +193 -0
  59. package/dist/examples/webrtc/tcplayer-src-webrtc-abr.html +236 -0
  60. package/dist/examples/webrtc/tcplayer-src-webrtc-autoplay.html +124 -0
  61. package/dist/examples/webrtc/tcplayer-src-webrtc-change-src.html +189 -0
  62. package/dist/examples/webrtc/tcplayer-src-webrtc-mutilRes.html +142 -0
  63. package/dist/examples/webrtc/tcplayer-src-webrtc.html +165 -0
  64. package/dist/libs/TXLivePlayer-1.3.0.min.js +1 -0
  65. package/dist/libs/dash.all.min.v3.1.3.js +0 -20
  66. package/dist/libs/hlsp2p.min.1.6.28.js +3 -0
  67. package/dist/libs/qvbp2p_common.min.1.8.29.js +1 -0
  68. package/dist/tcplayer.css +2529 -0
  69. package/dist/tcplayer.min.css +1 -1
  70. package/dist/tcplayer.v4.8.0.min.js +17 -0
  71. package/package.json +2 -4
  72. package/dist/libs/TXLivePlayer-1.2.3.min.js +0 -1
  73. package/dist/libs/dash.all.min.2.9.3.js +0 -32
  74. package/dist/libs/dash.all.min.4.4.1.js +0 -0
  75. package/dist/libs/flv.min.1.5.js +0 -7
  76. package/dist/libs/flv.min.1.6.2.js +0 -10
  77. package/dist/libs/hls.min.0.12.4.js +0 -2
  78. package/dist/libs/hls.min.0.13.2m.js +0 -4
  79. package/dist/libs/hls.min.1.1.5.js +0 -28831
  80. package/dist/tcplayer.v4.7.0.min.js +0 -17
package/dist/examples/vod/tcplayer-vod-progress-marker.html ADDED
@@ -0,0 +1,64 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
7
+ <title>腾讯云视频点播示例</title>
8
+ <!-- 引入播放器 css 文件 -->
9
+ <link href="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.css" rel="stylesheet">
10
+ <!-- 如需在IE8、9浏览器中初始化播放器，浏览器需支持Flash并在页面中引入 -->
11
+ <!--[if lt IE 9]>
12
+ <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/ie8/videojs-ie8.js"></script>
13
+ <![endif]-->
14
+ <!-- 如果需要在 Chrome Firefox 等现代浏览器中通过H5播放hls，需要引入 hls.js -->
15
+ <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
16
+ <!-- 引入播放器 js 文件 -->
17
+ <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>
18
+ <!-- 示例 CSS 样式可自行删除 -->
19
+ <style>
20
+ html,body{
21
+ margin: 0;
22
+ padding: 0;
23
+ }
24
+ .tcplayer {
25
+ margin: 0 auto;
26
+ }
27
+ @media screen and (max-width: 640px) {
28
+ #player-container-id {
29
+ width: 100%;
30
+ height: 270px;
31
+ }
32
+ }
33
+ /* 设置logo在高分屏的显示样式 */
34
+ @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
35
+ .tcp-logo-img {
36
+ width: 50%;
37
+ }
38
+ }
39
+ </style>
40
+ </head>
41
+ <body>
42
+ <!-- 设置播放器容器 -->
43
+ <video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
44
+ </video>
45
+ <!--
46
+ 注意事项：
47
+ * 播放器容器必须为 video 标签
48
+ * player-container-id 为播放器容器的ID，可自行设置
49
+ * 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
50
+ * playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
51
+ * 设置 x5-playsinline 属性会使用 X5 UI 的播放器
52
+ -->
53
+ <script>
54
+ var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
55
+ fileID: '5285890799710670616', // 请传入需要播放的视频filID 必须
56
+ appID: '1400329073' // 请传入点播账号的appID 必须
57
+ //其他参数请在开发文档中查看
58
+ ,plugins: {
59
+ ProgressMarker: true
60
+ }
61
+ });
62
+ </script>
63
+ </body>
64
+ </html>
package/dist/examples/vod/tcplayer-vod-refer.html ADDED
@@ -0,0 +1,84 @@
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"
7
+ content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
8
+ <title>腾讯云视频点播示例-refer防盗链</title>
9
+ <!-- 引入播放器 css 文件 -->
10
+ <link href="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.css" rel="stylesheet">
11
+ <!-- 如需在IE8、9浏览器中初始化播放器，浏览器需支持Flash并在页面中引入 -->
12
+ <!--[if lt IE 9]>
13
+ <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/ie8/videojs-ie8.js"></script>
14
+ <![endif]-->
15
+ <!-- 如果需要在 Chrome Firefox 等现代浏览器中通过H5播放hls，需要引入 hls.js -->
16
+ <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
17
+ <!-- 引入播放器 js 文件 -->
18
+ <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>
19
+ <!-- 示例 CSS 样式可自行删除 -->
20
+ <style>
21
+ html, body {
22
+ margin: 0;
23
+ padding: 0;
24
+ }
25
+ .tcplayer {
26
+ margin: 0 auto;
27
+ }
28
+ /* 通过 css 设置播放器尺寸 */
29
+ #player-container-id {
30
+ width: 640px;
31
+ height: 360px;
32
+ }
33
+ @media screen and (max-width: 640px) {
34
+ #player-container-id {
35
+ width: 100%;
36
+ height: 270px;
37
+ }
38
+ }
39
+ /* 设置logo在高分屏的显示样式 */
40
+ @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
41
+ .tcp-logo-img {
42
+ width: 50%;
43
+ }
44
+ }
45
+ </style>
46
+ </head>
47
+ <body>
48
+ <!-- 设置播放器容器 -->
49
+ <video id="player-container-id" preload="auto" playsinline webkit-playsinline>
50
+ </video>
51
+ <!--
52
+ 注意事项：
53
+ * 播放器容器必须为 video 标签
54
+ * player1 为播放器容器的ID，可自行设置
55
+ * 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
56
+ * playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
57
+ * 设置 x5-playsinline 属性会使用 X5 UI 的播放器
58
+ -->
59
+ <script>
60
+ var player = TCPlayer('player-container-id', { // player1为播放器容器ID，必须与html中一致
61
+ fileID: '7447398157015849771', // 请传入需要播放的视频filID 必须
62
+ appID: '1256993030',// 请传入点播账号的appID 必须
63
+ flash: {
64
+ swf: '//1253668508.vod2.myqcloud.com/vod-player/1253668508/7447398155146701990/tcplayer/player.swf' //swf 文件地址，有的浏览器需要用Flash来播放 开启refer防盗链后必须传入
65
+ }
66
+ });
67
+ /*
68
+ 示例：
69
+ var player = TCPlayer('player-container-id', {
70
+ fileID: '6150355543233037978', // 请传入需要播放的视频filID 必须
71
+ appID: '1253668508', // 请传入点播账号的appID 必须
72
+ flash:{
73
+ swf: '//[用户隔离域名]/vod-player/[appID]/[fileID]/tcplayer/player.swf' //swf 文件地址 必须
74
+ }
75
+ });
76
+
77
+ 注意事项：
78
+ * 您也可以将 player.swf 文件下载后，存放到您的CDN服务器中，swf 参数传入指向您的CDN服务器路径
79
+ * 示例代码使用的是新点播播放器，该点播播放器在灰度体验中，将逐步替换旧的点播播放器qcplayer
80
+ *
81
+ */
82
+ </script>
83
+ </body>
84
+ </html>
package/dist/examples/vod/tcplayer-vod-size-adaptive.html ADDED
@@ -0,0 +1,70 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
7
+ <title>腾讯云视频点播示例-等比率自适应</title>
8
+ <!-- 引入播放器 css 文件 -->
9
+ <link href="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.css" rel="stylesheet">
10
+ <!-- 如需在IE8、9浏览器中初始化播放器，浏览器需支持Flash并在页面中引入 -->
11
+ <!--[if lt IE 9]>
12
+ <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/ie8/videojs-ie8.js"></script>
13
+ <![endif]-->
14
+ <!-- 如果需要在 Chrome Firefox 等现代浏览器中通过H5播放hls，需要引入 hls.js -->
15
+ <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
16
+ <!-- 引入播放器 js 文件 -->
17
+ <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>
18
+ <!-- 示例 CSS 样式可自行删除 -->
19
+ <style>
20
+ html,body{
21
+ margin: 0;
22
+ padding: 0;
23
+ }
24
+ /* 通过 css 设置播放器尺寸 这时<video>中的宽高属性将被覆盖*/
25
+ #player-container-id {
26
+ width: 100%;
27
+ max-width: 100%;
28
+ height: 0;
29
+ padding-top: 56.25%; /* 计算方式：播放器以16：9的比率显示，这里的值为 9/16 * 100 = 56.25 */
30
+ }
31
+ /* 外部容器也需要是自适应的*/
32
+ #wrap {
33
+ width: 80%;
34
+ margin: 0 auto;
35
+ }
36
+ /* 设置logo在高分屏的显示样式 */
37
+ @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
38
+ .tcp-logo-img {
39
+ width: 50%;
40
+ }
41
+ }
42
+ </style>
43
+ </head>
44
+ <body>
45
+ <!-- 设置播放器容器 -->
46
+ <div id="wrap">
47
+ <video id="player-container-id" preload="auto" playsinline webkit-playsinline>
48
+ </video>
49
+ </div>
50
+ <!--
51
+ 注意事项：
52
+ * 播放器容器必须为 video 标签
53
+ * player-container-id 为播放器容器的ID，可自行设置
54
+ * 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
55
+ * playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
56
+ * 设置 x5-playsinline 属性会使用 X5 UI 的播放器
57
+ -->
58
+ <script>
59
+ var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
60
+ fileID: '5285890799710670616', // 请传入需要播放的视频filID 必须
61
+ appID: '1400329073' // 请传入点播账号的appID 必须
62
+ //其他参数请在开发文档中查看
63
+ });
64
+ /*
65
+ 注意事项：
66
+ * 示例代码使用的是新点播播放器，该点播播放器在灰度体验中，将逐步替换旧的点播播放器 qcplayer
67
+ */
68
+ </script>
69
+ </body>
70
+ </html>
package/dist/examples/vod/tcplayer-vod-size-full-viewport.html ADDED
@@ -0,0 +1,68 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
7
+ <title>腾讯云视频点播示例-铺满可视区域</title>
8
+ <!-- 引入播放器 css 文件 -->
9
+ <link href="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.css" rel="stylesheet">
10
+ <!-- 如需在IE8、9浏览器中初始化播放器，浏览器需支持Flash并在页面中引入 -->
11
+ <!--[if lt IE 9]>
12
+ <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/ie8/videojs-ie8.js"></script>
13
+ <![endif]-->
14
+ <!-- 如果需要在 Chrome Firefox 等现代浏览器中通过H5播放hls，需要引入 hls.js -->
15
+ <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
16
+ <!-- 引入播放器 js 文件 -->
17
+ <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>
18
+ <!-- 示例 CSS 样式可自行删除 -->
19
+ <style>
20
+ html,body{
21
+ margin: 0;
22
+ padding: 0;
23
+ height: 100%;
24
+ }
25
+ /* 通过 css 设置播放器尺寸 这时<video>中的宽高属性将被覆盖*/
26
+ #player-container-id {
27
+ width: 100%;
28
+ height: 100%;
29
+ overflow: hidden;
30
+ }
31
+ /* 设置logo在高分屏的显示样式 */
32
+ @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
33
+ .tcp-logo-img {
34
+ width: 50%;
35
+ }
36
+ }
37
+ </style>
38
+ </head>
39
+ <body>
40
+ <!-- 设置播放器容器 -->
41
+ <video id="player-container-id" preload="auto" playsinline webkit-playsinline>
42
+ </video>
43
+ <!--
44
+ 注意事项：
45
+ * 播放器容器必须为 video 标签
46
+ * player-container-id 为播放器容器的ID，可自行设置
47
+ * 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
48
+ * playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
49
+ * 设置 x5-playsinline 属性会使用 X5 UI 的播放器
50
+ -->
51
+ <script>
52
+ var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
53
+ fileID: '5285890799710670616', // 请传入需要播放的视频filID 必须
54
+ appID: '1400329073' // 请传入点播账号的appID 必须
55
+ ,controlBar: {
56
+ // volumePanel: true,
57
+ fullscreenToggle: false
58
+ // playbackRateMenuButton: false
59
+ },
60
+ //其他参数请在开发文档中查看
61
+ });
62
+ /*
63
+ 注意事项：
64
+ * 示例代码使用的是新点播播放器，该点播播放器在灰度体验中，将逐步替换旧的点播播放器 qcplayer
65
+ */
66
+ </script>
67
+ </body>
68
+ </html>
package/dist/examples/vod/tcplayer-vod-size.html ADDED
@@ -0,0 +1,70 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
7
+ <title>腾讯云视频点播示例-尺寸设置</title>
8
+ <!-- 引入播放器 css 文件 -->
9
+ <link href="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.css" rel="stylesheet">
10
+ <!-- 如需在IE8、9浏览器中初始化播放器，浏览器需支持Flash并在页面中引入 -->
11
+ <!--[if lt IE 9]>
12
+ <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/ie8/videojs-ie8.js"></script>
13
+ <![endif]-->
14
+ <!-- 如果需要在 Chrome Firefox 等现代浏览器中通过H5播放hls，需要引入 hls.js -->
15
+ <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
16
+ <!-- 引入播放器 js 文件 -->
17
+ <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>
18
+ <!-- 示例 CSS 样式可自行删除 -->
19
+ <style>
20
+ html,body{
21
+ margin: 0;
22
+ padding: 0;
23
+ }
24
+ .tcplayer {
25
+ margin: 0 auto;
26
+ }
27
+ /* 通过 css 设置播放器尺寸 这时<video>中的宽高属性将被覆盖*/
28
+ .player-size {
29
+ width: 640px;
30
+ height: 360px;
31
+ }
32
+ @media screen and (max-width: 640px) {
33
+ .player-size {
34
+ width: 100%;
35
+ height: 270px;
36
+ }
37
+ }
38
+ /* 设置logo在高分屏的显示样式 */
39
+ @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
40
+ .tcp-logo-img {
41
+ width: 50%;
42
+ }
43
+ }
44
+ </style>
45
+ </head>
46
+ <body>
47
+ <!-- 设置播放器容器 -->
48
+ <video id="player-container-id" class="player-size" playsinline webkit-playsinline>
49
+ </video>
50
+ <!--
51
+ 注意事项：
52
+ * 播放器容器必须为 video 标签
53
+ * player-container-id 为播放器容器的ID，可自行设置
54
+ * 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
55
+ * playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
56
+ * 设置 x5-playsinline 属性会使用 X5 UI 的播放器
57
+ -->
58
+ <script>
59
+ var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
60
+ fileID: '5285890799710670616', // 请传入需要播放的视频filID 必须
61
+ appID: '1400329073' // 请传入点播账号的appID 必须
62
+ //其他参数请在开发文档中查看
63
+ });
64
+ /*
65
+ 注意事项：
66
+ * 示例代码使用的是新点播播放器，该点播播放器在灰度体验中，将逐步替换旧的点播播放器 qcplayer
67
+ */
68
+ </script>
69
+ </body>
70
+ </html>
package/dist/examples/vod/tcplayer-vod-vtt-thumbnail-src.html ADDED
@@ -0,0 +1,71 @@
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
+ </style>
40
+ </head>
41
+ <body>
42
+ <!-- 设置播放器容器 -->
43
+ <video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
44
+ </video>
45
+ <!--
46
+ 注意事项：
47
+ * 播放器容器必须为 video 标签
48
+ * player-container-id 为播放器容器的ID，可自行设置
49
+ * 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
50
+ * playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
51
+ * 设置 x5-playsinline 属性会使用 X5 UI 的播放器
52
+ -->
53
+ <script>
54
+ var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
55
+ fileID: '7447398157015849771', // 请传入需要播放的视频filID 必须
56
+ appID: '1256993030' // 请传入点播账号的appID 必须
57
+ , plugins:{
58
+ VttThumbnail:{
59
+ // 'imgUrl': '//imgcache.qq.com/open/qcloud/video/tcplayer/examples/vod/7447398155146701990.jpg', // 传入预览图地址 非必须
60
+ 'vttUrl': '//1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/imageSprite/1559273486.vtt' // 传入vtt文件地址
61
+ }
62
+ }
63
+ //其他参数请在开发文档中查看
64
+ });
65
+ /*
66
+ 注意事项：
67
+ * 如何生成预览图与vtt文件，查看相关文档https://cloud.tencent.com/document/product/266/8101
68
+ */
69
+ </script>
70
+ </body>
71
+ </html>
package/dist/examples/vod/tcplayer-vod-vtt-thumbnail.html ADDED
@@ -0,0 +1,65 @@
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
+ </style>
40
+ </head>
41
+ <body>
42
+ <!-- 设置播放器容器 -->
43
+ <video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
44
+ </video>
45
+ <!--
46
+ 注意事项：
47
+ * 播放器容器必须为 video 标签
48
+ * player-container-id 为播放器容器的ID，可自行设置
49
+ * 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
50
+ * playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
51
+ * 设置 x5-playsinline 属性会使用 X5 UI 的播放器
52
+ -->
53
+ <script>
54
+ var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
55
+ fileID: '5285890781386012275', // 请传入需要播放的视频filID 必须
56
+ appID: '1256993030' // 请传入点播账号的appID 必须
57
+ //其他参数请在开发文档中查看
58
+ });
59
+ /*
60
+ 注意事项：
61
+ * 如何生成预览图与vtt文件，查看相关文档https://cloud.tencent.com/document/product/266/8101
62
+ */
63
+ </script>
64
+ </body>
65
+ </html>
package/dist/examples/vod/tcplayer-vod-x5-playsinline.html ADDED
@@ -0,0 +1,65 @@
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
+ </style>
40
+ </head>
41
+ <body>
42
+ <!-- 设置播放器容器 -->
43
+ <video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline x5-playsinline>
44
+ </video>
45
+ <!--
46
+ 注意事项：
47
+ * 播放器容器必须为 video 标签
48
+ * player-container-id 为播放器容器的ID，可自行设置
49
+ * 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
50
+ * playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
51
+ * 设置 x5-playsinline 属性会使用 X5 UI 的播放器
52
+ -->
53
+ <script>
54
+ var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
55
+ fileID: '5285890799710670616', // 请传入需要播放的视频filID 必须
56
+ appID: '1400329073' // 请传入点播账号的appID 必须
57
+ //其他参数请在开发文档中查看
58
+ });
59
+ /*
60
+ 注意事项：
61
+ * 示例代码使用的是新点播播放器，该点播播放器在灰度体验中，将逐步替换旧的点播播放器 qcplayer
62
+ */
63
+ </script>
64
+ </body>
65
+ </html>
package/dist/examples/vod/tcplayer-vod-x5.html ADDED
@@ -0,0 +1,66 @@
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
+ </style>
40
+ </head>
41
+ <body>
42
+ <!-- 设置播放器容器 -->
43
+ <video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true">
44
+ </video>
45
+ <!-- playsinline webkit-playsinline x5-playsinline -->
46
+ <!--
47
+ 注意事项：
48
+ * 播放器容器必须为 video 标签
49
+ * player-container-id 为播放器容器的ID，可自行设置
50
+ * 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
51
+ * playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
52
+ * 设置 x5-playsinline 属性会使用 X5 UI 的播放器
53
+ -->
54
+ <script>
55
+ var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
56
+ fileID: '7447398157015849771', // 请传入需要播放的视频filID 必须
57
+ appID: '1256993030' // 请传入点播账号的appID 必须
58
+ //其他参数请在开发文档中查看
59
+ });
60
+ /*
61
+ 注意事项：
62
+ * 示例代码使用的是新点播播放器，该点播播放器在灰度体验中，将逐步替换旧的点播播放器 qcplayer
63
+ */
64
+ </script>
65
+ </body>
66
+ </html>