npm 包 react-native-fullscreen-video-player 使用教程

前言

在移动端应用程序开发中，视频的播放是非常常见的需求。本文将介绍一个用于 React Native 开发的全屏视频播放组件 react-native-fullscreen-video-player，对于 React Native 开发者来说是一个非常有用的工具库。

1. 安装

使用如下命令来安装：

npm install react-native-fullscreen-video-player --save

或者使用 yarn 安装：

yarn add react-native-fullscreen-video-player

2. 使用方法

在需要使用该组件的文件中，导入后即可使用：

-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------------------- ---- ---------------------------------------

------ ------- ----- --- ------- --------- -
  -------- -
    ------ -
      ----------------------
        -------- ---- --------------------------------------------------- --
        -----------------
        -----------------
        ----------------------
        ---------------
      --
    --
  -
-

3. 参数

我们将会介绍一下该组件的参数：

3.1 video

视频地址，可以是一个 URL 或者一个本地文件路径，例如：

<FullscreenVideoPlayer
  // 网络 URL
  video={{ uri: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' }}
  // 本地路径
  // video={require('./video.mp4')}
/>

3.2 videoWidth & videoHeight

视频的宽度和高度，使用该参数可以避免在视频加载前出现尺寸不正确的问题。

<FullscreenVideoPlayer
  video={{ uri: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' }}
  videoWidth={1280}
  videoHeight={720}
/>

3.3 resizeMode

设置视频的缩放模式，有以下三种值可选：'stretch'、'cover'、'contain'。

<FullscreenVideoPlayer
  video={{ uri: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' }}
  resizeMode={'cover'}
/>

3.4 duration

指定视频的时长，单位为毫秒（ms）。

<FullscreenVideoPlayer
  video={{ uri: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' }}
  duration={4000}
/>

4. 事件

该组件也提供了一些事件以供使用者使用，这些事件包括：

4.1 onLoad

当视频加载完毕时触发该事件。

<FullscreenVideoPlayer
  video={{ uri: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' }}
  onLoad={(event) => {
    console.log('视频已加载完毕。');
  }}
/>

4.2 onProgress

当视频播放时触发该事件，可以用作及时更新当前播放进度等场景。

<FullscreenVideoPlayer
  video={{ uri: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' }}
  onProgress={(event) => {
    console.log('当前播放进度为：', event.currentTime);
  }}
/>

5. 结语

本文介绍了 npm 包 react-native-fullscreen-video-player 的使用方法和一些常用的参数和事件，希望可以对 React Native 开发者有所帮助，有效提高开发效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005731581e8991b448e9429