react-native-video
Advanced tools
The react-native-video package is a versatile video playback library for React Native applications. It allows developers to embed and control video playback within their mobile apps, supporting a wide range of video formats and providing various customization options.
Basic Video Playback
This feature allows you to play a video from a given URI. The video is embedded within a React Native component and can be styled using standard React Native styles.
import Video from 'react-native-video';
const BasicVideoPlayer = () => (
<Video
source={{ uri: 'https://www.example.com/video.mp4' }}
style={{ width: 300, height: 200 }}
/>
);Custom Controls
This feature enables the default video controls, such as play, pause, and seek, providing a more interactive video playback experience.
import Video from 'react-native-video';
const CustomControlsVideoPlayer = () => (
<Video
source={{ uri: 'https://www.example.com/video.mp4' }}
style={{ width: 300, height: 200 }}
controls={true}
/>
);Event Handling
This feature allows you to handle various video playback events, such as when the video ends or if an error occurs during playback.
import Video from 'react-native-video';
const EventHandlingVideoPlayer = () => (
<Video
source={{ uri: 'https://www.example.com/video.mp4' }}
style={{ width: 300, height: 200 }}
onEnd={() => console.log('Video has ended')}
onError={(error) => console.log('Error:', error)}
/>
);Looping Video
This feature enables the video to loop continuously, restarting automatically when it reaches the end.
import Video from 'react-native-video';
const LoopingVideoPlayer = () => (
<Video
source={{ uri: 'https://www.example.com/video.mp4' }}
style={{ width: 300, height: 200 }}
repeat={true}
/>
);The react-native-video-controls package provides a customizable set of video controls for the react-native-video component. It extends the functionality of react-native-video by adding a set of default controls that can be easily customized.
The react-native-youtube package allows you to embed YouTube videos in your React Native application. It provides a simple interface for playing YouTube videos and supports various YouTube player features, such as autoplay, fullscreen, and video quality settings.
The react-native-vlc-media-player package is a React Native wrapper for the VLC media player. It supports a wide range of video formats and provides advanced playback features, such as network streaming, subtitles, and hardware acceleration.
<Video> component for react-native.Version 6.x recommends react-native >= 0.68.2. For older versions of react-native, please use version 5.x.
Version 6.0.0 is introducing dozens of breaking changes, mostly through updated dependecies and significant refactoring. While the API remains compatible, the significant internal changes require full testing with your app to ensure all functionality remains operational. Please view the Changelog for specific breaking changes.
react-native-video was originally created by Brent Vatne
Version 6.0.0-alpha.2
FAQs
A <Video /> element for react-native
The npm package react-native-video receives a total of 150,004 weekly downloads. As such, react-native-video popularity was classified as popular.
We found that react-native-video demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
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.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.
Security News
PEP 770 proposes adding SBOM support to Python packages to improve transparency and catch hidden non-Python dependencies that security tools often miss.
Security News
Socket CEO Feross Aboukhadijeh discusses open source security challenges, including zero-day attacks and supply chain risks, on the Cyber Security Council podcast.