From 06c4563bdbd7dccd90236e74c299c426f2edca8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=83=A1=E5=BA=B7?= Date: Wed, 6 Dec 2023 15:53:45 +0800 Subject: [PATCH 1/5] =?UTF-8?q?[Issues:=20#I8M3SH]=20=E6=B7=BB=E5=8A=A0rea?= =?UTF-8?q?ct-native-video=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-video.md | 324 ++++++++++++++++++++++++++++++++++++ 1 file changed, 324 insertions(+) create mode 100644 zh-cn/react-native-video.md diff --git a/zh-cn/react-native-video.md b/zh-cn/react-native-video.md new file mode 100644 index 00000000..4028250b --- /dev/null +++ b/zh-cn/react-native-video.md @@ -0,0 +1,324 @@ + + +

+

react-native-video

+

+

+ + Supported platforms + + + License + +

+ + +## 安装与使用 + +> [!tip] 目前 React-Native-OpenHarmony(RNOH) 三方库的 npm 包部署在私仓，需要通过 github token 来获取访问权限。 + +在与 `package.json` 文件相同的目录中，创建或编辑 `.npmrc` 文件以包含指定 GitHub Packages URL 和托管包的命名空间的行。 将 TOKEN 替换为 RNOH 三方库指定的 token。 + +```bash +@react-native-oh-library:registry=https://npm.pkg.github.com +//npm.pkg.github.com/:_authToken=TOKEN +``` + +进入到工程目录并输入以下命令： + + + +#### **yarn** + +```bash +yarn add react-native-video@npm:@react-native-oh-library/react-native-video +``` + +#### **npm** + +```bash +npm install react-native-video@npm:@react-native-oh-library/react-native-video +``` + + + +下面的代码展示了这个库的基本使用场景： + +```js +import React, {useState, useRef} from 'react'; +import {View, ScrollView, StyleSheet, Text,TextInput} from 'react-native'; +import RNCVideo from 'react-native-video' + +function RNCVideoDemo() { + + const [muted, setMuted] = useState(true); + const [paused, setPaused] = useState(false); + const [repeat, setRepeat] = useState(true); + const [disableFocus, setDisableFocus] = useState(false); + const [uri, setUri] = useState('https://res.vmallres.com//uomcdn/CN/cms/202210/C75C7E20060F3E909F2998E13C3ABC03.mp4'); + const [txt, setTxt] = useState('empty'); + const [resizeMode, setResizeMode] = useState('none'); + const [posterResizeMode, setPosterResizeMode] = useState('cover'); + const [seekSec, setSeekSec] = useState(5000); + + const [onVideoLoad, setOnVideoLoad] = useState("onVideoLoad"); + const [onVideoLoadStart, setOnVideoLoadStart] = useState("onVideoLoadStart"); + const [onVideoError, setOnVideoError] = useState("onVideoError"); + const [onVideoProgress, setOnVideoProgress] = useState("onVideoProgress"); + const [onVideoEnd, setOnVideoEnd] = useState("onVideoEnd"); + const [onVideoBuffer, setOnVideoBuffer] = useState("onVideoBuffer"); + const [onPlaybackStalled, setOnPlaybackStalled] = useState("onPlaybackStalled"); + const [onPlaybackResume, setOnPlaybackResume] = useState("onPlaybackResume"); + + return ( + + { + console.log(`onLoad`) + }} + onLoadStart={(e) => { + console.log(`onLoadStart`) + }} + onProgress={(e) => { + console.log(`onProgress`) + }} + onError={(e) => { + console.log(`onError`) + }} + onEnd={() => { + console.log(`onEnd`) + }} + onBuffer={(e) => { + console.log(`onBuffer`) + }} + onPlaybackStalled={() => { + console.log(`onPlaybackStalled`) + }} + onPlaybackResume={() => { + console.log(`onPlaybackResume`) + }} + onReadyForDisplay={() => { + console.log(`onReadyForDisplay`) + }} + > + ); +} +const styles = StyleSheet.create({ + video: { + width: '100%', + height: 260, + }, + }); + +export default RNCVideoDemo; +``` + +## Link + +目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` + +### 引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入 +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../rnoh", + "rnoh-video": "file:../../node_modules/react-native-video/harmony/rn_video.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../rnoh", + "rnoh-slider": "file:../../node_modules/react-native-video/harmony/rn_video" + } +``` + +打开终端，执行： + +```bash +cd entry +ohpm install --no-link +``` + +### 配置 CMakeLists 和引入 RNCVideoPackage + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") +set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: add_package_subdirectories +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULE_DIR}/rnoh-video/src/main/cpp" ./video) +# RNOH_END: add_package_subdirectories + +add_library(rnoh_app SHARED + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) + +target_link_libraries(rnoh_app PUBLIC rnoh) + +# RNOH_BEGIN: link_packages +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_video) +# RNOH_END: link_packages +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "SamplePackage.h" ++ #include "RNCVideoPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 在 ArkTs 侧引入 slider 组件 + +打开 `entry/src/main/ets/pages/index.ets`，添加： + +```diff +import { + RNApp, + ComponentBuilderContext, + RNAbility, + AnyJSBundleProvider, + MetroJSBundleProvider, + ResourceJSBundleProvider, +} from 'rnoh' +import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package" +import { createRNPackages } from '../RNPackagesFactory' ++ import { RNCVideo, RNC_VIDEO_TYPE } from "rnoh-video" + +@Builder +function CustomComponentBuilder(ctx: ComponentBuilderContext) { + if (ctx.componentName === SAMPLE_VIEW_TYPE) { + SampleView({ + ctx: ctx.rnohContext, + tag: ctx.descriptor.tag, + buildCustomComponent: CustomComponentBuilder + }) + } ++ else if (ctx.componentName === RNC_VIDEO_TYPE) { ++ RNCVideo({ ++ ctx: ctx.rnohContext, ++ tag: ctx.descriptor.tag, ++ buildCustomComponent: CustomComponentBuilder ++ }) ++ } + ... +} +... +``` + +### 运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/react-native-video Releases](https://github.com/react-native-oh-library/react-native-video/releases) + +## 属性 + +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------- | -------- | ------------ | -------- | +| `source` | Sets the media source. You can pass an asset loaded via require or an object with a uri. | object | Yes | All | yes | +| `disableFocus` | Determines whether video audio should override background music/audio in Android devices.
**false (default)** | bool | No | Android Exoplayer | yes | +| `muted` | Controls whether the audio is muted.
**false (default)** - Don't mute audio | bool | No | All | yes | +| `paused` | Controls whether the media is paused.
**false (default)** - Don't pause the media | bool | No | All | yes | +| `repeat` | Determine whether to repeat the video when the end is reached.
**false (default)** - Don't repeat the video | bool | No | All | yes | +| `resizeMode` | Determines how to resize the video when the frame doesn't match the raw video dimensions.
**"none" (default)** - Don't apply resize | string | No | Android ExoPlayer, Android MediaPlayer, iOS, Windows UWP | yes | +| `volume` | Adjust the volume.
**1.0 (default)** - Play at full volume | number | No | All | yes | +| `poster` | An image to display while the video is loading
Value: string with a URL for the poster, e.g. "" | string | No | All | yes | +| `posterResizeMode` | Determines how to resize the poster image when the frame doesn't match the raw video dimensions..
**"contain" (default)**- Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). | string | No | All | yes | + +## 事件回调 + +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ------------------- | ------------------------------------------------------------ | :------- | -------- | ------------------------------------------------ | -------- | +| `onLoad` | Callback function that is called when the media is loaded and ready to play. | function | No | All | yes | +| `onLoadStart` | Callback function that is called when the media starts loading. | function | No | All | yes | +| `onReadyForDisplay` | Callback function that is called when the first video frame is ready for display. This is when the poster is removed. | function | No | Android ExoPlayer, Android MediaPlayer, iOS, Web | yes | +| `onProgress` | Callback function that is called every progressUpdateInterval seconds with info about which position the media is currently playing. | function | No | All | yes | +| `onEnd` | Callback function that is called when the player reaches the end of the media. | function | No | All | yes | +| `onError` | Callback function that is called when the player experiences a playback error. | function | No | All | yes | +| `onBuffer` | Callback function that is called when the player buffers. | function | No | Android, iOS | yes | +| `onPlaybackStalled` | Callback function that is MediaPlayer MEDIA_INFO_BUFFERING_START | function | No | Android MediaPlayer | yes | +| `onPlaybackResume` | Callback function that is MediaPlayer MEDIA_INFO_BUFFERING_END | function | No | Android MediaPlayer | yes | + +## 静态方法 + +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| -------- | ------------------------------------------------------------ | :------- | -------- | -------- | -------- | +| `seek()` | Seek to the specified position represented by seconds. seconds is a float value. | function | No | All | yes | + +## 遗留问题 + +- [ ] source暂时只支持在线URL资源。 +- [ ] 未适配无障碍 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/callstack/react-native-slider/blob/main/LICENSE.md) ，请自由地享受和参与开源。 -- Gitee From f1b028c34e12e99913122a52ff9e65a198c74d16 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=83=A1=E5=BA=B7?= Date: Wed, 6 Dec 2023 18:07:58 +0800 Subject: [PATCH 2/5] =?UTF-8?q?[Issues:=20#I8M3SH]=20=E4=BF=AE=E6=94=B9rea?= =?UTF-8?q?ct-native-video=E6=96=87=E6=A1=A3=EF=BC=8C=E4=BD=BF=E7=94=A8?= =?UTF-8?q?=E6=A8=A1=E6=9D=BFv0.0.1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-video.md | 43 ++++++++++++++++++++++++++----------- 1 file changed, 30 insertions(+), 13 deletions(-) diff --git a/zh-cn/react-native-video.md b/zh-cn/react-native-video.md index 4028250b..a0630215 100644 --- a/zh-cn/react-native-video.md +++ b/zh-cn/react-native-video.md @@ -1,4 +1,4 @@ - +> 模板版本：v0.0.1

