返回发烧友论坛
发 帖  

[文章]HarmonyOS应用开发-ets-video组件案例

李洋水蛟龙
2022-05-27 14:51:37
阅读量0
HarmonyOS
1
1

说明：
该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
接口
Video(value: {src?: string, currentProgressRate?: number | string, previewUri?: string, controller?: VideoController})


示例代码：
  1. // @ts-nocheck
  2. @Entry
  3. @Component
  4. struct VideoExample {
  5.   @State src: Resource = $rawfile('video1.mp4')
  6.   @State currentProgressRate: number = 1
  7.   @State muted: boolean = false
  8.   @State autoPlay: boolean = false
  9.   @State controls: boolean = true
  10.   @State startStaus: boolean = true
  11.   myVideoController: VideoController = new VideoController()

  13.   build() {
  14.     Column({ space: 10 }) {
  15.       Video({
  16.         src: this.src,
  17.         previewUri: '../../../../resources/rawfile/video1.mp4',
  18.         currentProgressRate: this.currentProgressRate,
  19.         controller: this.myVideoController
  20.       })
  21.         .muted(this.muted)
  22.         .autoPlay(this.autoPlay)
  23.         .controls(this.controls)
  24.         .objectFit(ImageFit.Contain)
  25.         .loop(true)
  26.         .width(320)
  27.         .height(200)
  28.         .onStart(() => {
  29.           console.info('onStart')
  30.         })
  31.         .onPause(() => {
  32.           console.info('onPause')
  33.         })
  34.         .onFinish(() => {
  35.           console.info('onFinish')
  36.         })
  37.         .onError(() => {
  38.           console.info('onError')
  39.         })
  40.         .onFullscreenChange((e) => {
  41.           console.info('onFullscreenChange:' + e.fullscreen)
  42.         })
  43.         .onPrepared((e) => {
  44.           console.info('onPrepared:' + e.duration)
  45.         })
  46.         .onSeeking((e) => {
  47.           console.info('onSeeking' + e.time)
  48.         })
  49.         .onSeeked((e) => {
  50.           console.info('onSeeked' + e.time)
  51.         })
  52.         .onUpdate((e) => {
  53.           console.info('onUpdate' + e.time)
  54.         })

  56.       Row() {
  57.         Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceAround, alignItems:ItemAlign.Start }) {
  58.           Button("src")
  59.             .onClick(() => {
  60.               if (this.src == $rawfile('video1.mp4')) {
  61.                 this.src = $rawfile('video2.mp4')
  62.               } else {
  63.                 this.src = $rawfile('video1.mp4')
  64.               }
  65.             })
  66.             .margin({bottom:10})
  67.           Button("controls")
  68.             .onClick(() => {
  69.               this.controls = !this.controls
  70.             })
  71.           Button("play")
  72.             .onClick(() => {
  73.               this.myVideoController.start()
  74.             })
  75.           Button("pause")
  76.             .onClick(() => {
  77.               this.myVideoController.pause()
  78.             })
  79.           Button("stop")
  80.             .onClick(() => {
  81.               this.myVideoController.stop()
  82.             })
  83.             .margin({bottom:10})
  84.           Button("requestFullscreen")
  85.             .onClick(() => {
  86.               this.myVideoController.requestFullscreen(true)
  87.             })
  88.           Button("exitFullscreen")
  89.             .onClick(() => {
  90.               this.myVideoController.exitFullscreen()
  91.             })
  92.           Button("setCurrentTime")
  93.             .onClick(() => {
  94.               this.myVideoController.setCurrentTime(9)
  95.             })
  96.         }.padding(15)
  97.       }
  98.     }.width('100%')
  99.   }
  100. }
复制代码
效果展示：

附件：[attach]1177581[/attach]
举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友