kandi background
Explore Kits

react-native-video | A Video / component for reactnative | Video Utils library

 by   react-native-community Java Version: 5.0.0 License: MIT

 by   react-native-community Java Version: 5.0.0 License: MIT

Download this library from

kandi X-RAY | react-native-video Summary

react-native-video is a Java library typically used in Video, Video Utils, React Native applications. react-native-video has no bugs, it has no vulnerabilities, it has a Permissive License and it has high support. However react-native-video build file is not available. You can install using 'npm i react-native-web-video' or download it from GitHub, npm.
A
Support
Support
Quality
Quality
Security
Security
License
License
Reuse
Reuse

kandi-support Support

  • react-native-video has a highly active ecosystem.
  • It has 5210 star(s) with 1871 fork(s). There are 98 watchers for this library.
  • It had no major release in the last 12 months.
  • There are 809 open issues and 847 have been closed. On average issues are closed in 132 days. There are 71 open pull requests and 0 closed requests.
  • It has a negative sentiment in the developer community.
  • The latest version of react-native-video is 5.0.0
react-native-video Support
Best in #Video Utils
Average in #Video Utils
react-native-video Support
Best in #Video Utils
Average in #Video Utils

quality kandi Quality

  • react-native-video has 0 bugs and 0 code smells.
react-native-video Quality
Best in #Video Utils
Average in #Video Utils
react-native-video Quality
Best in #Video Utils
Average in #Video Utils

securitySecurity

  • react-native-video has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
  • react-native-video code analysis shows 0 unresolved vulnerabilities.
  • There are 0 security hotspots that need review.
react-native-video Security
Best in #Video Utils
Average in #Video Utils
react-native-video Security
Best in #Video Utils
Average in #Video Utils

license License

  • react-native-video is licensed under the MIT License. This license is Permissive.
  • Permissive licenses have the least restrictions, and you can use them in most projects.
react-native-video License
Best in #Video Utils
Average in #Video Utils
react-native-video License
Best in #Video Utils
Average in #Video Utils

buildReuse

  • react-native-video releases are available to install and integrate.
  • Deployable package is available in npm.
  • react-native-video has no build file. You will be need to create the build yourself to build the component from source.
  • Installation instructions, examples and code snippets are available.
  • It has 3547 lines of code, 282 functions and 71 files.
  • It has high code complexity. Code complexity directly impacts maintainability of the code.
react-native-video Reuse
Best in #Video Utils
Average in #Video Utils
react-native-video Reuse
Best in #Video Utils
Average in #Video Utils
Top functions reviewed by kandi - BETA

Coming Soon for all Libraries!

Currently covering the most popular Java, JavaScript and Python libraries. See a SAMPLE HERE.
kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.

react-native-video Key Features

Version 5 introduces breaking changes on Android, please check carefully the steps described there: Android Installation.

Installation

copy iconCopydownload iconDownload
npm install --save react-native-video

iOS installation

copy iconCopydownload iconDownload
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
+  `pod 'react-native-video', :path => '../node_modules/react-native-video/react-native-video.podspec'`
end

Android installation

copy iconCopydownload iconDownload
include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')

react-native-dom installation

copy iconCopydownload iconDownload
import { RNDomInstance } from "react-native-dom";
import { name as appName } from "../app.json";
import RCTVideoManager from 'react-native-video/dom/RCTVideoManager'; // Add this

// Path to RN Bundle Entrypoint ================================================
const rnBundlePath = "./entry.bundle?platform=dom&dev=true";

// React Native DOM Runtime Options =============================================
const ReactNativeDomOptions = {
  enableHotReload: false,
  nativeModules: [RCTVideoManager] // Add this
};

Usage

copy iconCopydownload iconDownload
// Load the module

import Video from 'react-native-video';

// Within your render function, assuming you have a file called
// "background.mp4" in your project. You can include multiple videos
// on a single screen if you like.

<Video source={{uri: "background"}}   // Can be a URL or a local file.
       ref={(ref) => {
         this.player = ref
       }}                                      // Store reference
       onBuffer={this.onBuffer}                // Callback when remote video is buffering
       onError={this.videoError}               // Callback when video cannot be loaded
       style={styles.backgroundVideo} />

// Later on in your styles..
var styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

Configurable props

copy iconCopydownload iconDownload
bufferConfig={{
  minBufferMs: 15000,
  maxBufferMs: 50000,
  bufferForPlaybackMs: 2500,
  bufferForPlaybackAfterRebufferMs: 5000
}}

