神刀安全网

React Native开源VLC多媒体播放器组件

尊重版权,转载请注明出处

本文来自:江清清的技术专栏-翻译组(http://www.lcode.org)

翻译计划项目: https://github.com/jiangqqlmj/js-coach-cn

开源项目地址: https://github.com/ghondar/react-native-vlc-player

项目介绍

该组件进行封装VLC多媒体播放器组件,不过当前只是支持Android平台

刚创建的React Native技术交流3群( 496508742 )欢迎各位大牛,React Native技术爱好者加入交流!

配置安装

1.Android平台配置

命令行运行组件:npm i react-native-vlc-player –save

配置VLC库

首先 点击这边下载libvlc.arr库

然后把libvlc.arr库添加到node_modules/react-native-vlc-player/android/vlc文件夹中

在android/settings.gradle文件添加如下库依赖

... include ':react-native-vlc-player' project(':react-native-vlc-player').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vlc-player/android/vlc')

修改android/app/build.gradle文件

... dependencies {     ...     compile project(':react-native-vlc-player') }

在MainActivity.java中注册模块

import com.ghondar.vlcplayer.*;  // <--- import  @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         mReactRootView = new ReactRootView(this);          mReactInstanceManager = ReactInstanceManager.builder()                 .setApplication(getApplication())                 .setBundleAssetName("index.android.bundle")                 .setJSMainModuleName("index.android")                 .addPackage(new VLCPlayerPackage())  // <------- here                 .addPackage(new MainReactPackage())                 .setUseDeveloperSupport(BuildConfig.DEBUG)                 .setInitialLifecycleState(LifecycleState.RESUMED)                 .build();          mReactRootView.startReactApplication(mReactInstanceManager, "doubanbook", null);          setContentView(mReactRootView);     }

使用方法

import React, { Component, View, Text, TouchableHighlight } from 'react-native'  import { play } from './lib/VLCPlayer'  class Example extends Component {   constructor(props, context) {     super(props, context)   }    onStart() {     play('/storage/emulated/0/video.mp4')   }    render() {      return (       <View style={styles.container}>          <TouchableHighlight           onPress={this.onStart}>             <Text >Play Video!</Text>         </TouchableHighlight>        </View>     )   } }  export default Example

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » React Native开源VLC多媒体播放器组件

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