在 React Native 应用程序中使用本地和基于 URL 的视频
照片由多诺万·席尔瓦在Unsplash上提供
开始
你需要做的第一件事是在系统的任何位置创建一个文件夹（我喜欢使用下载或桌面文件夹），创建一个名为 的文件夹 rnvideoproject 。
完成此操作后，打开终端/命令提示符并导航到你刚创建完的文件夹。完成此操作后，输入命令 react-native init rnvideoproject 。
这将开始创建 React Native 项目和所有必要的文件/文件夹。完成后（可能需要几分钟）在你喜欢的代码编辑器中打开该文件夹。我总是使用Visual Studio Code。完成此操作后，在 Visual Studio Code 中打开终端并确保你位于文件夹的根目录位置。确定之后，输入以下命令。
react native run ios
随即会打开一个模拟 iOS 手机，它将展示我们的 React Native 项目。
接下来要安装包 react-native-video。
npm install --save react-native-video
react-native-video 基本上是一个允许在 React Native 中显示/使用视频组件的包。它提供了各种功能，例如能够将视频静音、仅播放音频而不播放视频，以及在屏幕前显示通知时暂停或播放视频。
下一步是在代码编辑器终端中运行以下命令：
cd ios && pod install
这将为 react-native-video 包安装必要的 pod 依赖项。
下一步，打开文件 App.js 并将 const 或 class APP替换为以下内容。
ass App extends React.Component{
render(){
return(
<View style={{alignItems: 'center',flex:1,justifyContent: 'center'}}>
<Text>My video project!</Text>
</View>
)
}
}
现在你的APP看起来应如下所示：
远程视频地址
下一步是从 react-native-video 包中导入视频组件。为此，在 App.js 文件中导入其余组件的位置输入以下代码：
import Video from ‘react-native-video’
对于视频组件，有一些非常重要的属性。以下是在 React Native 模拟器上正确显示的视频组件示例。
ideo
source={{ uri: 'https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4?_=1' }}
style={{ width: 300, height: 300 }}
controls={true}
ref={(ref) => {
this.player = ref
}} />
因此，我们已将该 source 属性设置为与来自网站（一个非常可爱的动画兔子，如果我可以这样说的话）的示例 mp4 文件同等。
我们将视频组件的宽度和高度各设置为 300。
该 controls 属性是 true ，这意味着，如果发起暂停和全屏幕视频的控制，这都是对用户可见的。默认情况下，这是 true . 如果我们将该属性设置为 false ，则不会向用户显示控件。
还有一个名为 audioOnly 的属性，当设置为 true 时，它只会播放音轨而不是视频轨道。但是，为了保证这种情况顺利进行，还必须设置视频组件的 poster 属性。该 poster 属性是一个字符串，表示在播放音频而视频未播放时应显示的图像。如果未设置 poster 属性， audioOnly 将起不了作用。
以下是如何使用该 audioOnly 属性的示例：
ideo
source={{ uri: 'https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4?_=1' }}
style={{ width: 300, height: 300 }}
controls={true}
audioOnly={true}
poster="https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/English_Cocker_Spaniel_4.jpg/800px-English_Cocker_Spaniel_4.jpg"
ref={(ref) => {
this.player = ref
}} />
我已经将 audioOnly 设置成 true 并将 poster 属性设置为一个可卡犬的图像。
还有一些其他很酷的属性，例如 paused 和 muted ，它们可以将设置为 true 的视频暂停或静音。
一个重要的属性是 ref ，它基本上存储了视频组件的引用，因此你可以在没有 props/state 的情况下更改视频组件。
你可以使用以下代码作为如何执行此操作的参考：
ideo
source={{ uri: 'https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4?_=1' }}
style={{ width: 300, height: 300 }}
controls={true}
ref={(ref) => {
this.player = ref
}} />
onBuffer 是在视频缓冲时运行的属性。你可以将此属性设置为在视频缓冲时向用户执行/显示某些内容的函数。例如，你可能在想要显示的远程 URL 上有一个大型视频，这可能需要一段时间来缓冲。你可以将此值传递给状态，如果 onBuffer 值为 true ，则会向用户显示加载图标。在这种情况下，这会变得很方便。
以上是如何使用 onBuffer 的示例。你只需要传入函数名称，参数将包含从 onBuffer 返回的对象，该对象包含一个 isBuffering 和一个 target 属性。
本地视频文件
下面我将展示如何使用 react-native-video 添加本地视频文件以在你的 React Native APP上显示。我们将使用以下 URL 中的 mp4 文件。
https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4
打开上面的 URL 后，单击视频右侧的三个点，然后单击下载。
下载文件后，将视频复制到项目文件夹的根目录。你现在需要创建一个变量，这需要 render 方法中的 mp4 文件。
从上面可以看出，我们将文件命名为 earth.mp4 并将Video 组件的源设置为等于变量 earthVideo 。现在视频看起来具体如下，而没有显示动画兔子。
文章有些简短，但我只想了解使用 Video 组件的基础知识和一些最重要的属性。尽管如此，仍然有大量其他非常有用的属性/事件，我将在下面注明供大家参考。
pictureInPicture ( true / false )— 这决定了视频是否应该作为画中画播放。（根据文档的建议，这仅适用于 iOS。）
playWhenInactive ( true / false )——这决定了当通知中心在视频前面时是否播放视频。（根据文档建议，这仅适用于 iOS。）
rate — (0.0–1.0)视频播放速度。（0.0 暂停视频，1.0 以正常速度播放视频）。所有平台。
source — 要播放的媒 体来源。这可以来自本地文件、远程 URL 或 SD 卡中的文件。所有平台。
onLoad — 当媒体可以播放时运行的事件属性/回调函数。
onEnd — 媒体 播放结束时运行的回调函数。
react-native-video 是一个很棒的包，它有大量的属性、回调函数以及这些回调函数的属性，如果你想在你的 React 中使用视频，这绝对是一个可以检查和使用（和支持）的包本机APP。
我希望这篇文章能对你有所帮助。
原文作者 Alex
原文链接https://betterprogramming.pub/add-video-to-your-react-native-app-using-react-native-video-f020e90059de
