rnv

react-native-vlcplayer

react-native wrapper the vlcplayer

Showing:

Popularity

Downloads/wk

5

GitHub Stars

82

Maintenance

Last Commit

5yrs ago

Contributors

2

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-native-vlcplayer

A <VLCPlayer> component for react-native
此项目 参考react-native-video,但是有很多mp4 ios的硬解码无法播放,所以诞生了这个项目,这是一个足够简单的封装,全功能播放器的控制条留给自己去实现,同时可以参考移动播放器的例子。

VLCPlayer 支持各种格式(mp4,m3u8,flv,mov,rtsp,rtmp,etc.),具体参看vlc wiki

播放器例子 全屏模式

Add it to your project

Run npm install react-native-vlcplayer --save

iOS

  • Install rnpm and run rnpm link react-native-vlcplayer

  • 安装MobileVLCKit.framework,在nightlies.videolan.org/build/ios/ 下载最新版,解压后在你的工程里面引入MobileVLCKit.framework,并且添加 framework search path

Usage

这是一个极其简单的VLC播放器,默认是不带控制条和进度条,但是完全可以通过回调实现自己需要的样式的播放器,参看例子Examples vlcplayer,包括一个简单播放器和一个全功能播放器。

<VLCPlayer
    ref='vlcplayer'
    paused={this.state.paused}  //通过paused设置player play or pause的状态
    style={styles.vlcplayer}
    source={{uri:this.props.uri,initOptions:['--codec=avcodec']}} 
    onProgress={this.onProgress.bind(this)} //进度回调
    onEnded={this.onEnded.bind(this)} //结束回调,一般使用stopped即可
    onStopped={this.onEnded.bind(this)} //停止回调
    onPlaying={this.onPlaying.bind(this)} //开始播放回调
    onBuffering={this.onBuffering.bind(this)} //正在缓冲回调
    onPaused={this.onPaused.bind(this)} //暂停回调
 />
 

//source.uri,可以是vlc支持的串流,或者普通的url,source.initOptions VLC支持的初始化选项 ,See vlc 命令行参数

FullScreen

需要用到 npm install react-native-orientation --save ,工程配置参看https://github.com/yamill/react-native-orientation
具体使用方法,参看vlcplayer/Video.js

Static Methods

seek(seconds)

this.refs['vlcplayer'].seek(0.333); //单位是 0~1 的百分比

snapshot(path)

this.refs['vlcplayer'].snapshot(path); //保存截图

Examples

可以根据自己的情况使用下面的例子,自己DIY播放器

  • <SimpleVideo /> 一个简单的播放器
  • <Video /> 一个全功能的播放器
import React, { Component } from 'react';
import {
 AppRegistry,
 View,
 Text
} from 'react-native';
import SimpleVideo  from './SimpleVideo.js';
import Video  from './Video.js';



class vlcplayer extends Component {

  render() {
    const uri = 'http://cdn.goluk.cn/video/t1_2.mp4';
    return (
      <View>
      <SimpleVideo uri={uri} buttonSize={50} />
      <Text>A Simple Player</Text>
      <View style={{marginTop:50}} />
      <Video uri={uri} />
      <Text>A full-featured player</Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('vlcplayer', () => vlcplayer);

TODOS

  • Add support for Android
  • Add support for snapshot
  • Add support for record
  • Add support for A full-featured player

加入ReactNative讨论组

###QQ群:316434159 ### 扫描加入


MIT Licensed

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100