From 98d8f51835b8641eb616a8157af0b54cfa5220b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=83=A1=E5=BA=B7?= <hukang36@h-partners.com>
Date: Wed, 27 Dec 2023 20:57:26 +0800
Subject: [PATCH] =?UTF-8?q?[Issues:=20#I8RWFG]=20=E6=9B=B4=E6=96=B0vamll?=
 =?UTF-8?q?=E7=89=88react-native-video=E5=88=B0=E6=A8=A1=E7=89=88v0.1.2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vmall/react-native-video.md | 461 +++++++++++++++++++++++-------------
 1 file changed, 292 insertions(+), 169 deletions(-)

diff --git a/vmall/react-native-video.md b/vmall/react-native-video.md
index 404396a7..fb7c9432 100644
--- a/vmall/react-native-video.md
+++ b/vmall/react-native-video.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.1.1
+> 模板版本：v0.1.2
 
 <p align="center">
   <h1 align="center"> <code>react-native-video</code> </h1>
@@ -37,20 +37,21 @@ npm install @react-native-oh-tpl/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'
+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 [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");
@@ -59,22 +60,23 @@ function RNCVideoDemo() {
   const [onVideoProgress, setOnVideoProgress] = useState("onVideoProgress");
   const [onVideoEnd, setOnVideoEnd] = useState("onVideoEnd");
   const [onVideoBuffer, setOnVideoBuffer] = useState("onVideoBuffer");
-  const [onPlaybackStalled, setOnPlaybackStalled] = useState("onPlaybackStalled");
+  const [onPlaybackStalled, setOnPlaybackStalled] =
+    useState("onPlaybackStalled");
   const [onPlaybackResume, setOnPlaybackResume] = useState("onPlaybackResume");
 
-  const scrollRef = React.useRef<ScrollView>(null);
-  const videoRef = React.useRef<typeof RNCVideo>(null);
+  const scrollRef = React.useRef < ScrollView > null;
+  const videoRef = React.useRef < typeof RNCVideo > null;
 
   const toggleMuted = () => {
-      setMuted((prevMuted) => !prevMuted);
+    setMuted((prevMuted) => !prevMuted);
   };
 
   const togglePaused = () => {
-      setPaused((prevPaused) => !prevPaused);
+    setPaused((prevPaused) => !prevPaused);
   };
 
   const toggleRepeat = () => {
-      setRepeat((prevRepeat) => !prevRepeat);
+    setRepeat((prevRepeat) => !prevRepeat);
   };
 
   const toggleDisableFocus = () => {
@@ -82,22 +84,24 @@ function RNCVideoDemo() {
   };
 
   const firstVideo = () => {
-      setUri((prevRepeat) => 'https://vjs.zencdn.net/v/oceans.mp4');
+    setUri((prevRepeat) => "https://vjs.zencdn.net/v/oceans.mp4");
   };
 
   const secondVideo = () => {
-      // setUri((prevRepeat) => 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4');
-      setUri((prevRepeat) => 'https://res.vmallres.com//uomcdn/CN/cms/202210/C75C7E20060F3E909F2998E13C3ABC03.mp4');
+    // setUri((prevRepeat) => 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4');
+    setUri(
+      (prevRepeat) =>
+        "https://res.vmallres.com//uomcdn/CN/cms/202210/C75C7E20060F3E909F2998E13C3ABC03.mp4"
+    );
   };
 
   const changeResizeMode = (resizeMode) => {
-      setResizeMode((prevResizeMode) => resizeMode);
+    setResizeMode((prevResizeMode) => resizeMode);
   };
 
   return (
-
     <ScrollView style={styles.container} ref={scrollRef}>
-    <View style={styles.container} >
+      <View style={styles.container}>
         <Text style={styles.title}>网络视频demo</Text>
         <Text style={styles.labelB}>{onVideoLoad}</Text>
         <Text style={styles.label}>{onVideoError}</Text>
@@ -109,154 +113,261 @@ function RNCVideoDemo() {
         <Text style={styles.label}>{onPlaybackResume}</Text>
         <Text style={styles.title}>update source </Text>
         <View
-              style={{
-                flexDirection: "row",
-                height: 40,
-                padding: 0
-              }}
-            >
-          <Text style={{ backgroundColor: "blue", flex: 0.25 }} onPress={() => { 
-            setUri( 'https://res.vmallres.com//uomcdn/CN/cms/202210/C75C7E20060F3E909F2998E13C3ABC03.mp4');
-            setPosterResizeMode("stretch");
-          }}>切换net:vmallres</Text>
-          <Text style={{ backgroundColor: "red", flex: 0.25 }} onPress={() => {   
-            setUri('https://vjs.zencdn.net/v/oceans.mp4');
-            setPosterResizeMode("contain");
-          }}>切换net:oceans</Text>
+          style={{
+            flexDirection: "row",
+            height: 40,
+            padding: 0,
+          }}
+        >
+          <Text
+            style={{ backgroundColor: "blue", flex: 0.25 }}
+            onPress={() => {
+              setUri(
+                "https://res.vmallres.com//uomcdn/CN/cms/202210/C75C7E20060F3E909F2998E13C3ABC03.mp4"
+              );
+              setPosterResizeMode("stretch");
+            }}
+          >
+            切换net:vmallres
+          </Text>
+          <Text
+            style={{ backgroundColor: "red", flex: 0.25 }}
+            onPress={() => {
+              setUri("https://vjs.zencdn.net/v/oceans.mp4");
+              setPosterResizeMode("contain");
+            }}
+          >
+            切换net:oceans
+          </Text>
         </View>
         <Text style={styles.title}>set resizeMode </Text>
         <View
-              style={{
-                flexDirection: "row",
-                height: 40,
-                padding: 0
-              }}
-            >
-        <Text style={{ backgroundColor: "blue", flex: 0.25 }} onPress={() => {  setResizeMode("none");}} >none</Text>
-        <Text style={{ backgroundColor: "red", flex: 0.25 }} onPress={() => {   setResizeMode("contain");}} >contain</Text>
-        <Text style={{ backgroundColor: "yellow", flex: 0.25 }} onPress={() => {  setResizeMode("stretch");}} >stretch</Text>
-        <Text style={{ backgroundColor: "green", flex: 0.25 }} onPress={() => {   setResizeMode("cover");}} >cover</Text>
+          style={{
+            flexDirection: "row",
+            height: 40,
+            padding: 0,
+          }}
+        >
+          <Text
+            style={{ backgroundColor: "blue", flex: 0.25 }}
+            onPress={() => {
+              setResizeMode("none");
+            }}
+          >
+            none
+          </Text>
+          <Text
+            style={{ backgroundColor: "red", flex: 0.25 }}
+            onPress={() => {
+              setResizeMode("contain");
+            }}
+          >
+            contain
+          </Text>
+          <Text
+            style={{ backgroundColor: "yellow", flex: 0.25 }}
+            onPress={() => {
+              setResizeMode("stretch");
+            }}
+          >
+            stretch
+          </Text>
+          <Text
+            style={{ backgroundColor: "green", flex: 0.25 }}
+            onPress={() => {
+              setResizeMode("cover");
+            }}
+          >
+            cover
+          </Text>
         </View>
         <View
-              style={{
-                flexDirection: "row",
-                flexWrap:"wrap",
-                padding: 0
-              }}
-            >
-        <Text style={styles.title}>操作 </Text>
-        <TextInput  style={ styles.prop_input}
-              placeholder='input seek sec number:'
-              multiline={false}
-              maxLength={30}
-              keyboardType='numeric'
-              onChangeText={(text)=>{ 
-                const newText = text.replace(/[^\d]+/, '');
-                setSeekSec(Number(newText))
-              }}
-              autoFocus={false}
-        />
+          style={{
+            flexDirection: "row",
+            flexWrap: "wrap",
+            padding: 0,
+          }}
+        >
+          <Text style={styles.title}>操作 </Text>
+          <TextInput
+            style={styles.prop_input}
+            placeholder="input seek sec number:"
+            multiline={false}
+            maxLength={30}
+            keyboardType="numeric"
+            onChangeText={(text) => {
+              const newText = text.replace(/[^\d]+/, "");
+              setSeekSec(Number(newText));
+            }}
+            autoFocus={false}
+          />
         </View>
         <View
-              style={{
-                flexDirection: "row",
-                flexWrap:"wrap",
-                padding: 0
-              }}
-            >
-        <Text style={styles.button_b} onPress={() => {  videoRef.current?.seek(seekSec)}} >seek:{seekSec.toString()}</Text>
-        <Text style={styles.button_b} onPress={() => {  togglePaused()}} >paused:{paused.toString()}</Text>
-        <Text style={styles.button_b} onPress={() => {  toggleMuted() }} >muted:{muted.toString()}</Text>
-        <Text style={styles.button_b} onPress={() => {  toggleRepeat() }} >repeat:{repeat.toString()}</Text>
-        <Text style={styles.button_b} onPress={() => {  toggleDisableFocus() }} >disableFocus:{disableFocus.toString()}</Text>
-        <Text style={styles.button_b}  >ReSizeMode:{resizeMode.toString()}</Text>
+          style={{
+            flexDirection: "row",
+            flexWrap: "wrap",
+            padding: 0,
+          }}
+        >
+          <Text
+            style={styles.button_b}
+            onPress={() => {
+              videoRef.current?.seek(seekSec);
+            }}
+          >
+            seek:{seekSec.toString()}
+          </Text>
+          <Text
+            style={styles.button_b}
+            onPress={() => {
+              togglePaused();
+            }}
+          >
+            paused:{paused.toString()}
+          </Text>
+          <Text
+            style={styles.button_b}
+            onPress={() => {
+              toggleMuted();
+            }}
+          >
+            muted:{muted.toString()}
+          </Text>
+          <Text
+            style={styles.button_b}
+            onPress={() => {
+              toggleRepeat();
+            }}
+          >
+            repeat:{repeat.toString()}
+          </Text>
+          <Text
+            style={styles.button_b}
+            onPress={() => {
+              toggleDisableFocus();
+            }}
+          >
+            disableFocus:{disableFocus.toString()}
+          </Text>
+          <Text style={styles.button_b}>
+            ReSizeMode:{resizeMode.toString()}
+          </Text>
         </View>
-      <RNCVideo
-        style={styles.video}
-        ref={videoRef}
-        drm={{ type: 'fairplay', certificateUrl: 'sasddd', drmType: "drmfairplay", }}
-        source={{ uri: uri ,isNetwork:true}}
-        paused={paused}
-        muted={muted}
-        resizeMode={resizeMode}
-        repeat={repeat}
-        volume={1}
-        disableFocus={disableFocus}
-        poster={'https://res.vmallres.com/pimages/uomcdn/CN/pms/202304/sbom/4002010007801/group/800_800_9B1356F1330EADDCB20D35D2AE1F46E0.jpg'}
-        posterResizeMode={posterResizeMode}
-        onLoad={(e) => {
-          setOnVideoLoad("onVideoLoad currentTime =" + e.currentPosition + "s duration =" + e.duration + "s width =" + e.naturalSize.width+ " orientation =" + e.naturalSize.orientation)
-          setOnVideoError("onVideoError error = ok" )
-        }}
-        onLoadStart={(e) => {
-          setOnVideoLoadStart("onVideoLoadStart isNetwork =" + e.isNetwork + " type=" + e.type + " uri=" + e.uri)
-        }}
-        onProgress={(e) => {
-          setOnVideoProgress("onVideoProgress currentTime =" + e.currentTime + " playableDuration=" + e.playableDuration + " seekableDuration=" + e.seekableDuration)
-        }}
-        onError={(e) => {
-          setOnVideoError("onVideoError error =" + e.error)
-        }}
-        onEnd={() => {
-          setOnVideoEnd("onVideoEnd completed")
-        }}
-        onBuffer={(e) => {
-          setOnVideoBuffer("onVideoBuffer :"+ e.isBuffering)
-        }}
-        onPlaybackStalled={() => {
-          setOnPlaybackStalled("onPlaybackStalled : true")
-          setOnPlaybackResume("onPlaybackResume :false")
-        }}
-        onPlaybackResume={() => {
-          setOnPlaybackStalled("onPlaybackStalled :false")
-          setOnPlaybackResume("onPlaybackResume :true")
-        }}
-        onReadyForDisplay={() => {
-          console.log(`onReadyForDisplay :setShowPoster(false)`)
-        }}
-      ></RNCVideo>
-    </View>
+        <RNCVideo
+          style={styles.video}
+          ref={videoRef}
+          drm={{
+            type: "fairplay",
+            certificateUrl: "sasddd",
+            drmType: "drmfairplay",
+          }}
+          source={{ uri: uri, isNetwork: true }}
+          paused={paused}
+          muted={muted}
+          resizeMode={resizeMode}
+          repeat={repeat}
+          volume={1}
+          disableFocus={disableFocus}
+          poster={
+            "https://res.vmallres.com/pimages/uomcdn/CN/pms/202304/sbom/4002010007801/group/800_800_9B1356F1330EADDCB20D35D2AE1F46E0.jpg"
+          }
+          posterResizeMode={posterResizeMode}
+          onLoad={(e) => {
+            setOnVideoLoad(
+              "onVideoLoad currentTime =" +
+                e.currentPosition +
+                "s duration =" +
+                e.duration +
+                "s width =" +
+                e.naturalSize.width +
+                " orientation =" +
+                e.naturalSize.orientation
+            );
+            setOnVideoError("onVideoError error = ok");
+          }}
+          onLoadStart={(e) => {
+            setOnVideoLoadStart(
+              "onVideoLoadStart isNetwork =" +
+                e.isNetwork +
+                " type=" +
+                e.type +
+                " uri=" +
+                e.uri
+            );
+          }}
+          onProgress={(e) => {
+            setOnVideoProgress(
+              "onVideoProgress currentTime =" +
+                e.currentTime +
+                " playableDuration=" +
+                e.playableDuration +
+                " seekableDuration=" +
+                e.seekableDuration
+            );
+          }}
+          onError={(e) => {
+            setOnVideoError("onVideoError error =" + e.error);
+          }}
+          onEnd={() => {
+            setOnVideoEnd("onVideoEnd completed");
+          }}
+          onBuffer={(e) => {
+            setOnVideoBuffer("onVideoBuffer :" + e.isBuffering);
+          }}
+          onPlaybackStalled={() => {
+            setOnPlaybackStalled("onPlaybackStalled : true");
+            setOnPlaybackResume("onPlaybackResume :false");
+          }}
+          onPlaybackResume={() => {
+            setOnPlaybackStalled("onPlaybackStalled :false");
+            setOnPlaybackResume("onPlaybackResume :true");
+          }}
+          onReadyForDisplay={() => {
+            console.log(`onReadyForDisplay :setShowPoster(false)`);
+          }}
+        ></RNCVideo>
+      </View>
     </ScrollView>
   );
 }
 
 const styles = StyleSheet.create({
   video: {
-    width: '100%',
+    width: "100%",
     height: 260,
-},
+  },
   container: {
-    width: '100%',
-    height: '100%',
-    backgroundColor: '#333',
+    width: "100%",
+    height: "100%",
+    backgroundColor: "#333",
   },
   title: {
-    color: 'white',
-    width: '30%', // hack
+    color: "white",
+    width: "30%", // hack
     height: 30, // hack
   },
   label: {
-    color: 'gray',
-    width: '100%', // hack
-    minHeight:20
+    color: "gray",
+    width: "100%", // hack
+    minHeight: 20,
   },
   labelB: {
-    color: 'gray',
-    width: '100%', // hack
-    minHeight:40
+    color: "gray",
+    width: "100%", // hack
+    minHeight: 40,
   },
   button: {
     width: 160,
     height: 36,
-    backgroundColor: 'hsl(190, 50%, 70%)',
+    backgroundColor: "hsl(190, 50%, 70%)",
     paddingHorizontal: 16,
     paddingVertical: 8,
     borderRadius: 8,
   },
   buttonText: {
-    width: '100%',
-    height: '100%',
-    fontWeight: 'bold',
+    width: "100%",
+    height: "100%",
+    fontWeight: "bold",
   },
   button_b: {
     paddingHorizontal: 8,
@@ -267,15 +378,15 @@ const styles = StyleSheet.create({
     marginHorizontal: "1%",
     marginBottom: 6,
     minWidth: "25%",
-    minHeight:20,
+    minHeight: 20,
     textAlign: "center",
   },
-  prop_input:{
-    width:160,
-    height:40,
-    borderWidth:1,
-    backgroundColor:'white',
-    color:"black",
+  prop_input: {
+    width: 160,
+    height: 40,
+    borderWidth: 1,
+    backgroundColor: "white",
+    color: "black",
     borderRadius: 8,
   },
 });
@@ -460,37 +571,49 @@ ohpm install
 
 如下是 react-native-video 已经鸿蒙化的属性：
 
-| 名称               | 说明                                                                                                                                                                                                                                                                                                                                        | 类型   | 是否必填 | 原库平台                                                 | 鸿蒙支持 |
-| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----- | -------- | -------------------------------------------------------- | -------- |
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+| Name               | Description                                                                                                                                                                                                                                                                                                                                 | Type   | Required | Platform                                                 | HarmonyOS Support              |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----- | -------- | -------------------------------------------------------- | ------------------------------ |
 | `source`           | Sets the media source. You can pass an asset loaded via require or an object with a uri.                                                                                                                                                                                                                                                    | object | Yes      | All                                                      | partially<br/>(仅支持网络适配) |
-| `disableFocus`     | Determines whether video audio should override background music/audio in Android devices.<br/>**false (default)**                                                                                                                                                                                                                           | bool   | No       | Android Exoplayer                                        | yes      |
-| `muted`            | Controls whether the audio is muted.<br/>**false (default)** - Don't mute audio                                                                                                                                                                                                                                                             | bool   | No       | All                                                      | yes      |
-| `paused`           | Controls whether the media is paused.<br/>**false (default)** - Don't pause the media                                                                                                                                                                                                                                                       | bool   | No       | All                                                      | yes      |
-| `repeat`           | Determine whether to repeat the video when the end is reached.<br/>**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.<br/>**"none" (default)** - Don't apply resize                                                                                                                                                                                                     | string | No       | Android ExoPlayer, Android MediaPlayer, iOS, Windows UWP | yes      |
-| `volume`           | Adjust the volume.<br/>**1.0 (default)** - Play at full volume                                                                                                                                                                                                                                                                              | number | No       | All                                                      | yes      |
-| `poster`           | An image to display while the video is loading<br/>Value: string with a URL for the poster, e.g. "<https://baconmockup.com/300/200/>"                                                                                                                                                                                                       | string | No       | All                                                      | yes      |
-| `posterResizeMode` | Determines how to resize the poster image when the frame doesn't match the raw video dimensions..<br/>**"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      |
+| `disableFocus`     | Determines whether video audio should override background music/audio in Android and HarmonyOS devices.<br/>**false (default)**                                                                                                                                                                                                             | bool   | No       | Android Exoplayer                                        | yes                            |
+| `muted`            | Controls whether the audio is muted.<br/>**false (default)** - Don't mute audio                                                                                                                                                                                                                                                             | bool   | No       | All                                                      | yes                            |
+| `paused`           | Controls whether the media is paused.<br/>**false (default)** - Don't pause the media                                                                                                                                                                                                                                                       | bool   | No       | All                                                      | yes                            |
+| `repeat`           | Determine whether to repeat the video when the end is reached.<br/>**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.<br/>**"none" (default)** - Don't apply resize                                                                                                                                                                                                     | string | No       | Android ExoPlayer, Android MediaPlayer, iOS, Windows UWP | yes                            |
+| `volume`           | Adjust the volume.<br/>**1.0 (default)** - Play at full volume                                                                                                                                                                                                                                                                              | number | No       | All                                                      | yes                            |
+| `poster`           | An image to display while the video is loading<br/>Value: string with a URL for the poster, e.g. "<https://baconmockup.com/300/200/>"                                                                                                                                                                                                       | string | No       | All                                                      | yes                            |
+| `posterResizeMode` | Determines how to resize the poster image when the frame doesn't match the raw video dimensions..<br/>**"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      |
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+| Name                | Description                                                                                                                          | Type     | Required | Platform                                         | HarmonyOS Support |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | :------- | -------- | ------------------------------------------------ | ----------------- |
+| `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      |
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+| Name     | Description                                                                      | Type     | Required | Platform | HarmonyOS Support |
+| -------- | -------------------------------------------------------------------------------- | :------- | -------- | -------- | ----------------- |
+| `seek()` | Seek to the specified position represented by seconds. seconds is a float value. | function | No       | All      | yes               |
 
 ## 遗留问题
 
@@ -501,4 +624,4 @@ ohpm install
 
 ## 开源协议
 
-本项目基于 [The MIT License (MIT)](https://github.com/callstack/react-native-slider/blob/main/LICENSE.md) ，请自由地享受和参与开源。
+本项目基于 [The MIT License (MIT)](https://github.com/callstack/react-native-slider/blob/main/LICENSE.md) ，请自由地享受和参与开源。
\ No newline at end of file
-- 
Gitee