0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

HarmonyOS应用开发例子-ets-video组件案例

鸿蒙时代 来源:鸿蒙时代 作者:鸿蒙时代 2022-05-26 14:13 次阅读
HarmonyOS应用开发-ets-video组件案例-开源基础软件社区

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

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

HarmonyOS应用开发-ets-video组件案例-开源基础软件社区HarmonyOS应用开发-ets-video组件案例-开源基础软件社区HarmonyOS应用开发-ets-video组件案例-开源基础软件社区


HarmonyOS应用开发-ets-video组件案例-开源基础软件社区

示例代码:

// @ts-nocheck
@Entry
@Component
struct 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%')
  }
}
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • Video
    +关注

    关注

    0

    文章

    192

    浏览量

    44857
  • 组件
    +关注

    关注

    1

    文章

    336

    浏览量

    17582
  • HarmonyOS
    +关注

    关注

    79

    文章

    1814

    浏览量

    29257
收藏 人收藏

    评论

    相关推荐

    基于eTS的HamronyOS应用开发

    随着HarmonyOS 3.0 Beta版的发布,API Version 8新增了大批JS/eTS API接口,相信很多开发者已经迫不及待想体验基于eTS的HamronyOS应用
    的头像 发表于 07-15 09:20 1720次阅读
    基于<b class='flag-5'>eTS</b>的HamronyOS应用<b class='flag-5'>开发</b>

    鸿蒙ArkUI开发-Video组件的使用

    以视频功能为例,在应用开发过程中,我们需要通过ArkUI提供的Video组件为应用增加基础的视频播放功能。借助Video组件,我们可以实现视
    的头像 发表于 01-23 16:59 610次阅读
    鸿蒙ArkUI<b class='flag-5'>开发</b>-<b class='flag-5'>Video</b><b class='flag-5'>组件</b>的使用

    HarmonyOS应用开发-eTS-Navigator组件练习

    说明:路由容器组件,提供路由跳转能力。接口:Navigator(value?: {target: string, type?: NavigationType})接口参数:属性:案例:创建新的ets
    发表于 12-21 09:36

    HarmonyOS应用开发-eTS文件说明

    1. 目录结构FA应用的ets模块(entry/src/main)的典型开发目录结构如下:目录结构中文件分类如下:·.ets结尾的ETS(Extended TypeScript)文件,
    发表于 12-23 10:40

    HarmonyOS应用开发资料(Svg组件

    1、HarmonyOS应用开发-Svg组件circle  该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。2、
    发表于 03-17 14:49

    HarmonyOS应用开发资料(eTS文件/资源)

    1、HarmonyOS应用开发-eTS文件说明1. 目录结构FA应用的ets模块(entry/src/main)的典型开发目录结构如下:2、
    发表于 03-17 15:04

    100行代码实现HarmonyOS“画图”应用,eTS开发走起!

    本期我们给大家带来的是“画图”应用开发者Rick的分享,希望能给你的HarmonyOS开发之旅带来启发~ 介绍 2021年的华为开发者大会(HDC2021)上,
    发表于 03-30 14:28

    基于HarmonyOS ets开发的简易视频播放器

    。使用组件,具体细节和更详细的属性,读者自己在学习中摸索。通过相信本次的学习,你能有所收获。希望视频能帮助你快速了解Harmony的ET,开发的播放器制作学习。本篇最后会贴上参考原文链接。最初的演讲列表
    发表于 04-18 10:41

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

    说明:该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。接口Video(value: {src?: string
    发表于 05-26 10:37

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

    说明:该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。接口Video(value: {src?: string
    发表于 05-27 14:51

    想学习eTS开发?教你开发一款IQ-EQ测试应用

    开发者Mack基于HarmonyOS的ArkUI框架开发的IQ- EQ测试应用。此应用采用eTS语言开发,包含启动页面、测试入口页面、答题页
    发表于 06-23 12:01

    基于eTS高效开发HarmonyOS课程类应用

    随着HarmonyOS 3.0 Beta版的发布,API Version 8新增了大批JS/eTS API接口,相信很多开发者已经迫不及待想体验基于eTS的HamronyOS应用
    发表于 07-15 11:33

    HarmonyOS/OpenHarmony应用开发-Web组件开发体验

    ;) }}}*附件:HarmonyOSOpenHarmony应用开发-Web组件开发体验.docx示例效果:参考文档:https
    发表于 12-12 15:14

    基于ETS开发范式制作Loading组件

    最近刚接触基于 OpenHarmony 开源框架的应用开发,特别是基于 JS/ETS 开发范式。
    的头像 发表于 04-12 08:56 1112次阅读

    OpenHarmony应用开发ETS开发方式Image组件

    今天带大家了解ETS开发方式中的Image组件
    的头像 发表于 07-03 12:06 3062次阅读
    OpenHarmony应用<b class='flag-5'>开发</b>之<b class='flag-5'>ETS</b><b class='flag-5'>开发</b>方式Image<b class='flag-5'>组件</b>