> 文档中心 > armonyOS应用开发-ets-video组件案例

armonyOS应用开发-ets-video组件案例

说明:
该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

接口
Video(value: {src?: string, currentProgressRate?: number | string, previewUri?: string, controller?: VideoController})

示例代码:

// @ts-nocheck@Entry@Componentstruct VideoExample {  @State src: Resource = $rawfile('video1.mp4')  @State currentProgressRate: number = 1  @State muted: boolean = false  @State autoPlay: boolean = false  @State controls: boolean = true  @State startStaus: boolean = true  myVideoController: VideoController = new VideoController()  build() {    Column({ space: 10 }) {      Video({ src: this.src, previewUri: '../../../../resources/rawfile/video1.mp4', currentProgressRate: this.currentProgressRate, controller: this.myVideoController      }) .muted(this.muted) .autoPlay(this.autoPlay) .controls(this.controls) .objectFit(ImageFit.Contain) .loop(true) .width(320) .height(200) .onStart(() => {   console.info('onStart') }) .onPause(() => {   console.info('onPause') }) .onFinish(() => {   console.info('onFinish') }) .onError(() => {   console.info('onError') }) .onFullscreenChange((e) => {   console.info('onFullscreenChange:' + e.fullscreen) }) .onPrepared((e) => {   console.info('onPrepared:' + e.duration) }) .onSeeking((e) => {   console.info('onSeeking' + e.time) }) .onSeeked((e) => {   console.info('onSeeked' + e.time) }) .onUpdate((e) => {   console.info('onUpdate' + e.time) })      Row() { Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceAround, alignItems:ItemAlign.Start }) {   Button("src")     .onClick(() => {if (this.src == $rawfile('video1.mp4')) {  this.src = $rawfile('video2.mp4')} else {  this.src = $rawfile('video1.mp4')}     })     .margin({bottom:10})   Button("controls")     .onClick(() => {this.controls = !this.controls     })   Button("play")     .onClick(() => {this.myVideoController.start()     })   Button("pause")     .onClick(() => {this.myVideoController.pause()     })   Button("stop")     .onClick(() => {this.myVideoController.stop()     })     .margin({bottom:10})   Button("requestFullscreen")     .onClick(() => {this.myVideoController.requestFullscreen(true)     })   Button("exitFullscreen")     .onClick(() => {this.myVideoController.exitFullscreen()     })   Button("setCurrentTime")     .onClick(() => {this.myVideoController.setCurrentTime(9)     }) }.padding(15)      }    }.width('100%')  }}

示例效果: