纯血鸿蒙组件库AUI：视频播放组件、音频播放组件 原创

摘要：
视频播放组件(A_Video)：支持设置视频的数据源、视频封面，宽高比、是否自动播放、是否循环播放。

调用示例一：极简调用

1.将视频播放组件拖拽到排版区
2.设置视频地址
3.保存设置

调用示例二：更多属性

1.将视频播放组件拖拽到排版区
可设置视频宽度
2.设置视频地址，视频封面，宽高比，选择自动播放，选择循环播放
3.保存设置

生成纯血鸿蒙代码：

   GridCol({ span: 12 }) {
              A_Video({
                src: 'https://cdn.aigcoder.com/sample/Video/aigcoder.mp4',
              })
            }

            GridCol({ span: 4 }) {
              A_Video({
                src: 'https://cdn.aigcoder.com/sample/Video/aigcoder2.mp4',
                poster: 'https://cdn.aigcoder.com/sample/Video/poster2.jpg',
                radio: 9/16,
                autoPlay: true,
                loop: true
              })
            }

以下分别为视频播放组件在平板、折叠屏、手机，以及在浅色模式和深色模式下的表现：


视频播放组件各属性字段解释如下：

/**
 * 【视频播放组件】
 * src：视频的数据源(支持本地视频和网络视频，本地视频时请将视频放在rawfile目录中)
 * poster：视频封面(支持本地封面和网络封面，本地封面时请将封面放在media目录中)
 * radio：宽高比(默认横屏"16/9",竖屏可设置"9/16"等)
 * autoPlay：自动播放
 * loop：循环播放
 */
@Component
export struct A_Video {
  @Prop src: string
  @Prop poster?: string
  @Prop radio?: number = 16/9
  @Prop autoPlay?: boolean = false
  @Prop loop?: boolean = false
```[请添加链接描述](https://www.aigcoder.com/article/15)


### 调用示例二：更多属性
1.将音频播放组件拖拽到排版区
可以选择播放条宽度
2.设置音频地址，选择自动播放，选择循环播放
3.保存设置
生成纯血鸿蒙代码：
![3.png](https://dl-harmonyos.51cto.com/images/202504/2864cf68281da710dbd0037489ff3412505b16.png?x-oss-process=image/resize,w_820,h_2361)
```javascript
  GridCol({ span: 12 }) {
              A_Audio({
                src: 'https://cdn.aigcoder.com/sample/Audio/aigcoder.MP3',
              })
            }

            GridCol({ span: 12 }) {
              A_Audio({
                src: 'https://cdn.aigcoder.com/sample/Audio/rulai.MP3',
                autoPlay: true,
                loop: true
              })
            }

音频播放组件

摘要：
音频播放组件(A_Audio)：可设置音频的数据源、是否自动播放、是否循环播放，可设置音量。

调用示例一：极简调用

1.将音频组件拖拽到页面排版区
2.设置音频地址
3.保存设置

调用示例二：更多属性

1.将音频组件拖拽到页面排版区，可选择播放条宽度
2.设置音频地址，选择自动播放，选择循环播放
3.保存设置

生成纯血鸿蒙代码：

 GridCol({ span: 12 }) {
              A_Audio({
                src: 'https://cdn.aigcoder.com/sample/Audio/aigcoder.MP3',
              })
            }

            GridCol({ span: 12 }) {
              A_Audio({
                src: 'https://cdn.aigcoder.com/sample/Audio/rulai.MP3',
                autoPlay: true,
                loop: true
              })
            }

以下分别为音频播放组件在平板、折叠屏、手机，以及在浅色模式和深色模式下的表现：


音频播放组件各属性字段解释如下：

/**
 * 【音频播放组件】
 * src：音频的数据源(支持本地音频和网络音频，本地音频时请将音频放在rawfile目录中)
 * autoPlay：自动播放
 * loop：循环播放
 */
@Component
export struct A_Audio {
  @Prop @Watch('onSrcUpdated') src: string
  @Prop autoPlay?: boolean = false
  @Prop loop?: boolean = false