Skip to content

An updated, customisable React Native video player for Android and IOS based on AF-video-player from abbasfreestyle.

License

Notifications You must be signed in to change notification settings

clwy-cn/clwy-react-native-video-player

 
 

Repository files navigation

clwy-react-native-video-player

Features

  • Fullscreen support for Android and iOS!

Install

yarn add clwy-react-native-video-player react-native-orientation-locker @sayem314/react-native-keep-awake

If you use iOS

npx pod-install

Props

Prop Type Required Default Description
url string, number Yes A URL string (or number for local) is required.
autoPlay bool No false Autoplays the video as soon as it's loaded
loop bool No false Allows the video to continuously loop
title string No '' Adds a title of your video at the top of the player
placeholder string No undefined Adds an image placeholder while it's loading and stopped at the beginning
logo string No undefined Adds an image logo at the top left corner of the video
theme string No 'white' Adds an optional theme colour to the players controls
hideFullScreenControl bool No false This hides the full screen control
style number, object No {} Apply styles directly to the Video player (ignored in fullscreen mode)
resizeMode string No 'contain' Fills the whole screen at aspect ratio. contain, cover etc
rotateToFullScreen bool No false Tapping the fullscreen button will rotate the screen. Also rotating the screen will automatically switch to fullscreen mode
fullScreenOnly bool No false This will play only in fullscreen mode
inlineOnly bool No false This hides the fullscreen button and only plays the video in inline mode
playInBackground bool No false Audio continues to play when app enters background.
playWhenInactive bool No false [iOS] Video continues to play when control or notification center are shown.
rate number No 1 Adjusts the speed of the video. 0 = stopped, 1.0 = normal
volume number No 1 Adjusts the volume of the video. 0 = mute, 1.0 = full volume
onMorePress function No undefined Adds an action button at the top right of the player. Use this callback function for your own use. e.g share link
onFullScreen function No (value) => {} Returns the fullscreen status whenever it toggles. Useful for situations like react navigation.
onTimedMetadata function No undefined Callback when the stream receives metadata
scrollBounce bool No false Enables the bounce effect for the ScrollView
lockPortraitOnFsExit bool No false Keep Portrait mode locked after Exiting from Fullscreen mode
lockRatio number No undefined Force a specific ratio to the Video player. e.g. lockRatio={16 / 9}
onLoad function No (data) => {} Returns data once video is loaded
onProgress function No (progress) => {} Returns progress data
onEnd function No () => {} Invoked when video finishes playing
onError function No (error) => {} Returns an error message argument
onPlay function No (playing) => {} Returns a boolean during playback
error boolean, object No true Pass in an object to Alert. See https://facebook.github.io/react-native/docs/alert.html
theme object No all white Pass in an object to theme. (See example below to see the full list of available settings)
controlDuration number No 3 Set the visibility time of the pause button and the progress bar after the video was started

Example

import React, { useState } from 'react'
import { StyleSheet, View } from 'react-native'
import Video from 'clwy-react-native-video-player'

function VideoScreen({ route, navigation }) {  
  const [fullscreen, setFullscreen] = React.useState(false)
  React.useEffect(() => {
    navigation.setOptions({ headerShown: !fullscreen })
  }, [fullscreen, navigation])
  
  const logo = 'logo.png'
  const image = 'image.png'
  const source = '1.mp4'   

  const onFullScreen = (status) => {
    setFullscreen(status);
  };

  return (
     <View style={styles.container}>
        <Video
            url={source}
            autoPlay
            logo={logo}
            placeholder={image}
            hideFullScreenControl={false}
            onFullScreen={status => onFullScreen(status)}
            rotateToFullScreen
        />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    flex: 1,
    justifyContent: 'center',
  },
})

export default VideoScreen

To Do

  • Option to use custom icons
  • Support Immersive mode for Android
  • improve multiple videos fullscreen support within a ScrollView
  • investigate subtitle support
  • Support for iOS
  • Provide fullscreen support within a ScrollView
  • Customise specific components for better theming

MIT Licensed

About

An updated, customisable React Native video player for Android and IOS based on AF-video-player from abbasfreestyle.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%