DRM

copy iconCopydownload iconDownload
source={{
  uri: "https://www.example.com/video.mp4",
  headers: {
    Authorization: 'bearer some-token-value',
    'X-Custom-Header': 'some value'
  }
}}

rate

copy iconCopydownload iconDownload
selectedAudioTrack={{
  type: Type,
  value: Value
}}

Event props

copy iconCopydownload iconDownload
{
  bitrate: 1000000
}

Methods

copy iconCopydownload iconDownload
return (
  <Video source={...}
    ref={ref => (this.player = ref)} />
);

Audio Mixing

copy iconCopydownload iconDownload
#import <AVFoundation/AVFoundation.h>  // import

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryAmbient error:nil];  // allow
  ...
}

Android Expansion File Usage

copy iconCopydownload iconDownload
zip -r -n .mp4 *.mp4 player.video.example.com

Load files with the RN Asset System

copy iconCopydownload iconDownload
<Video
  source={require('../assets/video/turntable.mp4')}
/>

Examples

copy iconCopydownload iconDownload
git clone git@github.com:react-native-community/react-native-video.git
cd react-native-video/example
npm install
open ios/VideoPlayer.xcodeproj

Version 5.0.0

copy iconCopydownload iconDownload
- distributionUrl=https\://services.gradle.org/distributions/gradle-3.3-all.zip
+ distributionUrl=https\://services.gradle.org/distributions/gradle-5.1.1-all.zip

Version 4.0.0

copy iconCopydownload iconDownload
android {
   ... // Various other settings go here
   compileOptions {
     targetCompatibility JavaVersion.VERSION_1_8
   }
}

Version 3.0.0

copy iconCopydownload iconDownload
// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ... // Various other settings go here
}

allprojects {
    ... // Various other settings go here

    project.ext {
        compileSdkVersion = 23
        buildToolsVersion = "23.0.1"

        minSdkVersion = 16
        targetSdkVersion = 22
    }
}

undefined is not an object (evaluating 'this.onbuffer') React Native

copy iconCopydownload iconDownload
constructor(props) {
    super(props);
    this.onBuffer= this.onBuffer.bind(this);
  }

Execution failed for task ':app:mergeDebugAssets'. React Native

copy iconCopydownload iconDownload
allprojects {
    repositories {
        .... # Keep the rest
        jcenter() {
            content {
                includeModule("com.yqritc", "android-scalablevideoview")
            }
        }
    }
}

Could not find com.yqritc:android-scalablevideoview:1.0.4 react-native-video in Android

copy iconCopydownload iconDownload
allprojects {
    repositories {
        .... # rest of your code
        jcenter() {
            content {
                includeModule("com.yqritc", "android-scalablevideoview")
            }
        }
    }
}
-----------------------
allprojects {
        repositories {
            ...
            maven { url 'https://www.jitpack.io' }
        }
    }

Error when trying to run my React Native app on Android

