react native中的video组件,现在仅支持android端,可以显示视频
npm install --save react-native-videoview
react-native link react-native-videoview
如果上面自动link没起作用,那么请手动配置:
- in
android/app/build.gradle
:
dependencies {
...
compile "com.facebook.react:react-native:+" // From node_modules
+ compile project(':react-native-videoview')
}
- in
android/settings.gradle
:
...
include ':app'
+ include ':react-native-videoview'
+ project(':react-native-videoview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-videoview/android')
- in
MainApplication.java
:
+ import com.video.module.VideoViewPackage;
public class MainApplication extends Application implements ReactApplication {
//......
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
+ new VideoViewPackage(),
);
}
......
}
##Usage ###基本用法
import { VideoView } from 'react-native-videoview'
<VideoView
ref={(video) => { this.video = video }}
style={{ height: 250, width: 380 }}
source={
{
url: 'https://your url',
headers: {
'refer': 'myRefer'
}
}
}
onPrepared={this._onPrepared}
onCompletion={() => {
console.log("JS onCompletion");
}}
onError={(e) => {
console.log("what=" + e.what + " extra=" + e.extra);
}}
onBufferUpdate={(buffer) => {
console.log("JS buffer = " + buffer);
}}
onProgress={(progress) => {
console.log("JS progress = " + progress);
this.setState({
time: progress
});
}}
/>
###视频事件监听
//视频预加载
_onPrepared(duration) {//毫秒
console.log("JS duration = " + duration);
this.setState({
totalTime: duration,
});
}
//视频暂停
_onPressPause() {
this.video.pause();
}
//视频开始
_onPressStart() {
this.video.start();
}
//视频快进
_onPressSeekTo() {
var millSecond = this.state.time + 1000;
this.video.seekTo(millSecond);
}
//视图
TouchableOpacity style={{ marginLeft: 10 }} onPress={this._onPressPause.bind(this)}>
<Text>暂停</Text>
</TouchableOpacity>
<TouchableOpacity style={{ marginLeft: 10 }} onPress={this._onPressStart.bind(this)}>
<Text>开始</Text>
</TouchableOpacity>
<TouchableOpacity style={{ marginLeft: 10 }} onPress={this._onPressSeekTo.bind(this)}>
<Text>快进</Text>
</TouchableOpacity>
以上是所有用法,暂时基本用处可以满足 ##keywords
###react-native video videoview