React Native VLC Player 使用教程

最新推荐文章于 2025-03-27 17:10:01 发布

秋或依

最新推荐文章于 2025-03-27 17:10:01 发布

阅读量849

点赞数 18

本文链接：https://blog.csdn.net/gitblog_00035/article/details/142196183

版权

React Native VLC Player 使用教程

react-native-vlcplayer react-native wrapper the vlcplayer 项目地址: https://gitcode.com/gh_mirrors/re/react-native-vlcplayer

1. 项目介绍

react-native-vlcplayer 是一个基于 React Native 的媒体播放器组件，它封装了 VLC 播放器，支持多种视频格式和流媒体协议（如 RTSP、RTMP 等）。该项目旨在解决 React Native 中某些视频格式在 iOS 上硬解码无法播放的问题。它提供了一个简单的 <VLCPlayer> 组件，开发者可以通过回调函数实现自定义的播放器控制条和进度条。

2. 项目快速启动

安装依赖

首先，确保你已经安装了 Node.js 和 React Native CLI。然后，在你的 React Native 项目中运行以下命令来安装 react-native-vlcplayer：

npm install react-native-vlcplayer --save

iOS 配置

安装 rnpm 并链接库：

npm install rnpm -g
rnpm link react-native-vlcplayer

下载并安装 MobileVLCKit.framework：

从 nightlies.videolan.org/build/ios/ 下载最新版的 MobileVLCKit.framework，解压后将其引入到你的 Xcode 工程中，并添加 framework search path。

使用示例

以下是一个简单的使用示例，展示如何在 React Native 应用中使用 VLCPlayer 组件：

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import VLCPlayer from 'react-native-vlcplayer';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <VLCPlayer
          ref="vlcplayer"
          paused={false}
          style={styles.vlcplayer}
          source={{ uri: 'http://cdn.goluk.cn/video/t1_2.mp4', initOptions: ['--codec=avcodec'] }}
          onProgress={this.onProgress.bind(this)}
          onEnded={this.onEnded.bind(this)}
          onStopped={this.onEnded.bind(this)}
          onPlaying={this.onPlaying.bind(this)}
          onBuffering={this.onBuffering.bind(this)}
          onPaused={this.onPaused.bind(this)}
        />
      </View>
    );
  }

  onProgress(event) {
    console.log('Progress:', event);
  }

  onEnded() {
    console.log('Video ended');
  }

  onPlaying() {
    console.log('Video is playing');
  }

  onBuffering() {
    console.log('Video is buffering');
  }

  onPaused() {
    console.log('Video is paused');
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  vlcplayer: {
    width: 300,
    height: 200,
  },
});