Skip to content

Video(and audio) component for react-native apps, supporting both iOS and Android. A unified and elegant player controller is provided by default. The API is similar with HTML video.

Notifications You must be signed in to change notification settings

ldn0x7dc/react-native-media-kit

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

71 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-media-kit

Video(and audio) component for react-native apps, supporting both iOS and Android, with API similar to HTML video.

A default set of controls is provided to play/pause, seek and to display current playback and buffer progress.

Runs on react-native 0.28+ (The limit exists due to ActivityIndicator comes after 0.28).

Supported media types:

  • iOS: Should be same as those supported by AVPlayer

  • Android: Shold be same as those supported by ExoPlayer

.

Install

npm install --save react-native-media-kit@latest

iOS

For now, just drag react-native-media-kit.xcodeproj into your Xcode project and link the libreact-native-media-kit.a library.

Android

android/settings.gradle

include ':react-native-media-kit'
project(':react-native-media-kit').projectDir = new File('../node_modules/react-native-media-kit/android')

android/app/build.gradle

dependencies {
    ...
    compile project(':react-native-media-kit')
}

MainActivity.java (or MainApplication on rn 0.29+)

import com.greatdroid.reactnative.media.MediaKitPackage;
...
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
            new MediaKitPackage()
    );
}

Documentation

import {Video} from 'react-native-media-kit';
...
render() {
  return (
  	<Video
      style={{width: width, height: width / (16/9)}}
      src={'http://v.yoai.com/femme_tampon_tutorial.mp4'}
      autoplay={false}
      preload={'none'}
      loop={false}
      controls={true}
      muted={false}
      poster={'http://static.yoaicdn.com/shoppc/images/cover_img_e1e9e6b.jpg'}
    />
  );
}

API

The API is designed to mimics html <video />. (For now, the Video and Audio component are identical)

Properties
key value iOS Android
src the URL of the video OK OK
autoplay true to automatically begins to play. Default is false. OK OK
preload can be 'none', 'auto'. Default is 'none'. OK OK
loop true to automatically seek back to the start upon reaching the end of the video. Default is 'false'. OK OK
controls true to show controls to allow user to control video playback, including seeking, and pause/resume playback. Default is true. OK OK
poster an image URL indicating a poster frame to show until the user plays. OK OK
muted true to silence the audio. Default is false. OK OK
onPlayerPaused OK OK
onPlayerPlaying OK OK
onPlayerFinished OK OK
onPlayerBuffering OK OK
onPlayerBufferOK OK OK
onPlayerProgress OK OK
onPlayerBufferChange OK OK
  • pause
  • play
  • stop
  • seekTo

For details about the usage of above APIs, check library/MediaPlayerView.js.

TODO

  • background play

About

Video(and audio) component for react-native apps, supporting both iOS and Android. A unified and elegant player controller is provided by default. The API is similar with HTML video.

Resources

Stars

Watchers

Forks

Packages

No packages published