Skip to content

Commit ccd2def

Browse files
committed
[wip] adjust Package Json for Stable Version
1 parent 88aa7a1 commit ccd2def

File tree

4 files changed

+129
-107
lines changed

4 files changed

+129
-107
lines changed

README.md

Lines changed: 103 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -26,21 +26,6 @@ Or using Yarn:
2626
yarn add next-react-videojs
2727
```
2828

29-
### From GitHub Packages
30-
31-
If you want to install from GitHub Packages:
32-
33-
```bash
34-
npm install @masniper/next-react-videojs --registry=https://npm.pkg.github.com/
35-
```
36-
37-
Make sure your `.npmrc` file is configured with the following:
38-
39-
```bash
40-
@masniper:registry=https://npm.pkg.github.com/
41-
//npm.pkg.github.com/:_authToken=<your-personal-access-token>
42-
```
43-
4429
## Usage
4530

4631
Here’s an example of how to use the `next-react-videojs` component:
@@ -55,33 +40,54 @@ const App = () => {
5540
const videoJsOptions = {
5641
autoplay: false,
5742
controls: true,
58-
responsive: true,
59-
fluid: true,
60-
poster: "https://upload.wikimedia.org/wikipedia/commons/5/51/Video_poster.jpg",
43+
preload: 'auto',
44+
responsive: true,
45+
fluid: true,
6146
playbackRates: [0.5, 1, 1.5, 2],
47+
loop: true,
48+
muted: false,
49+
poster: 'https://hoststreamsell-pics.s3.amazonaws.com/600c26a209974338f4a579055e7ef61f_big.jpg',
50+
language: 'en',
51+
aspectRatio: '16:9',
6252
sources: [
6353
{
64-
src: "https://media.w3.org/2010/05/sintel/trailer_hd.mp4",
65-
type: "video/mp4",
54+
src: 'https://www.w3schools.com/html/mov_bbb.mp4',
55+
type: 'video/mp4',
6656
},
6757
{
68-
src: "https://media.w3.org/2010/05/sintel/trailer.ogv",
69-
type: "video/ogg",
58+
src: 'https://www.w3schools.com/html/movie.ogg',
59+
type: 'video/ogg',
7060
},
7161
],
7262
tracks: [
7363
{
74-
kind: "captions",
75-
src: "https://media.w3.org/2010/05/sintel/captions.vtt",
76-
srclang: "en",
77-
label: "English",
78-
default: true,
64+
kind: 'captions',
65+
src: 'https://example.com/captions.vtt',
66+
srclang: 'en',
67+
label: 'English',
68+
default: true,
7969
},
8070
],
71+
plugins: {
72+
examplePlugin: {}, //optional plugin
73+
},
8174
};
8275

76+
8377
const handlePlayerReady = (player) => {
84-
console.log("Player is ready!", player);
78+
console.log("Player is ready:", player);
79+
80+
player.on("play", () => {
81+
console.log("Video is playing");
82+
});
83+
84+
player.on("pause", () => {
85+
console.log("Video is paused");
86+
});
87+
88+
player.on("ended", () => {
89+
console.log("Video ended");
90+
});
8591
};
8692

8793
return <VideoPlayer options={videoJsOptions} onReady={handlePlayerReady} />;
@@ -101,32 +107,55 @@ const Home = () => {
101107
const videoJsOptions = {
102108
autoplay: false,
103109
controls: true,
104-
responsive: true,
105-
fluid: true,
106-
poster: "https://upload.wikimedia.org/wikipedia/commons/5/51/Video_poster.jpg",
110+
preload: 'auto',
111+
responsive: true,
112+
fluid: true,
107113
playbackRates: [0.5, 1, 1.5, 2],
114+
loop: true,
115+
muted: false,
116+
poster: 'https://hoststreamsell-pics.s3.amazonaws.com/600c26a209974338f4a579055e7ef61f_big.jpg',
117+
language: 'en',
118+
aspectRatio: '16:9',
108119
sources: [
109120
{
110-
src: "https://media.w3.org/2010/05/sintel/trailer_hd.mp4",
111-
type: "video/mp4",
121+
src: 'https://www.w3schools.com/html/mov_bbb.mp4',
122+
type: 'video/mp4',
112123
},
113124
{
114-
src: "https://media.w3.org/2010/05/sintel/trailer.ogv",
115-
type: "video/ogg",
125+
src: 'https://www.w3schools.com/html/movie.ogg',
126+
type: 'video/ogg',
116127
},
117128
],
118129
tracks: [
119130
{
120-
kind: "captions",
121-
src: "https://media.w3.org/2010/05/sintel/captions.vtt",
122-
srclang: "en",
123-
label: "English",
124-
default: true,
131+
kind: 'captions',
132+
src: 'https://example.com/captions.vtt',
133+
srclang: 'en',
134+
label: 'English',
135+
default: true,
125136
},
126137
],
138+
plugins: {
139+
examplePlugin: {}, //optional plugin
140+
},
127141
};
142+
const handlePlayerReady = (player) => {
143+
console.log("Player is ready:", player);
128144

129-
return <VideoPlayer options={videoJsOptions} />;
145+
player.on("play", () => {
146+
console.log("Video is playing");
147+
});
148+
149+
player.on("pause", () => {
150+
console.log("Video is paused");
151+
});
152+
153+
player.on("ended", () => {
154+
console.log("Video ended");
155+
});
156+
};
157+
158+
return <VideoPlayer options={videoJsOptions} onReady={handlePlayerReady} />;
130159
};
131160

132161
export default Home;
@@ -146,31 +175,39 @@ export default Home;
146175

147176
```json
148177
{
149-
"autoplay": false,
150-
"controls": true,
151-
"responsive": true,
152-
"fluid": true,
153-
"poster": "https://upload.wikimedia.org/wikipedia/commons/5/51/Video_poster.jpg",
154-
"playbackRates": [0.5, 1, 1.5, 2],
155-
"sources": [
156-
{
157-
"src": "https://media.w3.org/2010/05/sintel/trailer_hd.mp4",
158-
"type": "video/mp4"
178+
"autoplay": false,
179+
"controls": true,
180+
"preload": "auto",
181+
"responsive": true,
182+
"fluid": true,
183+
"playbackRates": [0.5, 1, 1.5, 2],
184+
"loop": true,
185+
"muted": false,
186+
"poster": "https://hoststreamsell-pics.s3.amazonaws.com/600c26a209974338f4a579055e7ef61f_big.jpg",
187+
"language": "en",
188+
"aspectRatio": "16:9",
189+
"sources": [
190+
{
191+
"src": "https://www.w3schools.com/html/mov_bbb.mp4",
192+
"type": "video/mp4",
193+
},
194+
{
195+
"src": "https://www.w3schools.com/html/movie.ogg",
196+
"type": "video/ogg",
197+
},
198+
],
199+
"tracks": [
200+
{
201+
"kind": "captions",
202+
"src": "https://example.com/captions.vtt",
203+
"srclang": "en",
204+
"label": "English",
205+
"default": true,
206+
},
207+
],
208+
"plugins": {
209+
"examplePlugin": {}, //optional plugin
159210
},
160-
{
161-
"src": "https://media.w3.org/2010/05/sintel/trailer.ogv",
162-
"type": "video/ogg"
163-
}
164-
],
165-
"tracks": [
166-
{
167-
"kind": "captions",
168-
"src": "https://media.w3.org/2010/05/sintel/captions.vtt",
169-
"srclang": "en",
170-
"label": "English",
171-
"default": true
172-
}
173-
]
174211
}
175212
```
176213

@@ -207,5 +244,4 @@ If you encounter any issues or have suggestions, please create an issue in the [
207244

208245
## Contributions
209246

210-
Contributions are welcome! Feel free to fork the repository, make changes, and submit a pull request.
211-
247+
Contributions are welcome! Feel free to fork the repository, make changes, and submit a pull request.

0 commit comments

Comments
 (0)