update ts-media-components-video

Signed-off-by: N ester.zhou <ester.zhou@huawei.com>

update ts-media-components-video
Signed-off-by: N ester.zhou <ester.zhou@huawei.com>
b8dbd25c · ester.zhou · 956eef68 · b8dbd25c
隐藏空白更改
内联并排

Showing with 68 addition and 62 deletion

en/application-dev/reference/arkui-ts/ts-media-components-video.md ...ation-dev/reference/arkui-ts/ts-media-components-video.md +68 -62

未找到文件。
--- a/en/application-dev/reference/arkui-ts/ts-media-components-video.md
+++ b/en/application-dev/reference/arkui-ts/ts-media-components-video.md
 # Video

-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+>  **NOTE**<br>
 > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.

+The **\<Video>** component provides a video player.
+
+## Required Permissions
+
+To use online videos, you need to add the **ohos.permission.INTERNET** permission to the corresponding **abilities** in the **config.json** or **module.json** file, whichever is appropriate.

-The **&lt;Video&gt;** component provides a video player.
+```
+"abilities":[
+  {
+    ...
+    "permissions": ["ohos.permission.INTERNET],
+    ...
+  }
+]
+```


 ## Child Components

-The **&lt;Video&gt;** component does not support any child component.
+Not supported


 ## APIs
@@ -18,47 +30,47 @@ The **&lt;Video&gt;** component does not support any child component.
 Video(value: VideoOptions)

 - VideoOptions attributes
-    | Name | Type | Mandatory | Default Value | Description |
+  | Name| Type| Mandatory| Default Value| Description|
  | -------- | -------- | -------- | -------- | -------- |
