From b8dbd25c5661c936f262fbdf37fd8dbe08acd9c0 Mon Sep 17 00:00:00 2001
From: "ester.zhou" <ester.zhou@huawei.com>
Date: Tue, 7 Jun 2022 19:13:46 +0800
Subject: [PATCH] update ts-media-components-video

Signed-off-by: ester.zhou <ester.zhou@huawei.com>
---
 .../arkui-ts/ts-media-components-video.md     | 130 +++++++++---------
 1 file changed, 68 insertions(+), 62 deletions(-)

diff --git a/en/application-dev/reference/arkui-ts/ts-media-components-video.md b/en/application-dev/reference/arkui-ts/ts-media-components-video.md
index 461eac8e50..e580461c27 100644
--- a/en/application-dev/reference/arkui-ts/ts-media-components-video.md
+++ b/en/application-dev/reference/arkui-ts/ts-media-components-video.md
@@ -1,16 +1,28 @@
 # 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);
         });
       }
     }
-- 
GitLab