react-create-html-video 1.0.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.
- package/README.md +64 -0
- package/dist/index.cjs.js +1617 -0
- package/dist/index.cjs.js.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.esm.js +1615 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/types/index.d.ts +4 -0
- package/dist/video-component/index.d.ts +7 -0
- package/dist/video-component/use-video.d.ts +6 -0
- package/package.json +51 -0
package/README.md
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
|
|
2
|
+
## React Create HTML Video
|
|
3
|
+
A lightweight React component that programmatically generates and plays an HTML `<video>` element with a clean, reusable API. This library does not rely on CSS-in-JS, with styles are intentionally kept minimal. Created with Typescript support.
|
|
4
|
+
|
|
5
|
+
### ๐ฆ Installation
|
|
6
|
+
```console
|
|
7
|
+
npm install react-create-html-video
|
|
8
|
+
```
|
|
9
|
+
|
|
10
|
+
### ๐ฒ Features
|
|
11
|
+
1. Built for modern React with support for Typescript
|
|
12
|
+
2. A lightweight API surface that is easy to understand
|
|
13
|
+
3. Helps render a native HTML `<video>` element on the browser
|
|
14
|
+
4. Provides support for MP4 and Webm based Video displays
|
|
15
|
+
5. No manual CSS import is required โ styles are bundled with the package.
|
|
16
|
+
|
|
17
|
+
### ๐ API Type Signature
|
|
18
|
+
```javascript
|
|
19
|
+
export type TReactCreateHTMLVideo = {
|
|
20
|
+
mp4: string;
|
|
21
|
+
webm: string;
|
|
22
|
+
};
|
|
23
|
+
```
|
|
24
|
+
### ๐ค Peer Dependencies
|
|
25
|
+
```javascript
|
|
26
|
+
"peerDependencies": {
|
|
27
|
+
"react": ">=17",
|
|
28
|
+
"react-dom": ">=17"
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
### ๐งช How This Works
|
|
32
|
+
1. Detects browser support using ```HTMLVideoElement.canPlayType```
|
|
33
|
+
2. Prefers MP4 if supported
|
|
34
|
+
3. Falls back to WebM if MP4 is unavailable
|
|
35
|
+
4. Disables video rendering on Internet Explorer
|
|
36
|
+
5. Returns ```null``` when no supported format is available
|
|
37
|
+
|
|
38
|
+
### ๐ค Example Usage
|
|
39
|
+
```javascript
|
|
40
|
+
/* node modules */
|
|
41
|
+
import { ReactCreateHTMLVideo } from "react-create-html-video";
|
|
42
|
+
|
|
43
|
+
/* module */
|
|
44
|
+
function UIComponent() {
|
|
45
|
+
return (
|
|
46
|
+
{/* make sure your parent container is positioned: relative, imagine here min-height of 100vh */}
|
|
47
|
+
<div className="heroSection positionRelative">
|
|
48
|
+
<ReactCreateHTMLVideo
|
|
49
|
+
mp4="/path/to/mp4/video.mp4"
|
|
50
|
+
webm="/path/to/webm/video.webm"
|
|
51
|
+
/>
|
|
52
|
+
</div>
|
|
53
|
+
)
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* exports */
|
|
57
|
+
export default UIComponent;
|
|
58
|
+
```
|
|
59
|
+
### ๐ Contributing
|
|
60
|
+
Contributions, suggestions, and improvements are welcome.<br/>
|
|
61
|
+
Feel free to open issues or pull requests.
|
|
62
|
+
|
|
63
|
+
### โค๏ธ Support
|
|
64
|
+
Like this project? Support it with a github star, it would mean a lot to me! Cheers and Happy Coding.
|