@@ -26,21 +26,6 @@ Or using Yarn:
26
26
yarn add next-react-videojs
27
27
```
28
28
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
-
44
29
## Usage
45
30
46
31
Here’s an example of how to use the ` next-react-videojs ` component:
@@ -55,33 +40,54 @@ const App = () => {
55
40
const videoJsOptions = {
56
41
autoplay: false ,
57
42
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 ,
61
46
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' ,
62
52
sources: [
63
53
{
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' ,
66
56
},
67
57
{
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' ,
70
60
},
71
61
],
72
62
tracks: [
73
63
{
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 ,
79
69
},
80
70
],
71
+ plugins: {
72
+ examplePlugin: {}, // optional plugin
73
+ },
81
74
};
82
75
76
+
83
77
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
+ });
85
91
};
86
92
87
93
return <VideoPlayer options = { videoJsOptions } onReady = { handlePlayerReady } />;
@@ -101,32 +107,55 @@ const Home = () => {
101
107
const videoJsOptions = {
102
108
autoplay: false ,
103
109
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 ,
107
113
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' ,
108
119
sources: [
109
120
{
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' ,
112
123
},
113
124
{
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' ,
116
127
},
117
128
],
118
129
tracks: [
119
130
{
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 ,
125
136
},
126
137
],
138
+ plugins: {
139
+ examplePlugin: {}, // optional plugin
140
+ },
127
141
};
142
+ const handlePlayerReady = (player ) => {
143
+ console .log (" Player is ready:" , player );
128
144
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 } />;
130
159
};
131
160
132
161
export default Home ;
@@ -146,31 +175,39 @@ export default Home;
146
175
147
176
``` json
148
177
{
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
159
210
},
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
- ]
174
211
}
175
212
```
176
213
@@ -207,5 +244,4 @@ If you encounter any issues or have suggestions, please create an issue in the [
207
244
208
245
## Contributions
209
246
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