Basic Video Player

A simple implementation of the video player with default controls

0:00 / 0:00

Code Example

tsx

1import { VideoPlayer } from 'react-advanced-video-player';
2
3function App() {
4  return (
5    <VideoPlayer 
6      src="https://example.com/video.mp4" 
7      poster="https://example.com/poster.jpg"
8      controls
9    />
10  );
11}

How it Works

The basic video player is the simplest implementation of the React Advanced Video Player component. It requires only a few props to get started:

src: The URL of the video file to play
poster (optional): The URL of an image to display before the video plays
controls: Whether to show the default player controls

Note: When controls is set to true, the player will display its default controls. If you want to create custom controls, set this to falseand provide your own controls implementation. See the Custom Controls Examplefor more information.

Additional Options

The basic implementation can be enhanced with additional props:

tsx

1import { VideoPlayer } from 'react-advanced-video-player';
2
3function EnhancedBasicPlayer() {
4  return (
5    <VideoPlayer 
6      src="https://example.com/video.mp4" 
7      poster="https://example.com/poster.jpg"
8      controls
9      autoPlay={false}
10      muted={true}
11      loop={false}
12      preload="metadata"
13      width="100%"
14      height="auto"
15      onPlay={() => console.log('Video started playing')}
16      onPause={() => console.log('Video paused')}
17      onEnded={() => console.log('Video ended')}
18    />
19  );
20}

See the Player API documentation for a full list of available props.