一、视频Video

功能：本地 / 网络视频播放，支持进度条、暂停 / 播放、全屏、倍速

1.本地视频

使用组件前要先将视频添加到entry>src>main>resources>rawfile，且只能在设备里查看，预览是加载不了视频的

@Entry
@Component
struct Index {
  private controller: VideoController = new VideoController()
  private previewUrl: Resource = $r("app.media.banner0"); #视频封面
  build() {
    Column({space:15}) {
      Text("本地视频播放器")
        .fontSize(24)
        .width('100%')
        .textAlign(TextAlign.Center)

      Video({
        src: $rawfile("output.mp4"),  #视频名称
        controller: this.controller,
        previewUri: this.previewUrl
      })
        .width('100%')
        .height(220)
        .controls(false) #是否显示系统自带播放控制面板
        .autoPlay(false) #是否显示系统自带播放控制面板
        .loop(true) #视频播放完毕后是否循环重播
        .muted(false) #是否静音播放
        .objectFit(ImageFit.Contain) #视频画面适配容器的缩放规则
    
    }
    .padding(15)
  }
}

如果出现视频不能播放且视频时长为0的情况，大概率是视频编码不对，要进行对视频进行转码，转码需要使用ffmpeg.exe并配置环境变量

1. 下载 FFmpeg 1. 打开官网：https://ffmpeg.org/download.html

2. Windows 板块点击 Windows builds from gyan.dev

3. 下载 ffmpeg-release-full.7z 完整压缩包

4. 解压并配置环境变量 1. 将压缩包解压到无中文路径，例如 D:\ffmpeg

5. 进入文件夹，复制 D:\ffmpeg\bin 路径

6. 右键此电脑 → 属性 → 高级系统设置 → 环境变量

7. 在系统变量找到 Path，双击编辑 → 新建，粘贴上面的 bin 路径 

8. 全部窗口点确定保存，完全关闭当前 CMD 再重新打开 6. 新 CMD 输入 ffmpeg -version，输出版本号即安装成功，再执行你的转码命令

转码命令：

.\ffmpeg.exe -i npy.mp4 -c:v libx264 -c:a aac output.mp4
                原视频名                      转换后的视频名

2.网络视频

使用前要找好视频对应的网址

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text("网络视频播放")
        .fontSize(22)
        .margin({ bottom: 10 })

      Video("https://xxx.mp4")  #替换为真实可访问的视频网络地址
        .width("100%")
        .height(220)
        .controls(true)         #显示播放控制器
        .autoPlay(false)        #不自动播放
        .loop(false)            #不循环
        .muted(false)           #开启声音
        .objectFit(ImageFit.Contain)
    }
    .padding(15)
  }
}

二、开关Toggle

1. 组件作用

Toggle是布尔切换组件，只有两种状态：开启 / 关闭。

2. 三种形态 type 枚举

1. ToggleType.Switch：横向滑动开关（设置页最常用）
2. ToggleType.Checkbox：方形复选框，支持多选场景
3. ToggleType.Button：按钮样式切换，选中填充底色

3. 基础构造函数语法

Toggle({
  type: ToggleType.Switch, // 切换类型
  isOn: false // 默认开关状态 true开启 / false关闭
})

4.最简入门示例（双向绑定标准写法）

开发中必须搭配@State装饰器实现状态同步，点击开关自动更新变量。

@Entry
@Component
struct ToggleDemo {
  // 绑定开关状态
  @State isNight: boolean = false

  build() {
    Column({ space: 20 }) {
      Row() {
        Text("夜间模式")
          .fontSize(22)
        Toggle({ type: ToggleType.Switch, isOn: this.isNight })
          .onChange((status: boolean) => {
            this.isNight = status
          })
      }
      .width("100%")
      .justifyContent(FlexAlign.SpaceBetween)
      .padding(15)

      Text(`当前状态：${this.isNight ? "已开启" : "已关闭"}`)
        .fontSize(20)
    }
    .width("100%")
    .height("100%")
    .padding(20)
  }
}

5.Toggle 全部核心样式

Toggle({ type: ToggleType.Switch, isOn: this.isOpen })
  .width(60) // 控件宽度
  .height(30) // 控件高度
  .selectedColor("#007DFF") // 开启状态底色
  .unselectedColor("#cccccc") // 关闭状态底色
  .borderColor("#999999") // 边框颜色
  .margin({ top: 10 }) // 外边距
  .padding(5) // 内边距
  .onChange((val: boolean) => {
    // 状态切换逻辑
  })