0.1.0 • Published 6 years ago

@cellc/react-native-video-suite v0.1.0

Weekly downloads
1
License
MIT
Repository
bitbucket
Last release
6 years ago

react-native-media-kit

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

Supported media types:

  • iOS: Should be same as those supported by AVPlayer
  • Android: Shold be same as those supported by ExoPlayer

npm.io.

Install

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

iOS

  • Step 1: Right click on Libraries and choose 'Add files to "Project Name"'.
  • Step 2: Navigate to project_name/node_modules/react-native-media-kit/ios/ and add the file react-native-media-kit.xcodeproj.
  • Step 3: Open project settings and at the top choose 'Build Phases'
  • Step 4: Expand the 'Link Binary With Libraries' section.
  • Step 5: Click the + at the bottom of the list
  • Step 6: Add the libreact-native-media-kit.a file

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
keyvalueiOSAndroid
srcthe URL of the videoOKOK
autoplaytrue to automatically begins to play. Default is false.OKOK
preloadcan be 'none', 'auto'. Default is 'none'.OKOK
looptrue to automatically seek back to the start upon reaching the end of the video. Default is 'false'.OKOK
controlstrue to show controls to allow user to control video playback, including seeking, and pause/resume playback. Default is true.OKOK
posteran image URL indicating a poster frame to show until the user plays.OKOK
mutedtrue to silence the audio. Default is false.OKOK
onPlayerPausedOKOK
onPlayerPlayingOKOK
onPlayerFinishedOKOK
onPlayerBufferingOKOK
onPlayerBufferOKOKOK
onPlayerProgressOKOK
onPlayerBufferChangeOKOK
  • pause
  • play
  • stop
  • seekTo

For details about the usage of above APIs, check library/media-player-view.js.

TODO

  • Downloading
  • DRM
  • Google Play
  • Air Play