copy iconCopydownload iconDownload
allprojects {
    repositories {
        mavenCentral()
        mavenLocal()
        jcenter()
}
-----------------------
allprojects {
    repositories {
        .... # Keep the rest
        jcenter() {
            content {
                includeModule("com.yqritc", "android-scalablevideoview")
            }
        }
    }
}
-----------------------
allprojects {
    repositories {
        .... # Keep the rest
        jcenter() {
            content {
                includeModule("com.yqritc", "android-scalablevideoview")
            }
        }
    }
}

react-native-video-player not orienting when screen is rotated or full screen is clicked

copy iconCopydownload iconDownload
import Orientation from 'react-native-orientation-locker';
...
Orientation.lockToLandscape();
-----------------------
import Orientation from 'react-native-orientation-locker';
const [fullScreen, setFullScreen] = useState(false);
const FullScreen = () => {
        if(fullScreen){
            Orientation.lockToPortrait();
        } else{
            Orientation.lockToLandscape();
        }
        setFullScreen(!fullScreen)
    }
<View style= {fullScreen ?  styles.fullscreenVideo : styles.video }>
                    <Video
                        fullscreen = {fullScreen}
                        ref={video}
                        source={{
                            uri:videos,
                            type:'mpd'
                        }}
                        style={{...StyleSheet.absoluteFill}}
                        
                    />
</View>
fullscreenVideo:{
        backgroundColor: 'black',
        ...StyleSheet.absoluteFill,
        elevation: 1,
                
    },
-----------------------
import Orientation from 'react-native-orientation-locker';
const [fullScreen, setFullScreen] = useState(false);
const FullScreen = () => {
        if(fullScreen){
            Orientation.lockToPortrait();
        } else{
            Orientation.lockToLandscape();
        }
        setFullScreen(!fullScreen)
    }
<View style= {fullScreen ?  styles.fullscreenVideo : styles.video }>
                    <Video
                        fullscreen = {fullScreen}
                        ref={video}
                        source={{
                            uri:videos,
                            type:'mpd'
                        }}
                        style={{...StyleSheet.absoluteFill}}
                        
                    />
</View>
fullscreenVideo:{
        backgroundColor: 'black',
        ...StyleSheet.absoluteFill,
        elevation: 1,
                
    },
-----------------------
import Orientation from 'react-native-orientation-locker';
const [fullScreen, setFullScreen] = useState(false);
const FullScreen = () => {
        if(fullScreen){
            Orientation.lockToPortrait();
        } else{
            Orientation.lockToLandscape();
        }
        setFullScreen(!fullScreen)
    }
<View style= {fullScreen ?  styles.fullscreenVideo : styles.video }>
                    <Video
                        fullscreen = {fullScreen}
                        ref={video}
                        source={{
                            uri:videos,
                            type:'mpd'
                        }}
                        style={{...StyleSheet.absoluteFill}}
                        
                    />
</View>
fullscreenVideo:{
        backgroundColor: 'black',
        ...StyleSheet.absoluteFill,
        elevation: 1,
                
    },
-----------------------
import Orientation from 'react-native-orientation-locker';
const [fullScreen, setFullScreen] = useState(false);
const FullScreen = () => {
        if(fullScreen){
            Orientation.lockToPortrait();
        } else{
            Orientation.lockToLandscape();
        }
        setFullScreen(!fullScreen)
    }
<View style= {fullScreen ?  styles.fullscreenVideo : styles.video }>
                    <Video
                        fullscreen = {fullScreen}
                        ref={video}
                        source={{
                            uri:videos,
                            type:'mpd'
                        }}
                        style={{...StyleSheet.absoluteFill}}
                        
                    />
</View>
fullscreenVideo:{
        backgroundColor: 'black',
        ...StyleSheet.absoluteFill,
        elevation: 1,
                
    },

React Native Video selectedVideoTrack prop not working in android phones

copy iconCopydownload iconDownload
module.exports = {
    dependencies: {
        'react-native-video': {
            platforms: {
                android: {
                    sourceDir: '../node_modules/react-native-video/android-exoplayer',
                },
            },
        },
    },
    assets:['./src/assets/fonts/'],
};

Modal blocks all press events on Android (React Native .66.4)

copy iconCopydownload iconDownload
import { TouchableOpacity } from 'react-native';

React native buld failed with the following message Failed to list versions for com.facebook.react:react-native

copy iconCopydownload iconDownload
allprojects {
    repositories {
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }

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

        google()
        jcenter()
        maven { url 'https://www.jitpack.io' }
        maven { url 'https://repo1.maven.org/maven2' }
    }
}
-----------------------
allprojects {
    repositories {
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }

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

        google()
        jcenter()
        maven { url 'https://www.jitpack.io' }
        maven { url 'https://repo1.maven.org/maven2' }
    }
}

&quot;Can't perform a React state update on an unmounted component&quot; Follow by continuous &quot;TYPE ERORR: null is not an object&quot;

copy iconCopydownload iconDownload
// App.js
export default class MoleGame extends Component {
    constructor(props) {
        super(props);
        this.interval = null;
        this.timeInterval = null;
        ...
    }

    componentDidMount = () => {
        this.setupTicks(DEFAULT_STATE, this.pause);
    }

    componentWillUnmount() {
        clearInterval(this.interval);
        clearInterval(this.timeInterval);
    }
}
-----------------------
componentWillUnmount(){
        clearInterval(this.interval);
        clearInterval(this.timerInterval);
    }

react-native-video auto repeat issue on IOS

copy iconCopydownload iconDownload
<Video
      onEnd={() => {
      this._video.seek(0);
      this.setState({ pauseVideo: !this.state.pauseVideo })
      }}
      repeat={false}
      paused={this.state.pauseVideo}
      key={(item, index) => index.toString()}
      source={{ uri:"url" }}
      onBuffer={(data) => {
           if (data.isBuffering) {
             this.setState({ loading: true });
           } else {
             this.setState({ loading: false });
           }
           }}
      onLoad={() => this.setState({ loading: false })}
      onLoadStart={() => this.setState({ loading: true })}
      resizeMode="contain"
      style={{ height: "100%", width: "100%" }}/>
        [item seekToTime:kCMTimeZero];
        [self applyModifiers];
      } else {
        [self setPaused:true]; //`add this line to RCTVideo.m`
        [self removePlayerTimeObserver];
      }
    }
