短视频盛行的时代，像抖音、快手近几年迅速崛起并狂揽用户，像抖音日活量目前竟能达到惊人的7亿的数量级。从短视频平台、到新闻时报、再到购物商城都少不了的视频播放这一场景。这也是鸿蒙开发不可缺少的一环必须吃透才可以，​今天卤煮分享ArkUI框架的视频播放的上手教程。

一、 ArkUI视频播放简述

Video组件用于播放视频文件并控制其播放状态，常用于短视频和应用内部视频的列表页面。当视频完整出现时会自动播放，用户点击视频区域则会暂停播放，同时显示播放进度条，通过拖动播放进度条指定视频播放到具体位置。具体用法请参考Video组件。

二、项目实战

卤煮狂踩坑系列，由于在开发工具的预览界面就不支持预览视频，如图下，接下来的操作流程是如何成功预览视频并调节相应的视频参数，主要难点在配置和生成证书。

1、资源配置

加载本地视频资源的话，务必按官网这样放置你的视频资源

2、安装本地模拟器

如果有没有安装过模拟器的小伙伴可以按照这套流程安装一下，点击运行-->选择设备，安装包比较大，需要下载一阵子时间。

3、新建模拟器并运行

• 新建模拟器
  点击运行-->选择设备-->右下角新建模拟器，然后添加我们下载的模拟器；

  卤煮这里安装的Mate70 Pro

• 启动模拟器
  新建模拟器后点击对应设备的启动按钮，稍等给2-3分钟，等待模拟器跑起来

• 运行模拟器
  启动需要一点时间，启动起来如下图：
  

  

4.自动生成签名证书

直接点击绿三角运行项目这时候会报错，也就是为什么要执行生成签名证书这一步的原因

• 找到项目结构
  

  

• Signing Configs
  切到如图示这一栏的tab后，编辑器会自动帮我们生成签名，然后点击apply就配置到我们项目里了
  

  

  5、将项目运行到模拟器

• 点击绿三角运行项目
  如果你是建立的空项目小白选手跟着一起操作的话，你的模拟器就是这样的，程序员入门经典话术

• 预览视频

  卤煮这里要跑的内容是预览本地的视频并播放，完美跑通，接下来请各位欣赏卤煮石头人乱杀精彩集锦。

6、代码实现

@Entry
@Component
struct Index {
  private controller: VideoController = new VideoController()
  @State videoSrc: Resource = $rawfile('lol.mp4')
  @State previewUri: Resource = $r('app.media.startIcon')
  aboutToAppear() {
    console.log('组件即将渲染，执行初始化操作');

  }
  build() {
    Row() {
      Column() {
        // 文字描述区域
        Text('英雄联盟石头人狂K头精彩集锦')
          .fontSize(20)
          .fontColor(Color.White)
          .margin({ bottom: 20 })
          .textAlign(TextAlign.Center)
          .width('90%')
          .padding(10)
          .backgroundColor(Color.Black)
        Video({
          src: this.videoSrc,
          previewUri: this.previewUri,
          controller: this.controller,
        }) .muted(false) // 设置是否静音
          .controls(true) // 设置是否显示默认控制条
          .autoPlay(true) // 设置是否自动播放
          .loop(true) // 设置是否循环播放
          .objectFit(ImageFit.Contain) // 设置视频填充模式
        .border({
          width: 2,
          color: 'red'
        })
        .height('40%')
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#F0F0F0')
    }
    .height('100%')
  }
}

三、实战总结

这次在项目里搞鸿蒙 Video 播放功能，没绕多少弯路，但也踩了两个小坑，索性出个踩坑指南，给后面做类似需求的朋友当个参考。

1. 本地视频资源的路径配置按官网的提到的，要配置正确
2. 编辑器的preview不支持视频组件预览，需要安装模拟器
3. 安装模拟器需要先生成签名证书，可以自动生成

四、结语

说真的，不管你是刚接触鸿蒙的新手，还是有经验的开发者，想做视频播放这种功能，跟着文档走基本不会出大问题。代码贴图都很清晰明了，不像某些官网api简直就是天书。
就鸿蒙官网提供的API的细致程度来讲，就把已经鸿蒙开发的 “门槛” 降下来了 —— 不用到处搜零散的教程，不用猜接口怎么用，官方直接把 “标准答案” 摆出来，跟着做就行。
鸿蒙开发的前景一片明朗，还是那句话，早点上车，期待更多志同道合的小伙伴们加入鸿蒙知识共建交流群！！！！！