-  | src | string | No | - | Path of the video source. |
-  | currentProgressRate | number \| PlaybackSpeed<sup>8+</sup> | No | 1.0 \| PlaybackSpeed.Speed_Forward_1_00_X | Video playback speed.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> The value of the number type can only be **0.75**, **1.0**, **1.25**, **1.75**, or **2.0**.<br/>> <br/>>  |
-  | previewUri | string \| PixelMap<sup>8+</sup> \|[Resource](../../ui/ts-types.md) | No | - | Path of the preview image. |
-  | controller | [VideoController](#videocontroller) | No | - | Controller. |
+  | src | string \| [Resource](../../ui/ts-types.md) | No| - | Path of the video source, which can be a local path or a URL.<br>The video resources can be stored in the **video** or **rawfile** folder under **resources**.<br>The path can include a **dataability://** prefix, which is used to access the video path provided by a Data ability. For details about the path, see [Data Ability Development](../../ability/fa-dataability.md).|
+  | currentProgressRate | number \| PlaybackSpeed<sup>8+</sup> | No| 1.0 \| PlaybackSpeed.<br>Speed_Forward_1_00_X | Video playback speed.<br>> **NOTE**<br>> The value of the number type can only be **0.75**, **1.0**, **1.25**, **1.75**, or **2.0**.<br>|
+  | previewUri | string \| PixelMap<sup>8+</sup> \| [Resource](../../ui/ts-types.md) | No| - | Path of the preview image.|
+  | controller | [VideoController](#videocontroller) | No| - | Controller.|


 - PlaybackSpeed<sup>8+</sup>
-    | Name | Description |
+  | Name| Description|
  | -------- | -------- |
-  | Speed_Forward_0_75_X | 0.75x playback speed. |
-  | Speed_Forward_1_00_X | 1x playback speed. |
-  | Speed_Forward_1_25_X | 1.25x playback speed. |
-  | Speed_Forward_1_75_X | 1.75x playback speed. |
-  | Speed_Forward_2_00_X | 2x playback speed. |
+  | Speed_Forward_0_75_X | 0.75x playback speed.|
+  | Speed_Forward_1_00_X | 1x playback speed.|
+  | Speed_Forward_1_25_X | 1.25x playback speed.|
+  | Speed_Forward_1_75_X | 1.75x playback speed.|
+  | Speed_Forward_2_00_X | 2x playback speed.|


 ## Attributes

-| Name | Type | Default Value | Description |
+| Name| Type| Default Value| Description|
 | -------- | -------- | -------- | -------- |
-| muted | boolean | false | Whether the video is muted. |
-| autoPlay | boolean | false | Whether the video is automatically played. |
-| controls | boolean | true | Whether the video playback control bar is displayed. |
-| objectFit | [ImageFit](ts-basic-components-image.md) | Cover | Video display mode. |
-| loop | boolean | false | Whether a single video is played cyclically. |
+| muted | boolean | false | Whether the video is muted.|
+| autoPlay | boolean | false | Whether to enable auto play.|
+| controls | boolean | true | Whether to display the video playback control bar.|
+| objectFit | [ImageFit](ts-basic-components-image.md) | Cover | Video scale type. |
+| loop | boolean | false | Whether to repeat the video.|


 ## Events

-| Name | Description |
+| Name| Description|
 | -------- | -------- |
-| onStart() =&gt; void | Triggered when the video is played. |
-| onPause() =&gt; void | Triggered when the video playback is paused. |
-| onFinish() =&gt; void | Triggered when the video playback is finished. |
-| onError() =&gt; void | Triggered when the video playback fails. |
-| onPrepared(event?: { duration: number }) =&gt; void | Triggered when video preparation is complete. The video duration (in seconds) is obtained from **duration**. |
-| onSeeking(event?: { time: number }) =&gt; void | Triggered to report the time (in seconds) when the progress bar is being dragged. |
-| onSeeked(event?: { time: number }) =&gt; void | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar. |
-| onUpdate(event?: { time: number }) =&gt; void | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second. |
+| onStart() =&gt; void | Triggered when the video is played.|
+| onPause() =&gt; void | Triggered when the video playback is paused.|
+| onFinish() =&gt; void | Triggered when the video playback is finished.|
+| onError() =&gt; void | Triggered when the video playback fails.|
+| onPrepared(event?: { duration: number }) =&gt; void | Triggered when video preparation is complete. The video duration (in seconds) is obtained from **duration**.|
+| onSeeking(event?: { time: number }) =&gt; void | Triggered to report the time (in seconds) when the progress bar is being dragged.|
+| onSeeked(event?: { time: number }) =&gt; void | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar.|
+| onUpdate(event?: { time: number }) =&gt; void | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second.|


 ## VideoController
@@ -72,6 +84,7 @@ A **VideoController** object can control one or more videos.
 controller: VideoController = new VideoController();
 ```

+
 ### start

 start(): void
@@ -97,9 +110,9 @@ setCurrentTime(value: number)
 Sets the video playback position.

 - Parameters
-  | Name | Type | Mandatory | Default Value | Description |
+  | Name| Type| Mandatory| Default Value| Description|
  | -------- | -------- | -------- | -------- | -------- |
-  | value | number | Yes | - | Video playback position. |
+  | value | number | Yes| - | Video playback position.|

 ### requestFullscreen

@@ -108,9 +121,9 @@ requestFullscreen(value: boolean)
 Requests full-screen mode.

 - Parameters
-  | Name | Type | Mandatory | Default Value | Description |
+  | Name| Type| Mandatory| Default Value| Description|
  | -------- | -------- | -------- | -------- | -------- |
-  | value | number | Yes | false | Whether the playback is in full-screen mode. |
+  | value | number | Yes| false | Whether the playback is in full-screen mode.|

 ### exitFullscreen

@@ -125,33 +138,34 @@ setCurrentTime(value: number, seekMode: SeekMode)
 Sets the video playback position with the specified seek mode.

 - Parameters
-  | Name | Type | Mandatory | Default Value | Description |
+  | Name| Type| Mandatory| Default Value| Description|
  | -------- | -------- | -------- | -------- | -------- |
-  | value | number | Yes | - | Video playback position. |
-  | seekMode | SeekMode | Yes | - | Seek mode. |
+  | value | number | Yes| - | Video playback position.|
+  | seekMode | SeekMode | Yes| - | Seek mode.|

 - SeekMode<sup>8+</sup>
-  | Name | Description |
+  | Name| Description|
  | -------- | -------- |
-  | PreviousKeyframe | Seeks to the nearest previous keyframe. |
-  | NextKeyframe | Seeks to the nearest next keyframe. |
-  | ClosestKeyframe | Seeks to the nearest keyframe. |
-  | Accurate | Seeks to a specific frame, regardless of whether the frame is a keyframe. |
+  | PreviousKeyframe | Seeks to the nearest previous keyframe.|
+  | NextKeyframe | Seeks to the nearest next keyframe.|
+  | ClosestKeyframe | Seeks to the nearest keyframe.|
+  | Accurate | Seeks to a specific frame, regardless of whether the frame is a keyframe.|


-## Example

+## Example

-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct VideoCreateComponent {
-  @State srcs: string = "/resources/video/video1.mp4";
-  @State previewUris: string = "/resources/image/media.JPG";
+  @State srcs: Resource = $rawfile('video1');
+  @State previewUris: Resource = $r('app.media.img');
  @State currentProgressRates: number = 1;
  @State autoPlays: boolean = false;
  @State controlsss: boolean = true;
-  myVideoController: VideoController = new VideoController();
+  controller: VideoController = new VideoController();
  @State startStaus: boolean = true;
  build() {
    Column() {
@@ -159,7 +173,7 @@ struct VideoCreateComponent {
        src: this.srcs,
        previewUri: this.previewUris, 
        currentProgressRate: this.currentProgressRates,
-        controller: this.myVideoController
+        controller: this.controller
      }).width(700).height(500)
        .autoPlay(this.autoPlays)
        .controls(this.controlsss)
@@ -189,18 +203,10 @@ struct VideoCreateComponent {
                })
      Row() {
        Button("src").onClick(() => {
-          if (this.srcs == "/resources/video/video1.mp4") {
-            this.srcs = "/resources/video/video2.mp4";
-          } else {
-            this.srcs = "/resources/video/video1.mp4";
-          }
+            this.srcs = $rawfile('video2');
        });
        Button("previewUri").onClick(() => {
-          if (this.previewUris == "/resources/image/media.JPG") {
-            this.previewUris = "/resources/image/sinlin.png";
-          } else {
-            this.previewUris = "/resources/image/media.JPG";
-          }
+            this.previewUris = $r('app.media.img1');
        });
        Button("controlsss").onClick(() => {
          this.controlsss = !this.controlsss;
@@ -209,19 +215,19 @@ struct VideoCreateComponent {

      Row() {
        Button("start").onClick(() => {
-          this.myVideoController.start();
+          this.controller.start();
        });
        Button("pause").onClick(() => {
-          this.myVideoController.pause();
+          this.controller.pause();
        });
        Button("stop").onClick(() => {
-          this.myVideoController.stop();
+          this.controller.stop();
        });
      }

      Row() {
        Button("setCurrentTime").onClick(() => {
-          this.myVideoController.setCurrentTime(9, SeekMode.Accurate);
+          this.controller.setCurrentTime(9, SeekMode.Accurate);
        });
      }
    }