提交 b8dbd25c 编写于 作者: E ester.zhou

update ts-media-components-video

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 956eef68
# Video # Video
> **NOTE**<br>
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > 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 ## Child Components
The **&lt;Video&gt;** component does not support any child component. Not supported
## APIs ## APIs
...@@ -18,47 +30,47 @@ The **&lt;Video&gt;** component does not support any child component. ...@@ -18,47 +30,47 @@ The **&lt;Video&gt;** component does not support any child component.
Video(value: VideoOptions) Video(value: VideoOptions)
- VideoOptions attributes - VideoOptions attributes
| Name | Type | Mandatory | Default Value | Description | | Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| src | string | No | - | Path of the video source. | | 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.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/>> | | 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. | | 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 the video is muted.|
| autoPlay | boolean | false | Whether the video is automatically played. | | autoPlay | boolean | false | Whether to enable auto play.|
| controls | boolean | true | Whether the video playback control bar is displayed. | | controls | boolean | true | Whether to display the video playback control bar.|
| objectFit | [ImageFit](ts-basic-components-image.md) | Cover | Video display mode. | | objectFit | [ImageFit](ts-basic-components-image.md) | Cover | Video scale type. |
| loop | boolean | false | Whether a single video is played cyclically. | | 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
...@@ -72,6 +84,7 @@ A **VideoController** object can control one or more videos. ...@@ -72,6 +84,7 @@ A **VideoController** object can control one or more videos.
controller: VideoController = new VideoController(); controller: VideoController = new VideoController();
``` ```
### start ### start
start(): void start(): void
...@@ -97,9 +110,9 @@ setCurrentTime(value: number) ...@@ -97,9 +110,9 @@ 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
...@@ -108,9 +121,9 @@ requestFullscreen(value: boolean) ...@@ -108,9 +121,9 @@ 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 | number | Yes | false | Whether the playback is in full-screen mode. | | value | number | Yes| false | Whether the playback is in full-screen mode.|
### exitFullscreen ### exitFullscreen
...@@ -125,33 +138,34 @@ setCurrentTime(value: number, seekMode: SeekMode) ...@@ -125,33 +138,34 @@ 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 | | Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| value | number | Yes | - | Video playback position. | | value | number | Yes| - | Video playback position.|
| seekMode | SeekMode | Yes | - | Seek mode. | | seekMode | SeekMode | Yes| - | Seek mode.|
- SeekMode<sup>8+</sup> - SeekMode<sup>8+</sup>
| Name | Description | | Name| Description|
| -------- | -------- | | -------- | -------- |
| PreviousKeyframe | Seeks to the nearest previous keyframe. | | PreviousKeyframe | Seeks to the nearest previous keyframe.|
| NextKeyframe | Seeks to the nearest next keyframe. | | NextKeyframe | Seeks to the nearest next keyframe.|
| ClosestKeyframe | Seeks to the nearest keyframe. | | ClosestKeyframe | Seeks to the nearest keyframe.|
| Accurate | Seeks to a specific frame, regardless of whether the frame is a keyframe. | | Accurate | Seeks to a specific frame, regardless of whether the frame is a keyframe.|
## Example
## Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct VideoCreateComponent { struct VideoCreateComponent {
@State srcs: string = "/resources/video/video1.mp4"; @State srcs: Resource = $rawfile('video1');
@State previewUris: string = "/resources/image/media.JPG"; @State previewUris: Resource = $r('app.media.img');
@State currentProgressRates: number = 1; @State currentProgressRates: number = 1;
@State autoPlays: boolean = false; @State autoPlays: boolean = false;
@State controlsss: boolean = true; @State controlsss: boolean = true;
myVideoController: VideoController = new VideoController(); controller: VideoController = new VideoController();
@State startStaus: boolean = true; @State startStaus: boolean = true;
build() { build() {
Column() { Column() {
...@@ -159,7 +173,7 @@ struct VideoCreateComponent { ...@@ -159,7 +173,7 @@ struct VideoCreateComponent {
src: this.srcs, src: this.srcs,
previewUri: this.previewUris, previewUri: this.previewUris,
currentProgressRate: this.currentProgressRates, currentProgressRate: this.currentProgressRates,
controller: this.myVideoController controller: this.controller
}).width(700).height(500) }).width(700).height(500)
.autoPlay(this.autoPlays) .autoPlay(this.autoPlays)
.controls(this.controlsss) .controls(this.controlsss)
...@@ -189,18 +203,10 @@ struct VideoCreateComponent { ...@@ -189,18 +203,10 @@ struct VideoCreateComponent {
}) })
Row() { Row() {
Button("src").onClick(() => { Button("src").onClick(() => {
if (this.srcs == "/resources/video/video1.mp4") { this.srcs = $rawfile('video2');
this.srcs = "/resources/video/video2.mp4";
} else {
this.srcs = "/resources/video/video1.mp4";
}
}); });
Button("previewUri").onClick(() => { Button("previewUri").onClick(() => {
if (this.previewUris == "/resources/image/media.JPG") { this.previewUris = $r('app.media.img1');
this.previewUris = "/resources/image/sinlin.png";
} else {
this.previewUris = "/resources/image/media.JPG";
}
}); });
Button("controlsss").onClick(() => { Button("controlsss").onClick(() => {
this.controlsss = !this.controlsss; this.controlsss = !this.controlsss;
...@@ -209,19 +215,19 @@ struct VideoCreateComponent { ...@@ -209,19 +215,19 @@ struct VideoCreateComponent {
Row() { Row() {
Button("start").onClick(() => { Button("start").onClick(() => {
this.myVideoController.start(); this.controller.start();
}); });
Button("pause").onClick(() => { Button("pause").onClick(() => {
this.myVideoController.pause(); this.controller.pause();
}); });
Button("stop").onClick(() => { Button("stop").onClick(() => {
this.myVideoController.stop(); this.controller.stop();
}); });
} }
Row() { Row() {
Button("setCurrentTime").onClick(() => { Button("setCurrentTime").onClick(() => {
this.myVideoController.setCurrentTime(9, SeekMode.Accurate); this.controller.setCurrentTime(9, SeekMode.Accurate);
}); });
} }
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册