movi-player 0.1.2 โ 0.1.3
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 +156 -39
- package/dist/element.cjs +285 -177
- package/dist/element.js +492 -384
- package/dist/index.cjs +285 -177
- package/dist/index.js +492 -384
- package/dist/render/MoviElement.d.ts +3 -2
- package/dist/render/MoviElement.d.ts.map +1 -1
- package/dist/render/MoviElement.js +454 -193
- package/dist/render/MoviElement.js.map +1 -1
- package/package.json +8 -2
package/README.md
CHANGED
|
@@ -1,15 +1,60 @@
|
|
|
1
|
-
# Movi-Player
|
|
1
|
+
# ๐ฌ Movi-Player
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> Modern, modular video player for the web powered by WebCodecs + FFmpeg WASM
|
|
4
|
+
> Built for HDR, performance, and professional streaming workflows.
|
|
4
5
|
|
|
5
6
|
[](https://www.npmjs.com/package/movi-player)
|
|
6
|
-
[](LICENSE)
|
|
7
8
|
[](https://caniuse.com/webcodecs)
|
|
8
9
|
|
|
9
|
-
|
|
10
|
+
๐ **Install:** `npm i movi-player`
|
|
11
|
+
๐ **Docs:** [mrujjwalg.github.io/movi-player](https://mrujjwalg.github.io/movi-player/)
|
|
12
|
+
๐ **Demo:** [movi-player-examples.vercel.app](https://movi-player-examples.vercel.app/element.html)
|
|
10
13
|
|
|
11
14
|
|
|
12
15
|
|
|
16
|
+
> ๐ **No Server-Side Processing Required!** โ All video parsing, demuxing, and decoding happens entirely in the browser using FFmpeg WASM & WebCodecs. Multiple audio/subtitle tracks are supported without any conversion or processing!
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## โก TL;DR
|
|
21
|
+
|
|
22
|
+
Movi-Player helps you build **high-performance video players in browsers** with:
|
|
23
|
+
|
|
24
|
+
โ
WebCodecs + FFmpeg WASM decoding
|
|
25
|
+
โ
HDR detection & rendering
|
|
26
|
+
โ
Canvas-based secure rendering
|
|
27
|
+
โ
Modular size (45KB โ 410KB)
|
|
28
|
+
โ
MP4, MKV, TS, WebM, MOV support
|
|
29
|
+
โ
**No server-side processing** โ All processing happens in the browser!
|
|
30
|
+
|
|
31
|
+
> If you need serious video playback in web apps โ Movi-Player is for you.
|
|
32
|
+
|
|
33
|
+
๐ฆ Install:
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
npm i movi-player
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
- Full Documentation โ https://mrujjwalg.github.io/movi-player/
|
|
40
|
+
- Default Player โ https://movi-player-examples.vercel.app/element.html
|
|
41
|
+
- Demuxer โ https://movi-player-examples.vercel.app/demuxer.html
|
|
42
|
+
- Custom UI โ https://movi-player-examples.vercel.app/youtube.html
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
## ๐ค Why Movi-Player?
|
|
47
|
+
|
|
48
|
+
| Feature | movi-player | video.js | hls.js |
|
|
49
|
+
| ------------------------- | ----------- | -------- | ------ |
|
|
50
|
+
| WebCodecs | โ
| โ | โ |
|
|
51
|
+
| HDR Support | โ
| โ | โ |
|
|
52
|
+
| MKV / TS | โ
| โ | โ |
|
|
53
|
+
| Canvas Renderer | โ
| โ | โ |
|
|
54
|
+
| Modular | โ
| โ | โ |
|
|
55
|
+
| FFmpeg WASM | โ
| โ | โ |
|
|
56
|
+
| No Server-Side Processing | โ
| โ | โ |
|
|
57
|
+
|
|
13
58
|
---
|
|
14
59
|
|
|
15
60
|
## โจ Key Features
|
|
@@ -28,12 +73,10 @@ Movi-Player is a powerful, modular video playback library that brings native-lik
|
|
|
28
73
|
|
|
29
74
|
---
|
|
30
75
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
- **[๐ Full Documentation](docs/)** - Comprehensive guides and API reference
|
|
76
|
+
- **[๐ Documentation](https://mrujjwalg.github.io/movi-player/)** - Comprehensive guides and API reference
|
|
34
77
|
- **[๐ฎ Live Examples](https://github.com/MrUjjwalG/movi-player-examples)** - Interactive demos and sample code
|
|
35
|
-
- **[๐๏ธ Architecture Guide](
|
|
36
|
-
- **[๐ฌ API Reference](
|
|
78
|
+
- **[๐๏ธ Architecture Guide](https://mrujjwalg.github.io/movi-player/guide/architecture)** - System design and internals
|
|
79
|
+
- **[๐ฌ API Reference](https://mrujjwalg.github.io/movi-player/api/player)** - Complete API documentation
|
|
37
80
|
|
|
38
81
|
---
|
|
39
82
|
|
|
@@ -47,7 +90,29 @@ npm install movi-player
|
|
|
47
90
|
|
|
48
91
|
### Basic Usage
|
|
49
92
|
|
|
50
|
-
#### Option 1:
|
|
93
|
+
#### Option 1: CDN (No Install Required)
|
|
94
|
+
|
|
95
|
+
```html
|
|
96
|
+
<!DOCTYPE html>
|
|
97
|
+
<html>
|
|
98
|
+
<head>
|
|
99
|
+
<script type="module">
|
|
100
|
+
import "https://unpkg.com/movi-player@latest/dist/element.js";
|
|
101
|
+
</script>
|
|
102
|
+
</head>
|
|
103
|
+
<body>
|
|
104
|
+
<movi-player
|
|
105
|
+
src="https://example.com/video.mp4"
|
|
106
|
+
controls
|
|
107
|
+
autoplay
|
|
108
|
+
muted
|
|
109
|
+
style="width: 100%; height: 500px;"
|
|
110
|
+
></movi-player>
|
|
111
|
+
</body>
|
|
112
|
+
</html>
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
#### Option 2: Custom HTML Element (npm)
|
|
51
116
|
|
|
52
117
|
```html
|
|
53
118
|
<!DOCTYPE html>
|
|
@@ -69,30 +134,81 @@ npm install movi-player
|
|
|
69
134
|
</html>
|
|
70
135
|
```
|
|
71
136
|
|
|
72
|
-
|
|
137
|
+
> โ ๏ธ **CORS Note**: When using HTTP URLs, ensure your server has CORS enabled. For local file playback using `FileSource`, no CORS configuration is needed!
|
|
138
|
+
|
|
139
|
+
#### Option 3: Programmatic Player API
|
|
73
140
|
|
|
74
141
|
```typescript
|
|
75
|
-
import { MoviPlayer } from "movi-player/player";
|
|
142
|
+
import { MoviPlayer, LogLevel } from "movi-player/player";
|
|
143
|
+
|
|
144
|
+
// Optional: Set log level
|
|
145
|
+
MoviPlayer.setLogLevel(LogLevel.ERROR);
|
|
76
146
|
|
|
77
147
|
const canvas = document.getElementById("canvas") as HTMLCanvasElement;
|
|
78
148
|
const player = new MoviPlayer({
|
|
79
|
-
source: {
|
|
149
|
+
source: {
|
|
150
|
+
type: "url",
|
|
151
|
+
url: "https://example.com/video.mp4",
|
|
152
|
+
},
|
|
80
153
|
canvas: canvas,
|
|
154
|
+
renderer: "canvas",
|
|
155
|
+
decoder: "auto",
|
|
81
156
|
});
|
|
82
157
|
|
|
83
|
-
|
|
158
|
+
// Event listeners
|
|
159
|
+
player.on("loadEnd", () => console.log("Loaded!"));
|
|
160
|
+
player.on("stateChange", (state) => console.log("State:", state));
|
|
161
|
+
player.on("error", (e) => console.error(e));
|
|
162
|
+
|
|
163
|
+
// Load and play
|
|
164
|
+
await player.load();
|
|
84
165
|
await player.play();
|
|
85
166
|
```
|
|
86
167
|
|
|
87
|
-
#### Option
|
|
168
|
+
#### Option 4: Local File Playback (FileSource)
|
|
169
|
+
|
|
170
|
+
Play local video files directly from user's device โ **no upload to server needed!**
|
|
171
|
+
|
|
172
|
+
```typescript
|
|
173
|
+
import { MoviPlayer, FileSource } from "movi-player/player";
|
|
174
|
+
|
|
175
|
+
// Get file from input element
|
|
176
|
+
const fileInput = document.getElementById("file") as HTMLInputElement;
|
|
177
|
+
const canvas = document.getElementById("canvas") as HTMLCanvasElement;
|
|
178
|
+
|
|
179
|
+
fileInput.addEventListener("change", async (e) => {
|
|
180
|
+
const file = (e.target as HTMLInputElement).files?.[0];
|
|
181
|
+
if (!file) return;
|
|
182
|
+
|
|
183
|
+
const player = new MoviPlayer({
|
|
184
|
+
source: {
|
|
185
|
+
type: "file",
|
|
186
|
+
file: file,
|
|
187
|
+
},
|
|
188
|
+
canvas: canvas,
|
|
189
|
+
});
|
|
190
|
+
|
|
191
|
+
await player.load();
|
|
192
|
+
await player.play();
|
|
193
|
+
});
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
> ๐ก **No server required!** Video parsing, demuxing, and decoding all happen on the client using FFmpeg WASM.
|
|
197
|
+
|
|
198
|
+
#### Option 5: Demuxer Only (Metadata & HDR Extraction)
|
|
88
199
|
|
|
89
200
|
|
|
90
201
|
|
|
91
202
|
```typescript
|
|
92
|
-
import { Demuxer, HttpSource } from "movi-player/demuxer";
|
|
203
|
+
import { Demuxer, HttpSource, FileSource } from "movi-player/demuxer";
|
|
93
204
|
|
|
94
|
-
|
|
95
|
-
const
|
|
205
|
+
// From URL
|
|
206
|
+
const httpSource = new HttpSource("video.mp4");
|
|
207
|
+
|
|
208
|
+
// OR from local file (no server upload needed!)
|
|
209
|
+
const fileSource = new FileSource(localFile);
|
|
210
|
+
|
|
211
|
+
const demuxer = new Demuxer(httpSource); // or fileSource
|
|
96
212
|
|
|
97
213
|
const info = await demuxer.open();
|
|
98
214
|
console.log(`Duration: ${info.duration}s`);
|
|
@@ -163,7 +279,7 @@ Movi-Player's modular design makes it perfect for a wide range of applications:
|
|
|
163
279
|
- **Real Estate**: Virtual property tours with room navigation
|
|
164
280
|
- **Science**: Time-lapse microscopy and data visualization
|
|
165
281
|
|
|
166
|
-
**[View Detailed Use Cases & Code Examples โ](
|
|
282
|
+
**[View Detailed Use Cases & Code Examples โ](https://mrujjwalg.github.io/movi-player/guide/use-cases)**
|
|
167
283
|
|
|
168
284
|
---
|
|
169
285
|
|
|
@@ -349,21 +465,21 @@ Comprehensive documentation is available in the [docs/](docs/) directory:
|
|
|
349
465
|
|
|
350
466
|
### Core Documentation
|
|
351
467
|
|
|
352
|
-
- **[Architecture](
|
|
353
|
-
- **[Demuxer](
|
|
354
|
-
- **[Player](
|
|
355
|
-
- **[Video Element](
|
|
468
|
+
- **[Architecture](https://mrujjwalg.github.io/movi-player/guide/architecture)** - System design, data flow, and performance
|
|
469
|
+
- **[Demuxer](https://mrujjwalg.github.io/movi-player/api/demuxer)** - Container parsing and metadata extraction
|
|
470
|
+
- **[Player](https://mrujjwalg.github.io/movi-player/api/player)** - Playback control, A/V sync, and track management
|
|
471
|
+
- **[Video Element](https://mrujjwalg.github.io/movi-player/api/element)** - Custom HTML element API and attributes
|
|
356
472
|
|
|
357
473
|
### Standards & Compliance
|
|
358
474
|
|
|
359
|
-
- **[ISO Standards Compliance](
|
|
475
|
+
- **[ISO Standards Compliance](https://mrujjwalg.github.io/movi-player/guide/standards)** - Standards verification report
|
|
360
476
|
|
|
361
477
|
### Quick Links
|
|
362
478
|
|
|
363
|
-
- [Getting Started Guide](
|
|
364
|
-
- [API Reference](
|
|
365
|
-
- [Event Documentation](
|
|
366
|
-
- [Color Space & HDR](
|
|
479
|
+
- [Getting Started Guide](https://mrujjwalg.github.io/movi-player/guide/getting-started)
|
|
480
|
+
- [API Reference](https://mrujjwalg.github.io/movi-player/api/player)
|
|
481
|
+
- [Event Documentation](https://mrujjwalg.github.io/movi-player/api/events)
|
|
482
|
+
- [Color Space & HDR](https://mrujjwalg.github.io/movi-player/guide/hdr-support)
|
|
367
483
|
|
|
368
484
|
### Examples
|
|
369
485
|
|
|
@@ -439,7 +555,7 @@ The `<movi-player>` element supports standard video attributes plus enhancements
|
|
|
439
555
|
hdr <!-- Enable HDR rendering -->
|
|
440
556
|
ambientmode <!-- Ambient background effects -->
|
|
441
557
|
renderer="canvas" <!-- canvas | mse -->
|
|
442
|
-
sw
|
|
558
|
+
sw="auto" <!-- auto (default) | true | false -->
|
|
443
559
|
fps="0" <!-- Custom frame rate override -->
|
|
444
560
|
></movi-player>
|
|
445
561
|
```
|
|
@@ -573,7 +689,8 @@ const player = new MoviPlayer({
|
|
|
573
689
|
- WASM heap: ~50MB
|
|
574
690
|
- Video frame queue: ~1.4GB (120 frames ร 12MB)
|
|
575
691
|
- Audio buffer: ~384KB
|
|
576
|
-
- **
|
|
692
|
+
- **Typical usage: 200โ400MB**
|
|
693
|
+
- **Peak (4K HEVC, max buffer): ~1.5GB**
|
|
577
694
|
|
|
578
695
|
### Optimizations
|
|
579
696
|
|
|
@@ -661,13 +778,7 @@ npm run dev
|
|
|
661
778
|
|
|
662
779
|
---
|
|
663
780
|
|
|
664
|
-
##
|
|
665
|
-
|
|
666
|
-
MIT License - see the [LICENSE](LICENSE) file for details.
|
|
667
|
-
|
|
668
|
-
---
|
|
669
|
-
|
|
670
|
-
## ๐ Acknowledgments
|
|
781
|
+
## Acknowledgments
|
|
671
782
|
|
|
672
783
|
- **FFmpeg**: Universal media framework
|
|
673
784
|
- **Emscripten**: WebAssembly toolchain
|
|
@@ -717,8 +828,14 @@ MIT License - see the [LICENSE](LICENSE) file for details.
|
|
|
717
828
|
|
|
718
829
|
If you find Movi-Player useful, please consider giving it a star on GitHub!
|
|
719
830
|
|
|
831
|
+
[](https://star-history.com/#MrUjjwalG/movi-player&Date)
|
|
832
|
+
|
|
720
833
|
---
|
|
721
834
|
|
|
722
|
-
|
|
835
|
+
## ๐ License
|
|
836
|
+
|
|
837
|
+
MIT License
|
|
838
|
+
|
|
839
|
+
---
|
|
723
840
|
|
|
724
|
-
|
|
841
|
+
Built with โค๏ธ by [Ujjwal Kashyap](https://github.com/mrujjwalg)
|