介绍
React-Native-Awesome-Media 是一款基于 React Native 的多媒体播放器组件，支持音频和视频播放、雪碧图和字幕等功能。该组件开源、免费，并且支持 Android 和 iOS 平台。React-Native-Awesome-Media 组件的开发者对其进行了持续更新和维护，可以放心使用。
安装
使用 React-Native-Awesome-Media 组件，需要先按照以下步骤在项目中安装：
- 使用 npm 安装依赖：
npm install react-native-awesome-media --save - 执行
react-native link react-native-awesome-media连接原生库 - 导入组件：
import {AudioPlayer, VideoPlayer} from "react-native-awesome-media"
使用
AudioPlayer
AudioPlayer 是针对音频播放而设计的组件。下面是 AudioPlayer 中常用的属性：
| 属性 | 类型 | 说明 |
|---|---|---|
| source | string | 音频的资源路径。 |
| playInBackground | boolean | 是否在后台播放。 |
| onEnd | function | 当音频播放完成时，执行的函数。 |
| onLoad | function | 当音频加载完成时，执行的函数。 |
| paused | boolean | 控制音频是否暂停，可由父组件控制。 |
| repeat | boolean | 是否循环播放。 |
| volume | number | 控制音频的音量，取值范围为0.0到1.0。 |
| controls | object / false | 是否显示默认的播放控制栏。可以传入一个对象来个性化播放控制栏。当值为 false 时不显示播放控制栏。 |
| duration | number | 音频的总时长，单位为秒。 |
| currentTime | number | 当前播放位置的时间，单位为秒。 |
| seekToTime | number | 跳转到指定时间的播放位置。 |
下面是一个关于 AudioPlayer 的示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ------ - ---- ---------------
------ ------------- ---- -----------------------------
----- ----------- ------- --------- -
------------------ -
-------------
---------- - -
------- -----
------------ --
--------- --
--
-
-------- -
------ -
----- ------------- ----
------------
----------------------------------------
--------------------------
---------------
------------
-------- ------ -- --------------- --------- ------------- -- -
------- -- -- --------------- ------- ---- -- -
------------------------------------
------------------------------
--
------- ------------------------ - ---- - ----- ----------- -- --------------- ------- ------------------ -----
------- ------------- ----------- -- --------------- ------------ ------------------- - - -----
-------
--
-
-VideoPlayer
VideoPlayer 是针对视频播放而设计的组件。下面是 VideoPlayer 中常用的属性：
| 属性 | 类型 | 说明 |
|---|---|---|
| source | object | 视频的资源路径，需要包含 uri 字段。 |
| playInBackground | boolean | 是否在后台播放。 |
| onEnd | function | 当视频播放完成时，执行的函数。 |
| onLoad | function | 当视频加载完成时，执行的函数。 |
| paused | boolean | 控制视频是否暂停，可由父组件控制。 |
| repeat | boolean | 是否循环播放。 |
| volume | number | 控制视频的音量，取值范围为0.0到1.0。 |
| resizeMode | string | 视频的缩放模式。支持 contain、cover 和 stretch。 |
| controls | object / false | 是否显示默认的播放控制栏。可以传入一个对象来个性化播放控制栏。当值为 false 时不显示播放控制栏。 |
| duration | number | 视频的总时间，单位为秒。 |
| currentTime | number | 当前播放位置的时间，单位为秒。 |
| seekToTime | number | 跳转到指定时间的播放位置。 |
下面是一个关于 VideoPlayer 的示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ------ - ---- ---------------
------ ------------- ---- -----------------------------
----- ----------- ------- --------- -
------------------ -
-------------
---------- - -
------- -----
------------ --
--------- --
--
-
-------- -
------ -
----- ------------- ----
------------
--------- ---- ---------------------------------- --
--------------------------
---------------
------------
--------------------
-------- ------ -- --------------- --------- ------------- -- -
------- -- -- --------------- ------- ---- -- -
------------------------------------
------------------------------
--
------- ------------------------ - ---- - ----- ----------- -- --------------- ------- ------------------ -----
------- ------------- ----------- -- --------------- ------------ ------------------- - - -----
-------
--
-
-总结
本文介绍了 React-Native-Awesome-Media 组件的安装和使用方法，包括 AudioPlayer 和 VideoPlayer 两个组件的属性和示例代码。使用 React-Native-Awesome-Media 组件可以非常方便地实现音频和视频播放功能，帮助开发者更快地搭建应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b6151ab1864dac672e1