Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
提交 db0a0164 编写于 作者: E ester.zhou
浏览文件
操作

udpate ts-media-components-video.md (8617) 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 d2f3d3ee
隐藏空白更改
内联 并排
Showing with 61 addition and 58 deletion
en/application-dev/reference/arkui-ts/ts-media-components-video.md
浏览文件 @ db0a0164
# Video # Video
> **NOTE** The **\<Video>** component is used to play a video and control its playback.
>
> 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. > **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions ## 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. 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.
``` ```js
"abilities":[ "abilities":[
{ {
... ...
...@@ -20,55 +20,58 @@ To use online videos, you need to add the **ohos.permission.INTERNET** permissio ...@@ -20,55 +20,58 @@ To use online videos, you need to add the **ohos.permission.INTERNET** permissio
] ]
``` ```
## Child Components ## Child Components
Not supported Not supported
## APIs ## APIs
Video(value: VideoOptions) Video(value: VideoOptions)
- VideoOptions attributes - VideoOptions attributes
| Name| Type| Mandatory| Default Value| Description| | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | ------------------- | ---------------------------------------- | ---- | ---------------------------------------- | ---------------------------------------- |
| 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).| | 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**. | | currentProgressRate | number \| string \| 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**. |
| previewUri | string \| PixelMap<sup>8+</sup> \| [Resource](../../ui/ts-types.md) | No| - | Path of the preview image.| | previewUri | string \| PixelMap<sup>8+</sup> \| [Resource](../../ui/ts-types.md) | No | - | Path of the preview image. |
| controller | [VideoController](#videocontroller) | No| - | Controller.| | controller | [VideoController](#videocontroller) | No | - | Controller. |
- PlaybackSpeed<sup>8+</sup> - PlaybackSpeed<sup>8+</sup>
| Name | Description | | Name | Description |
| -------------------- | --------------------- | | -------------------- | --------- |
| Speed_Forward_0_75_X | 0.75x playback speed. | | Speed_Forward_0_75_X | 0.75x playback speed.|
| Speed_Forward_1_00_X | 1x playback speed. | | Speed_Forward_1_00_X | 1x playback speed. |
| Speed_Forward_1_25_X | 1.25x playback speed. | | Speed_Forward_1_25_X | 1.25x playback speed.|
| Speed_Forward_1_75_X | 1.75x playback speed. | | Speed_Forward_1_75_X | 1.75x playback speed.|
| Speed_Forward_2_00_X | 2x playback speed. | | Speed_Forward_2_00_X | 2x playback speed. |
## Attributes ## Attributes
| Name | Type | Default Value | Description | | Name | Type | Default Value | Description |
| --------- | ---------------------------------------- | ------------- | -------------------------------------------------- | | --------- | ---------------------------------------- | ----- | --------------- |
| muted | boolean | false | Whether the video is muted. | | muted | boolean | false | Whether to mute the video. |
| autoPlay | boolean | false | Whether to enable auto play. | | autoPlay | boolean | false | Whether to enable auto play. |
| controls | boolean | true | Whether to display the video playback control bar. | | controls | boolean | true | Whether to display the video playback control bar.|
| objectFit | [ImageFit](ts-basic-components-image.md) | Cover | Video scale type. | | objectFit | [ImageFit](ts-basic-components-image.md) | Cover | Video scale type. |
| loop | boolean | false | Whether to repeat the video. | | loop | boolean | false | Whether to repeat the video. |
## Events ## Events
| Name| Description| | Name | Description |
| -------- | -------- | | ---------------------------------------- | ---------------------------------------- |
| onStart() =&gt; void | Triggered when the video is played.| | onStart() =&gt; void | Triggered when the video is played. |
| onPause() =&gt; void | Triggered when the video playback is paused.| | onPause() =&gt; void | Triggered when the video playback is paused. |
| onFinish() =&gt; void | Triggered when the video playback is finished.| | onFinish() =&gt; void | Triggered when the video playback is finished. |
| onError() =&gt; void | Triggered when the video playback fails.| | 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**.| | 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.| | 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.| | 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.| | 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 ## VideoController
...@@ -78,7 +81,7 @@ A **VideoController** object can control one or more videos. ...@@ -78,7 +81,7 @@ A **VideoController** object can control one or more videos.
### Objects to Import ### Objects to Import
``` ```ts
controller: VideoController = new VideoController(); controller: VideoController = new VideoController();
``` ```
...@@ -107,11 +110,10 @@ setCurrentTime(value: number) ...@@ -107,11 +110,10 @@ setCurrentTime(value: number)
Sets the video playback position. Sets the video playback position.
**Parameters** - 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 ### requestFullscreen
...@@ -119,11 +121,10 @@ requestFullscreen(value: boolean) ...@@ -119,11 +121,10 @@ requestFullscreen(value: boolean)
Requests full-screen mode. Requests full-screen mode.
**Parameters** - Parameters
| Name | Type | Mandatory | Default Value | Description |
| Name | Type | Mandatory | Default Value | Description | | ----- | ------ | ---- | ----- | ------- |
| ----- | ------ | --------- | ------------- | -------------------------------------------- | | value | boolean | Yes | false | Whether the playback is in full-screen mode.|
| value | boolean | Yes | false | Whether the playback is in full-screen mode. |
### exitFullscreen ### exitFullscreen
...@@ -137,20 +138,21 @@ setCurrentTime(value: number, seekMode: SeekMode) ...@@ -137,20 +138,21 @@ setCurrentTime(value: number, seekMode: SeekMode)
Sets the video playback position with the specified seek mode. Sets the video playback position with the specified seek mode.
**Parameters** - Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | ---- | ---- | --------- |
| value | number | Yes | - | Video playback position.|
| seekMode | SeekMode | Yes | - | Seek mode. |
- SeekMode<sup>8+</sup>
| 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.|
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | --------- | ------------- | ----------------------- |
| value | number | Yes | - | Video playback position. |
| seekMode | SeekMode | Yes | - | Seek mode. |
SeekMode<sup>8+</sup>
| 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. |
## Example ## Example
...@@ -165,6 +167,7 @@ struct VideoCreateComponent { ...@@ -165,6 +167,7 @@ struct VideoCreateComponent {
@State autoPlays: boolean = false; @State autoPlays: boolean = false;
@State controlsss: boolean = true; @State controlsss: boolean = true;
controller: VideoController = new VideoController(); controller: VideoController = new VideoController();
build() { build() {
Column() { Column() {
Video({ Video({
...@@ -231,4 +234,4 @@ struct VideoCreateComponent { ...@@ -231,4 +234,4 @@ struct VideoCreateComponent {
} }
} }
} }
``` ```
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或
新手
引导 客服 返回
顶部