DOCSEARCHbyAlgolia
Submit Docs

react-native-video-player

repository·master·Indexed 20 days ago

https://github.com/thewidlarzgroup/react-native-video-player

A React Native component that provides a pre-built UI with controls for video playback, built on top of the react-native-video library. It includes a <VideoPlayer /> component with support for custom styles, playback controls (play, pause, seek, stop), and event callbacks such as onStart and onPlayPress. Version 0.16.3.

Tokens
5.6K
Snippets
21
Records
28
Agent score
70%

What's inside react-native-video-player

  1. Introduction to react-native-video-player

    master

    Overview

    react-native-video-player is a lightweight, user-friendly video player library for React Native. It is built on top of react-native-video and provides a simplified way to integrate video playback with custom controls and enhanced functionality.

    Key Features

    • Plug-and-play setup: Minimal configuration required to get started.
    • Customizable controls: Built-in support for play, pause, seek, fullscreen, and more.
    • Full Compatibility: Supports all props from the underlying react-native-video library.
    • Thumbnail Support: Capability to show thumbnails for video previews and end screens.
    • Programmatic Control: Provides ref methods to control playback via code.
    • Styling: Built-in support for customizing the player's appearance.

  6. Customize the video player appearance with `customStyles`

    master

    The react-native-video-player component provides a customStyles prop that allows you to pass an object containing React Native styles for various internal components. This enables full control over the player's visual integration, from the main container to specific icons and the seek bar.

    import React from 'react';
import { View, StyleSheet } from 'react-native';
import VideoPlayer from 'react-native-video-player';

const App = () => (
  <View style={{ flex: 1 }}>
    <VideoPlayer
      source={{ uri: 'https://example.com/video.mp4' }}
      thumbnail={{ uri: 'https://example.com/thumbnail.jpg' }}
      autoplay
      customStyles={{
        wrapper: styles.wrapper,
        playControl: styles.playControl,
        seekBarKnob: styles.seekBarKnob,
        thumbnailImage: styles.thumbnailImage
      }}
    />
  </View>
);

const styles = StyleSheet.create({
  wrapper: {
    // ...
  },
  playControl: {
    // ...
  },
  seekBarKnob: {
    // ...
  },
  thumbnailImage: {
    resizeMode: 'contain',
    // ...
  },
});

export default App;

  7. Deploy the documentation website

    master

    The documentation website can be deployed using different methods depending on your hosting preference.

    Deploy via SSH

    Set the USE_SSH environment variable to true before running the deploy command:

    $ USE_SSH=true yarn deploy

    Deploy to GitHub Pages

    If you are not using SSH, you can deploy to GitHub Pages by providing your GitHub username via the GIT_USER environment variable. This command builds the site and pushes it to the gh-pages branch:

    $ GIT_USER=<Your GitHub username> yarn deploy
    # Deploy via SSH
$ USE_SSH=true yarn deploy

# Deploy to GitHub Pages
$ GIT_USER=<Your GitHub username> yarn deploy

  10. Install react-native-video-player

    master

    To use react-native-video-player, you must install both react-native-video-player and its peer dependency react-native-video.

    After installing the npm packages, ensure you install the iOS pods to complete the setup.

    # Using yarn
yarn add react-native-video-player react-native-video

# Using npm
npm install --save react-native-video-player react-native-video

# Install iOS pods
cd ios
pod install

  11. Access VideoPlayer methods via refs

    master

    To programmatically control video playback, you must create a ref for the VideoPlayer component using the VideoPlayerRef type. This allows you to call playback control methods directly on the component instance.

    import React, {useRef} from 'react';
import VideoPlayer, {type VideoPlayerRef} from 'react-native-video-player';

const App = () => {
  const playerRef = useRef<VideoPlayerRef>(null);

  const handlePause = () => {
      playerRef.current?.pause();
  };

  return (
    <VideoPlayer
      ref={playerRef}
      source={{ uri: 'https://example.com/video.mp4' }}
    />
  );
};

  12. Use the VideoPlayer component

    master

    The <VideoPlayer /> component provides a video player interface with built-in controls. It uses react-native-video as its underlying engine.

    You can use a ref with the VideoPlayerRef type to control the player instance programmatically.

    import VideoPlayer, { type VideoPlayerRef } from 'react-native-video-player';
import React, { useRef }

const MyComponent = () => {
  const playerRef = useRef<VideoPlayerRef>(null);

  return (
    <VideoPlayer
      ref={playerRef}
      endWithThumbnail
      thumbnail={{
        uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg',
      }}
      source={{
        uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
      }}
      onError={(e) => console.log(e)}
      showDuration={true}
    />
  );
};