如何在 React Native 中播放视频

简介

在 React Native 中，可以使用 react-native-video 库来实现视频的播放和控制。这个库是对 iOS 和 Android 的视频播放器的简单封装。

安装

使用 npm 安装 react-native-video 库：

npm install react-native-video --save

使用

使用 react-native-video 时，需要先引入组件：

import Video from 'react-native-video';

然后在 render 函数中加入 <Video> 组件，并设置相应的属性：

<Video source={{ uri: 'http://example.com/video.mp4' }} // 视频源
       ref={(ref) => this.player = ref} // 控制器
       muted={false} // 是否静音
       paused={false} // 是否暂停
       resizeMode='contain' // 视频缩放模式
       repeat={true} // 是否循环播放
       playInBackground={false} // 是否允许在后台播放
       playWhenInactive={false} // 是否允许在不活跃状态下播放
       style={styles.backgroundVideo} />

以上代码中的 styles.backgroundVideo 是通过 StyleSheet.create 创建的样式表。

控制

可以使用 react-native-video 提供的函数来控制视频的播放和暂停：

this.player.pause(); // 暂停视频
this.player.start(); // 开始播放
this.player.seek(0); // 从指定时间开始播放（单位：秒）

事件监听

使用 react-native-video，可以监听到视频播放的事件，例如：

<Video source={{ uri: 'http://example.com/video.mp4' }}
       onBuffer={this.onBuffer} // 视频缓冲事件
       onError={this.videoError} // 视频加载失败事件
       onEnd={this.onEnd} // 视频播放结束事件
       onLoad={this.onLoad} // 视频加载完成事件
       onProgress={this.onProgress} // 视频播放进度事件
       ref={(ref) => this.player = ref} // 控制器
       style={styles.backgroundVideo} />

以上代码中的 this.onBuffer、this.videoError、this.onEnd、this.onLoad、this.onProgress 都是自定义的方法。

支持的视频格式

react-native-video 支持多种视频格式，包括：

• H.264（.mp4、.m4v）
• VP9（.webm）
• AV1（.webm）
• MP3（.mp3）
• AAC（.aac, .m4a）

总结

react-native-video 是一个简单易用的视频播放库，可以用于 React Native 应用的开发。通过它可以方便地实现视频的播放、暂停和控制，也可以监听视频的播放事件。