kplayer-ts 1.0.0 → 1.0.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/README.md +149 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
## Usage
|
|
2
|
+
|
|
3
|
+
```ts
|
|
4
|
+
import KPlayer from 'kplayer';
|
|
5
|
+
import type { KPlayerOptions } from 'kplayer';
|
|
6
|
+
import 'kplayer/dist/kplayer.css';
|
|
7
|
+
import Hls from 'hls.js';
|
|
8
|
+
|
|
9
|
+
(window as Window & { Hls?: typeof Hls }).Hls = Hls;
|
|
10
|
+
|
|
11
|
+
const container = document.getElementById('kplayer') as HTMLElement;
|
|
12
|
+
|
|
13
|
+
const options: KPlayerOptions = {
|
|
14
|
+
container,
|
|
15
|
+
autoplay: false,
|
|
16
|
+
airplay: true,
|
|
17
|
+
chromecast: true,
|
|
18
|
+
theme: '#FF0000',
|
|
19
|
+
loop: true,
|
|
20
|
+
lang: 'mn',
|
|
21
|
+
screenshot: true,
|
|
22
|
+
hotkey: true,
|
|
23
|
+
preload: 'auto',
|
|
24
|
+
logo: 'https://cdn.cdn3.co/storage/image/setting/583dfa2d-a6c7-4772-89aa-147a31c16ace.png',
|
|
25
|
+
volume: 0.7,
|
|
26
|
+
mutex: true,
|
|
27
|
+
live: false,
|
|
28
|
+
playbackSpeed: [0.5, 1, 1.25, 1.5, 2],
|
|
29
|
+
preventClickToggle: false,
|
|
30
|
+
|
|
31
|
+
title: {
|
|
32
|
+
title: 'Noble Reincarnation: Born Blessed, So Ill Obtain Ultimate Power',
|
|
33
|
+
description: 'Өв залгах эрх хасалт. | 11-р анги',
|
|
34
|
+
back: true,
|
|
35
|
+
},
|
|
36
|
+
|
|
37
|
+
vastAD: false,
|
|
38
|
+
vastADURL: 'https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpremidpost&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&cmsid=496&vid=short_onecue&correlator=',
|
|
39
|
+
|
|
40
|
+
// ── Single HLS video ────────────────────────────────────────────────
|
|
41
|
+
// video: {
|
|
42
|
+
// url: 'https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_ts/master.m3u8',
|
|
43
|
+
// pic: 'https://image.tmdb.org/t/p/original/nAxGnGHOsfzufThz20zgmRwKur3.jpg',
|
|
44
|
+
// thumbnails: 'https://image.tmdb.org/t/p/original/nAxGnGHOsfzufThz20zgmRwKur3.jpg',
|
|
45
|
+
// type: 'hls',
|
|
46
|
+
// },
|
|
47
|
+
|
|
48
|
+
// ── Ad examples ─────────────────────────────────────────────────────
|
|
49
|
+
ad: {
|
|
50
|
+
url: [
|
|
51
|
+
{
|
|
52
|
+
name: 'Image ad',
|
|
53
|
+
type: 'image',
|
|
54
|
+
backroundColor: '',
|
|
55
|
+
url: 'https://cdn.cdn3.co/storage/image/setting/583dfa2d-a6c7-4772-89aa-147a31c16ace.png',
|
|
56
|
+
deeplink: '',
|
|
57
|
+
startTime: 0,
|
|
58
|
+
skipTime: 10,
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
name: 'Text ad',
|
|
62
|
+
type: 'text',
|
|
63
|
+
backroundColor: 'FF0000',
|
|
64
|
+
url: 'Hello users ads watching',
|
|
65
|
+
deeplink: '',
|
|
66
|
+
startTime: 120,
|
|
67
|
+
skipTime: 10,
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
name: 'Video ad',
|
|
71
|
+
type: 'video',
|
|
72
|
+
backroundColor: '',
|
|
73
|
+
url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
|
|
74
|
+
deeplink: '',
|
|
75
|
+
startTime: 130,
|
|
76
|
+
skipTime: 10,
|
|
77
|
+
},
|
|
78
|
+
],
|
|
79
|
+
},
|
|
80
|
+
|
|
81
|
+
// ── Multi quality ────────────────────────────────────────────────────
|
|
82
|
+
video: {
|
|
83
|
+
quality: [
|
|
84
|
+
{
|
|
85
|
+
name: 'HD',
|
|
86
|
+
url: 'https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_ts/master.m3u8',
|
|
87
|
+
type: 'normal',
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
name: 'SD',
|
|
91
|
+
url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
|
|
92
|
+
type: 'normal',
|
|
93
|
+
},
|
|
94
|
+
],
|
|
95
|
+
defaultQuality: 0,
|
|
96
|
+
pic: 'https://image.tmdb.org/t/p/original/nAxGnGHOsfzufThz20zgmRwKur3.jpg',
|
|
97
|
+
thumbnails: 'https://image.tmdb.org/t/p/original/nAxGnGHOsfzufThz20zgmRwKur3.jpg',
|
|
98
|
+
},
|
|
99
|
+
|
|
100
|
+
subtitle: {
|
|
101
|
+
url: [
|
|
102
|
+
{
|
|
103
|
+
name: 'English',
|
|
104
|
+
url: 'http://cdn.cdn3.co/storage/subtitle/e67dbcf0-96b2-4265-b787-680124cb9077.vtt',
|
|
105
|
+
lang: 'en',
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
name: 'Монгол',
|
|
109
|
+
url: 'http://cdn.cdn3.co/storage/subtitle/e67dbcf0-96b2-4265-b787-680124cb9077.vtt',
|
|
110
|
+
lang: 'mn',
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
name: '日本語',
|
|
114
|
+
url: 'https://raw.githubusercontent.com/videojs/video.js/main/docs/examples/shared/example-captions.vtt',
|
|
115
|
+
lang: 'ja',
|
|
116
|
+
},
|
|
117
|
+
],
|
|
118
|
+
defaultSubtitle: 'mn',
|
|
119
|
+
type: 'webvtt',
|
|
120
|
+
fontSize: '25px',
|
|
121
|
+
bottom: '10%',
|
|
122
|
+
color: '#ffffff',
|
|
123
|
+
encrypt: false,
|
|
124
|
+
iv: '',
|
|
125
|
+
key: '',
|
|
126
|
+
},
|
|
127
|
+
|
|
128
|
+
contextmenu: [
|
|
129
|
+
{
|
|
130
|
+
text: 'custom1',
|
|
131
|
+
link: 'https://github.com/DIYgod/DPlayer',
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
text: 'custom2',
|
|
135
|
+
click: (player) => {
|
|
136
|
+
console.log(player);
|
|
137
|
+
},
|
|
138
|
+
},
|
|
139
|
+
],
|
|
140
|
+
|
|
141
|
+
highlight: [
|
|
142
|
+
{ text: 'OP Start', time: 20 },
|
|
143
|
+
{ text: 'OP End', time: 120 },
|
|
144
|
+
{ text: 'END Start', time: 520 },
|
|
145
|
+
{ text: 'END End', time: 550 },
|
|
146
|
+
],
|
|
147
|
+
};
|
|
148
|
+
|
|
149
|
+
const player = new KPlayer(options);
|