-----------------------
<Video
      onEnd={() => {
      this._video.seek(0);
      this.setState({ pauseVideo: !this.state.pauseVideo })
      }}
      repeat={false}
      paused={this.state.pauseVideo}
      key={(item, index) => index.toString()}
      source={{ uri:"url" }}
      onBuffer={(data) => {
           if (data.isBuffering) {
             this.setState({ loading: true });
           } else {
             this.setState({ loading: false });
           }
           }}
      onLoad={() => this.setState({ loading: false })}
      onLoadStart={() => this.setState({ loading: true })}
      resizeMode="contain"
      style={{ height: "100%", width: "100%" }}/>
        [item seekToTime:kCMTimeZero];
        [self applyModifiers];
      } else {
        [self setPaused:true]; //`add this line to RCTVideo.m`
        [self removePlayerTimeObserver];
      }
    }
-----------------------
if (videoRef.current) {
 videoRef.current.seek(0);
}

Community Discussions

Trending Discussions on react-native-video
  • undefined is not an object (evaluating 'this.onbuffer') React Native
  • Execution failed for task ':app:mergeDebugAssets'. React Native
  • Android react-native-video doesn't playback in m3u8 video
  • Could not find com.yqritc:android-scalablevideoview:1.0.4 react-native-video in Android
  • Error when trying to run my React Native app on Android
  • React-Native-Video controls working in iOS but not android? (Laggy state?)
  • react-native-video-player not orienting when screen is rotated or full screen is clicked
  • React Native Video selectedVideoTrack prop not working in android phones
  • Modal blocks all press events on Android (React Native .66.4)
  • React native buld failed with the following message Failed to list versions for com.facebook.react:react-native
Trending Discussions on react-native-video

QUESTION

undefined is not an object (evaluating 'this.onbuffer') React Native

Asked 2022-Mar-20 at 16:16

everyone! while trying to show a video in my react native app I face issues, the error is: "undefined is not an object (evaluating 'this.onbuffer')"

This is the code.

import * as React from 'react'; import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'; import Video from 'react-native-video'

function VideoScreen() { return (

    <Video source={{uri: "../assets/videos/maula.mp4"}}   // Can be a URL or a local file.
        ref={(ref) => {
                 this.player = ref
               }}                                      // Store reference
               onBuffer={this.onBuffer}                // Callback when remote video is buffering
               onError={this.videoError}
                      // Callback when video cannot be loaded
           style={styles.container} />

);

}

const styles = StyleSheet.create({ container: { position: 'absolute', top: 0, left: 0, bottom: 0, right: 0, }, });

export default VideoScreen;

Can someone help me?

ANSWER

Answered 2022-Mar-20 at 16:16

check if you've added this in your constructor

constructor(props) {
    super(props);
    this.onBuffer= this.onBuffer.bind(this);
  }

Source https://stackoverflow.com/questions/71548404

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install react-native-video

Then follow the instructions for your platform to link react-native-video into your project:.
Run npx pod-install. Linking is not required in React Native 0.60 and above. Run react-native link react-native-video to link the react-native-video library. Setup your Podfile like it is described in the react-native documentation.
react-native link react-native-video doesn’t work properly with the tvOS target so we need to add the library manually. First select your project in Xcode. After that, select the tvOS target of your application and select « General » tab. Scroll to « Linked Frameworks and Libraries » and tap on the + button.
Run react-native link react-native-video to link the react-native-video library.
Make the following additions to the given files manually:. Add the ReactNativeVideoCPP project to your solution.
Open the solution in Visual Studio 2019
Right-click Solution icon in Solution Explorer > Add > Existing Project Select node_modules\react-native-video\windows\ReactNativeVideoCPP\ReactNativeVideoCPP.vcxproj
Right-click main application project > Add > Reference... Check ReactNativeVideoCPP from Solution Projects.
Modify files below to add the video package providers to your main application project
Make the following additions to the given files manually:.

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

DOWNLOAD this Library from

Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

Explore Related Topics

Share this Page

share link
Consider Popular Video Utils Libraries
Compare Video Utils Libraries with Highest Support
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

  • © 2022 Open Weaver Inc.