react-native-video

@@ -15,15 +15,6 @@ ## 安装与使用 -> [!tip] 目前 React-Native-OpenHarmony(RNOH) 三方库的 npm 包部署在私仓，需要通过 github token 来获取访问权限。 - -在与 `package.json` 文件相同的目录中，创建或编辑 `.npmrc` 文件以包含指定 GitHub Packages URL 和托管包的命名空间的行。 将 TOKEN 替换为 RNOH 三方库指定的 token。 - -```bash -@react-native-oh-library:registry=https://npm.pkg.github.com -//npm.pkg.github.com/:_authToken=TOKEN -``` - 进入到工程目录并输入以下命令： @@ -31,13 +22,13 @@ #### **yarn** ```bash -yarn add react-native-video@npm:@react-native-oh-library/react-native-video +yarn add react-native-video@npm:@react-native-oh-tpl/react-native-video ``` #### **npm** ```bash -npm install react-native-video@npm:@react-native-oh-library/react-native-video +npm install react-native-video@npm:@react-native-oh-tpl/react-native-video ``` @@ -50,6 +41,7 @@ import {View, ScrollView, StyleSheet, Text,TextInput} from 'react-native'; import RNCVideo from 'react-native-video' function RNCVideoDemo() { + const videoRef = React.useRef(null); const [muted, setMuted] = useState(true); const [paused, setPaused] = useState(false); @@ -72,6 +64,15 @@ function RNCVideoDemo() { return ( + + { videoRef.current?.seek(5)}} >seek:5s + > PackageProvider::getPackages(Package::Cont } ``` -### 在 ArkTs 侧引入 slider 组件 +### 在 ArkTs 侧引入 RNCVideo 组件 打开 `entry/src/main/ets/pages/index.ets`，添加： @@ -280,6 +293,10 @@ ohpm install ## 属性 +详情请查看[react-native-video 官方文档]([react-native-video/README.md at support/5.2.X · react-native-video/react-native-video (github.com)](https://github.com/react-native-video/react-native-video/blob/support/5.2.X/README.md)) + +如下是 react-native-video 已经鸿蒙化的属性： + | 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------- | -------- | ------------ | -------- | | `source` | Sets the media source. You can pass an asset loaded via require or an object with a uri. | object | Yes | All | yes | -- Gitee From 34b946eb7f9ff4324d20ca5162c5b858450c1d63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=83=A1=E5=BA=B7?= Date: Wed, 6 Dec 2023 18:18:43 +0800 Subject: [PATCH 3/5] =?UTF-8?q?[Issues:=20#I8M3SH]=20=E6=9B=B4=E6=96=B0rea?= =?UTF-8?q?ct-native-video=E6=96=87=E6=A1=A3=EF=BC=8C=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E5=AE=98=E6=96=B9=E6=96=87=E6=A1=A3=E9=93=BE=E6=8E=A5=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E9=94=99=E4=B9=B1=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-video.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/zh-cn/react-native-video.md b/zh-cn/react-native-video.md index a0630215..4fbff613 100644 --- a/zh-cn/react-native-video.md +++ b/zh-cn/react-native-video.md @@ -293,7 +293,7 @@ ohpm install ## 属性 -详情请查看[react-native-video 官方文档]([react-native-video/README.md at support/5.2.X · react-native-video/react-native-video (github.com)](https://github.com/react-native-video/react-native-video/blob/support/5.2.X/README.md)) +详情请查看[react-native-video 官方文档](https://github.com/react-native-video/react-native-video/blob/support/5.2.X/README.md) 如下是 react-native-video 已经鸿蒙化的属性： -- Gitee From ff177252ded0f27c59bf643005455a2c51c22c17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=83=A1=E5=BA=B7?= Date: Wed, 13 Dec 2023 16:40:20 +0800 Subject: [PATCH 4/5] =?UTF-8?q?[Issues:=20#I8NWHW]=20video=20source?= =?UTF-8?q?=E6=8F=8F=E8=BF=B0=E4=BF=AE=E6=94=B9=E3=80=82partially=EF=BC=88?= =?UTF-8?q?=E4=BB=85=E6=94=AF=E6=8C=81=E7=BD=91=E7=BB=9C=E9=80=82=E9=85=8D?= =?UTF-8?q?=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-video.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/zh-cn/react-native-video.md b/zh-cn/react-native-video.md index 4fbff613..61fb5c4c 100644 --- a/zh-cn/react-native-video.md +++ b/zh-cn/react-native-video.md @@ -299,7 +299,7 @@ ohpm install | 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------- | -------- | ------------ | -------- | -| `source` | Sets the media source. You can pass an asset loaded via require or an object with a uri. | object | Yes | All | yes | +| `source` | Sets the media source. You can pass an asset loaded via require or an object with a uri.
partially（仅支持网络适配） | object | Yes | All | yes | | `disableFocus` | Determines whether video audio should override background music/audio in Android devices.
**false (default)** | bool | No | Android Exoplayer | yes | | `muted` | Controls whether the audio is muted.
**false (default)** - Don't mute audio | bool | No | All | yes | | `paused` | Controls whether the media is paused.
**false (default)** - Don't pause the media | bool | No | All | yes | -- Gitee From 8a01c062fefca325fdda5127e103bf2c848161c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=83=A1=E5=BA=B7?= Date: Thu, 14 Dec 2023 11:26:51 +0800 Subject: [PATCH 5/5] =?UTF-8?q?[Issues:=20#I8NWHW]=20video=20source?= =?UTF-8?q?=E6=8F=8F=E8=BF=B0=E4=BF=AE=E6=94=B9=E3=80=82prettier=E6=A0=BC?= =?UTF-8?q?=E5=BC=8F=E5=8C=96=E6=96=87=E4=BB=B6=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-video.md | 46 ++++++++++++++++++------------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/zh-cn/react-native-video.md b/zh-cn/react-native-video.md index 8942dce9..893f0aa6 100644 --- a/zh-cn/react-native-video.md +++ b/zh-cn/react-native-video.md @@ -298,36 +298,36 @@ ohpm install 如下是 react-native-video 已经鸿蒙化的属性： -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------- | -------- | ------------ | -------- | -| `source` | Sets the media source. You can pass an asset loaded via require or an object with a uri.
partially（仅支持网络适配） | object | Yes | All | yes | -| `disableFocus` | Determines whether video audio should override background music/audio in Android devices.
**false (default)** | bool | No | Android Exoplayer | yes | -| `muted` | Controls whether the audio is muted.
**false (default)** - Don't mute audio | bool | No | All | yes | -| `paused` | Controls whether the media is paused.
**false (default)** - Don't pause the media | bool | No | All | yes | -| `repeat` | Determine whether to repeat the video when the end is reached.
**false (default)** - Don't repeat the video | bool | No | All | yes | -| `resizeMode` | Determines how to resize the video when the frame doesn't match the raw video dimensions.
**"none" (default)** - Don't apply resize | string | No | Android ExoPlayer, Android MediaPlayer, iOS, Windows UWP | yes | -| `volume` | Adjust the volume.
**1.0 (default)** - Play at full volume | number | No | All | yes | -| `poster` | An image to display while the video is loading
Value: string with a URL for the poster, e.g. "" | string | No | All | yes | -| `posterResizeMode` | Determines how to resize the poster image when the frame doesn't match the raw video dimensions..
**"contain" (default)**- Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). | string | No | All | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----- | -------- | -------------------------------------------------------- | -------------------------------- | +| `source` | Sets the media source. You can pass an asset loaded via require or an object with a uri. | object | Yes | All | partially
(仅支持网络适配) | +| `disableFocus` | Determines whether video audio should override background music/audio in Android devices.
**false (default)** | bool | No | Android Exoplayer | yes | +| `muted` | Controls whether the audio is muted.
**false (default)** - Don't mute audio | bool | No | All | yes | +| `paused` | Controls whether the media is paused.
**false (default)** - Don't pause the media | bool | No | All | yes | +| `repeat` | Determine whether to repeat the video when the end is reached.
**false (default)** - Don't repeat the video | bool | No | All | yes | +| `resizeMode` | Determines how to resize the video when the frame doesn't match the raw video dimensions.
**"none" (default)** - Don't apply resize | string | No | Android ExoPlayer, Android MediaPlayer, iOS, Windows UWP | yes | +| `volume` | Adjust the volume.
**1.0 (default)** - Play at full volume | number | No | All | yes | +| `poster` | An image to display while the video is loading
Value: string with a URL for the poster, e.g. "" | string | No | All | yes | +| `posterResizeMode` | Determines how to resize the poster image when the frame doesn't match the raw video dimensions..
**"contain" (default)**- Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). | string | No | All | yes | ## 事件回调 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------------------- | ------------------------------------------------------------ | :------- | -------- | ------------------------------------------------ | -------- | -| `onLoad` | Callback function that is called when the media is loaded and ready to play. | function | No | All | yes | -| `onLoadStart` | Callback function that is called when the media starts loading. | function | No | All | yes | -| `onReadyForDisplay` | Callback function that is called when the first video frame is ready for display. This is when the poster is removed. | function | No | Android ExoPlayer, Android MediaPlayer, iOS, Web | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | :------- | -------- | ------------------------------------------------ | -------- | +| `onLoad` | Callback function that is called when the media is loaded and ready to play. | function | No | All | yes | +| `onLoadStart` | Callback function that is called when the media starts loading. | function | No | All | yes | +| `onReadyForDisplay` | Callback function that is called when the first video frame is ready for display. This is when the poster is removed. | function | No | Android ExoPlayer, Android MediaPlayer, iOS, Web | yes | | `onProgress` | Callback function that is called every progressUpdateInterval seconds with info about which position the media is currently playing. | function | No | All | yes | -| `onEnd` | Callback function that is called when the player reaches the end of the media. | function | No | All | yes | -| `onError` | Callback function that is called when the player experiences a playback error. | function | No | All | yes | -| `onBuffer` | Callback function that is called when the player buffers. | function | No | Android, iOS | yes | -| `onPlaybackStalled` | Callback function that is MediaPlayer MEDIA_INFO_BUFFERING_START | function | No | Android MediaPlayer | yes | -| `onPlaybackResume` | Callback function that is MediaPlayer MEDIA_INFO_BUFFERING_END | function | No | Android MediaPlayer | yes | +| `onEnd` | Callback function that is called when the player reaches the end of the media. | function | No | All | yes | +| `onError` | Callback function that is called when the player experiences a playback error. | function | No | All | yes | +| `onBuffer` | Callback function that is called when the player buffers. | function | No | Android, iOS | yes | +| `onPlaybackStalled` | Callback function that is MediaPlayer MEDIA_INFO_BUFFERING_START | function | No | Android MediaPlayer | yes | +| `onPlaybackResume` | Callback function that is MediaPlayer MEDIA_INFO_BUFFERING_END | function | No | Android MediaPlayer | yes | ## 静态方法 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| -------- | ------------------------------------------------------------ | :------- | -------- | -------- | -------- | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| -------- | -------------------------------------------------------------------------------- | :------- | -------- | -------- | -------- | | `seek()` | Seek to the specified position represented by seconds. seconds is a float value. | function | No | All | yes | ## 遗留问题 -- Gitee