orange-player v1.0.12

Orange Player

Orange Player is a customizable video player component built with React. It provides an easy-to-use interface and supports various video controls such as play, pause, skip forward, skip backward, volume control, fullscreen, picture-in-picture, and playback speed adjustment.

Installation

You can install Orange Player via npm:

npm install orange-player

Usage

Here is a basic example of how to use the Orange Player component in your React application:

import React from 'react';
import OrangePlayer from 'orange-player';

const App = () => (
  <div>
    <OrangePlayer src="path/to/video.mp4" poster="path/to/poster.jpg" />
  </div>
);

export default App;

Props

src (string, required) The URL of the video to be played.

poster (string, optional) The URL of an image to be shown while the video is loading or until the user plays the video.

Features

• Play/Pause: Toggle video playback.
• Skip Forward/Backward: Jump forward or backward by 10 seconds.
• Volume Control: Adjust the volume.
• Mute/Unmute: Toggle sound on and off.
• Fullscreen: Enter and exit fullscreen mode.
• Picture-in-Picture: Enable picture-in-picture mode.
• Playback Speed: Adjust the playback speed of the video.
• Download: Download the video file.
• Keyboard Shortcuts: Control the player using keyboard shortcuts.

Keyboard Shortcuts

• Space: Play/Pause
• Arrow Right: Skip Forward
• Arrow Left: Skip Backward
• Arrow Up: Increase Volume
• Arrow Down: Decrease Volume
• M: Mute/Unmute
• F: Fullscreen
• P: Picture-in-Picture
• S: Open/Close Settings

Author

Azad Nishad