From 4891fde038fcd500b2d8923bb44303d95a7aee26 Mon Sep 17 00:00:00 2001 From: sd_wu Date: Wed, 2 Jul 2025 21:53:37 +0800 Subject: [PATCH] =?UTF-8?q?video=E7=BB=84=E4=BB=B6arkts1.2=E7=9A=84?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: sd_wu --- .../arkui-ts/ts-media-components-video.md | 128 +++++++++++++++++- 1 file changed, 127 insertions(+), 1 deletion(-) diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-media-components-video.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-media-components-video.md index 26be5d9eea8..7b349ad6e8e 100755 --- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-media-components-video.md +++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-media-components-video.md @@ -253,7 +253,7 @@ onFinish(event: VoidCallback) ### onError -onError(event: () => void) +ArkTS1.1: onError(event: () => void)
ArkTS1.2: onError(event: [VoidCallback](ts-types.md#voidcallback12)) 播放失败时触发该事件。 @@ -261,6 +261,12 @@ onError(event: () => void) **系统能力：** SystemCapability.ArkUI.ArkUI.Full +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | --------------------------------------------- | ---- | ----------------------------------- | +| event | ArkTS1.1: () => void
ArkTS1.2: [VoidCallback](ts-types.md#voidcallback12) | 是 | 视频播放失败的回调函数。 | + ### onStop12+ onStop(event: Callback<void>) @@ -541,6 +547,7 @@ setCurrentTime(value: number, seekMode: SeekMode) 基础用法，包括控制栏、预览图、自动播放、播放速度、响应快捷键、控制器（开始播放、暂停播放、停止播放、重置avPlayer、跳转等）、首帧送显以及一些状态回调方法。 +**ArkTS1.1示例：** ```ts // xxx.ets @Entry @@ -667,11 +674,129 @@ interface FullscreenObject { fullscreen: boolean; } ``` +**ArkTS1.2示例：** +```ts +// xxx.ets +import { Button, Callback, ClickEvent, Column, Component, Entry, PreparedInfo, PlaybackInfo, PlaybackSpeed, PosterOptions, FullscreenInfo, Row, Resource, SeekMode, Video, VideoController, VideoOptions, VoidCallback, $r, $rawfile } from '@ohos.arkui.component' +import { State } from '@ohos.arkui.stateManagement' +@Entry +@Component +struct VideoCreateComponent { + @State videoSrc: Resource = $rawfile('video1.mp4') + @State previewUri: Resource = $r('app.media.poster1') + @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X + @State isAutoPlay: boolean = false + @State showControls: boolean = true + @State isShortcutKeyEnabled: boolean = false + @State showFirstFrame: boolean = false + controller: VideoController = new VideoController() + + build() { + Column() { + Video({ + src: this.videoSrc, + previewUri: this.previewUri, + currentProgressRate: this.curRate, + controller: this.controller, + posterOptions: { showFirstFrame: this.showFirstFrame } as PosterOptions + } as VideoOptions) + .width('100%') + .height(600) + .autoPlay(this.isAutoPlay) + .controls(this.showControls) + .enableShortcutKey(this.isShortcutKeyEnabled) + .onStart(() => { + console.info('onStart') + } as VoidCallback) + .onPause(() => { + console.info('onPause') + } as VoidCallback) + .onFinish(() => { + console.info('onFinish') + } as VoidCallback) + .onError(() => { + console.info('onError') + } as VoidCallback) + .onStop(() => { + console.info('onStop') + } as VoidCallback) + .onPrepared((e?: PreparedInfo) => { + if (e != undefined) { + console.info('onPrepared is ' + e.duration) + } + } as Callback) + .onSeeking((e?: PlaybackInfo) => { + if (e != undefined) { + console.info('onSeeking is ' + e.time) + } + } as Callback) + .onSeeked((e?: PlaybackInfo) => { + if (e != undefined) { + console.info('onSeeked is ' + e.time) + } + } as Callback) + .onUpdate((e?: PlaybackInfo) => { + if (e != undefined) { + console.info('onUpdate is ' + e.time) + } + } as Callback) + .onFullscreenChange((e?: FullscreenInfo) => { + if (e != undefined) { + console.info('onFullscreenChange is ' + e.fullscreen) + } + } as Callback) + + Row() { + Button('src').onClick((e: ClickEvent) => { + this.videoSrc = $rawfile('video2.mp4') // 切换视频源 + }).margin(5) + Button('previewUri').onClick((e: ClickEvent) => { + this.previewUri = $r('app.media.poster2') // 切换视频预览海报 + }).margin(5) + Button('controls').onClick((e: ClickEvent) => { + this.showControls = !this.showControls // 切换是否显示视频控制栏 + }).margin(5) + } + + Row() { + Button('start').onClick((e: ClickEvent) => { + this.controller.start() // 开始播放 + }).margin(2) + Button('pause').onClick((e: ClickEvent) => { + this.controller.pause() // 暂停播放 + }).margin(2) + Button('stop').onClick((e: ClickEvent) => { + this.controller.stop() // 结束播放 + }).margin(2) + Button('reset').onClick((e: ClickEvent) => { + this.controller.reset() // 重置AVPlayer + }).margin(2) + Button('setTime').onClick((e: ClickEvent) => { + this.controller.setCurrentTime(10, SeekMode.Accurate) // 精准跳转到视频的10s位置 + }).margin(2) + } + + Row() { + Button('rate 0.75').onClick((e: ClickEvent) => { + this.curRate = PlaybackSpeed.Speed_Forward_0_75_X // 0.75倍速播放 + }).margin(5) + Button('rate 1').onClick((e: ClickEvent) => { + this.curRate = PlaybackSpeed.Speed_Forward_1_00_X // 原倍速播放 + }).margin(5) + Button('rate 2').onClick((e: ClickEvent) => { + this.curRate = PlaybackSpeed.Speed_Forward_2_00_X // 2倍速播放 + }).margin(5) + } + } + } +} +``` ### 示例2（图像分析功能） 使用enableAnalyzer属性开启图像AI分析。 +**ArkTS1.1示例：** ```ts // xxx.ets @Entry @@ -730,6 +855,7 @@ struct ImageAnalyzerExample { 以下示例展示了如何使Video组件能够播放拖入的视频。 +**ArkTS1.1示例：** ```ts // xxx.ets import { unifiedDataChannel, uniformTypeDescriptor } from '@kit.ArkData'; -- Gitee