Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@remotion/player

Package Overview
Dependencies
Maintainers
1
Versions
800
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@remotion/player

Remotion Player

  • 4.0.165
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
45K
increased by33.19%
Maintainers
1
Weekly downloads
 
Created
Source

Remotion Player

NPM Version NPM Downloads Install Size

The @remotion/player package allows you to embed a video powered by Remotion in a React application.

Installation and prerequisites

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 on how to get FFMPEG on your machine.

Install this package and Remotion with the package manager that you use for project:

npm i remotion @remotion/player
yarn add remotion @remotion/player
pnpm i remotion @remotion/player

Make sure all Remotion packages you install (remotion, @remotion/player, @remotion/gif...) have the same version.

Getting started

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.

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.

// components/MyVideo.js
import React from 'react';
import {useCurrentFrame} from 'remotion';

const MyVideo = () => {
	const frame = useCurrentFrame();

	return (
		<div
			style={{
				flex: 1,
				textAlign: 'center',
				fontSize: '7em',
			}}
		>
			The current frame is {frame}.
		</div>
	);
};
import {Player} from '@remotion/player';
import {MyVideo} from '../components/MyVideo';

export const App = () => {
	return (
		<Player
			component={MyVideo}
			durationInFrames={120}
			compositionWidth={1920}
			compositionHeight={1080}
			fps={30}
		/>
	);
};

API

The most important props accepted:

PropsFunction
componentA React component that renders the video
durationInFramesThe duration of the video in frames
compositionHeightThe height of the composition in pixels
compositionWidthThe width of the composition in pixels
fpsThe frame rate of the video

For a complete reference of the available props, refer to @remotion/player API.

Keywords

FAQs

Package last updated on 28 May 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc