React-native-ivideo NPM

react-native-ivideo

react-native-ivideo is a react-native-video based video player component. React Native > 0.40.0 is required.

中文说明 -> 点这里

Currently, the performance is not tested on IOS.

Features:

Basic playback features, friendly interface, progress control, evolving animation, and simple style.
Fine-grained optimization, the UI thread can maintain 60 FPS during playback, and the JS thread can maintain 60 ~ 55 FPS.
Provides full-screen playback.
Supports formats such as MP4, M4A, FMP4, WebM, MKV, MP3, Ogg, WAV, MPEG-TS, MPEG-PS, FLV and ADTS (AAC).
Support DASH, HlS and SmoothStreaming adaptive streaming.

Basic playback function, schedule control.

npm.io

Full screen playback.

npm.io

Fade out animation.

npm.io

Installation

React-native-ivideo uses react-native-video, react-native-orientation, and react-native-linear-gradient. You need to install these dependencies yourself.

installation:

yarn add react-native-ivideo

link:

react-native link react-native-video
react-native link react-native-orientation
react-native link react-native-linear-gradient

modify the code in android/build.gradle:

allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
            url 'https://maven.google.com'
        }
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

Usage

import IVideo from 'react-native-ivideo';

<IVideo
    source={{ uri: url }}
    title='title'
    showFullscreenIcon={true}
    width='100%'
    height={240}
    actions={[{
        text: 'select 1',
        onPress: () => { },
    }, {
        text: 'select 2',
        onPress: () => { },
    }]}
/>

Example

Please check example code.

Props

name	type	default	description
width	number、string	100%	video width, @required.
height	number、string	240	video height, @required.
source	object	null	video data source, @required.
toolbarDuration	number	6000	the toolbar displays the duration (ms).
toolbarSliderColor	string	#f90	the color of the toolbar slider.
title	string	''	the title displayed by the toolbar.
showFullscreenIcon	bool	false	whether to display the full screen button.
showBackIcon	bool	true	whether to display the back icon .
autoPlay	bool	false	whether to automatically start playback after the video initialization is completed.
actions	array	{ text, onPress }	Functional group.
gradientColor	array	'rgba(1, 1, 1, 0.45)', 'rgba(1, 1, 1, 0.24)', 'rgba(1, 1, 1, 0.45)'	Gradient color of the occlusion layer.

Map to the properties of react-native-video:

name	type	default	description
progressUpdateInterval	number	500	The call time difference of onProgress (ms).
playInBackground	bool	false	whether the video is playing in the background.
muted	bool	false	whether it is muted.
rate	number	1.0	the rate at which the video plays.
repeat	bool	false	whether to repeat the loop playback.
resizeMode	string	'cover'	how the video fills the container.
useTextureView	bool	false	whether to use useTextureView.
volume	number	1.0	The sound size of the video.
seek	number	0	The location where the playback starts.

event:

name	type	default	description
onProgress	function	d => d	video playback progress event.
onBuffer	function	d => d	fires when the video is cached.
onLoadStart	function	e => e	fires when the video is loadedstart.
onLoad	function	d => d	fires when the video is loaded.
onFullscreen	function	e => e	fires when the video enters full screen.
onCancelFullscreen	function	e => e	fires when the video exits full screen.
onPlay	function	e => e	fires when the video plays.
onPause	function	e => e	fires when the video is paused.
onEnd	function	e => e	fires when the video ends.
onError	function	e => e	fires when an error occurs in video playback/loading.
onBack	function	e => e	Triggered when clicked back.