@remotion/player 3.0.0-lambda.419 → 3.0.0-lambda.437
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 +81 -3
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,8 +1,86 @@
|
|
|
1
1
|
### Remotion Player
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.org/package/@remotion/player)
|
|
4
4
|
[](https://npmcharts.com/compare/@remotion/player?minimal=true)
|
|
5
5
|
[](https://packagephobia.now.sh/result?p=@remotion/player)
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
The `@remotion/player` package allows you to embed a video powered by Remotion in a React application.
|
|
8
|
+
|
|
9
|
+
## Installation and prerequisites
|
|
10
|
+
|
|
11
|
+
The dependencies that Remotion requires you to have pre-installed on your machine are Node.js and FFMPEG. You can take a look at this [guide](https://github.com/adaptlearning/adapt_authoring/wiki/Installing-FFmpeg) on how to get FFMPEG on your machine.
|
|
12
|
+
|
|
13
|
+
Install this package and Remotion with the package manager that you use for project:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm i remotion @remotion/player
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
yarn add remotion @remotion/player
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
pnpm i remotion @remotion/player
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
> Make sure all Remotion packages you install (`remotion`, `@remotion/player`, `@remotion/gif`...) [have the same version](https://remotion.dev/docs/version-mismatch).
|
|
28
|
+
|
|
29
|
+
## Getting started
|
|
30
|
+
|
|
31
|
+
Now that you have this package as a dependency in your React project, it is time to see some of the basic examples that you can spin up with this package.
|
|
32
|
+
|
|
33
|
+
The `@remotion/player` package can be imported as a React component from the library, which you can make use of in your components, either by nesting it in a custom component of yours or simply making it a standalone component.
|
|
34
|
+
|
|
35
|
+
```javascript
|
|
36
|
+
// components/MyVideo.js
|
|
37
|
+
import React from 'react';
|
|
38
|
+
import {useCurrentFrame} from 'remotion';
|
|
39
|
+
|
|
40
|
+
const MyVideo = () => {
|
|
41
|
+
const frame = useCurrentFrame();
|
|
42
|
+
|
|
43
|
+
return (
|
|
44
|
+
<div
|
|
45
|
+
style={{
|
|
46
|
+
flex: 1,
|
|
47
|
+
textAlign: 'center',
|
|
48
|
+
fontSize: '7em',
|
|
49
|
+
}}
|
|
50
|
+
>
|
|
51
|
+
The current frame is {frame}.
|
|
52
|
+
</div>
|
|
53
|
+
);
|
|
54
|
+
};
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
```javascript
|
|
58
|
+
import {Player} from '@remotion/player';
|
|
59
|
+
import {MyVideo} from '../components/MyVideo';
|
|
60
|
+
|
|
61
|
+
export const App = () => {
|
|
62
|
+
return (
|
|
63
|
+
<Player
|
|
64
|
+
component={MyVideo}
|
|
65
|
+
durationInFrames={120}
|
|
66
|
+
compositionWidth={1920}
|
|
67
|
+
compositionHeight={1080}
|
|
68
|
+
fps={30}
|
|
69
|
+
/>
|
|
70
|
+
);
|
|
71
|
+
};
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## API
|
|
75
|
+
|
|
76
|
+
The most important props accepted:
|
|
77
|
+
|
|
78
|
+
| Props | Function |
|
|
79
|
+
| ----------------- | ---------------------------------------- |
|
|
80
|
+
| component | A React component that renders the video |
|
|
81
|
+
| durationInFrames | The duration of the video in frames |
|
|
82
|
+
| compositionHeight | The height of the composition in pixels |
|
|
83
|
+
| compositionWidth | The width of the composition in pixels |
|
|
84
|
+
| fps | The frame rate of the video |
|
|
85
|
+
|
|
86
|
+
For a complete reference of the available props, refer to [@remotion/player API](https://www.remotion.dev/docs/player/api).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@remotion/player",
|
|
3
|
-
"version": "3.0.0-lambda.
|
|
3
|
+
"version": "3.0.0-lambda.437+143873cfa",
|
|
4
4
|
"description": "Remotion Player",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
],
|
|
29
29
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"remotion": "3.0.0-lambda.
|
|
31
|
+
"remotion": "3.0.0-lambda.437+143873cfa"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"react": ">=16.8.0",
|
|
@@ -63,5 +63,5 @@
|
|
|
63
63
|
"publishConfig": {
|
|
64
64
|
"access": "public"
|
|
65
65
|
},
|
|
66
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "143873cfa990b7851e4264e183797c4fbbbd2314"
|
|
67
67
|
}
|