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

鸿蒙开发之南拳北腿

发布于 2025-4-14 14:16

1.6w浏览

0收藏

加载失败

调用示例一：极简调用

1.将视频播放组件拖拽到排版区
2.设置视频地址
3.保存设置
纯血鸿蒙组件库AUI：视频播放组件、音频播放组件-鸿蒙开发者社区

调用示例二：更多属性

1.将视频播放组件拖拽到排版区
可设置视频宽度
2.设置视频地址，视频封面，宽高比，选择自动播放，选择循环播放
3.保存设置
纯血鸿蒙组件库AUI：视频播放组件、音频播放组件-鸿蒙开发者社区
生成纯血鸿蒙代码：

   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
              })
            }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

以下分别为视频播放组件在平板、折叠屏、手机，以及在浅色模式和深色模式下的表现：
纯血鸿蒙组件库AUI：视频播放组件、音频播放组件-鸿蒙开发者社区

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

/**
 * 【视频播放组件】
 * 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
              })
            }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.

音频播放组件

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

调用示例一：极简调用

1.将音频组件拖拽到页面排版区
2.设置音频地址
3.保存设置
纯血鸿蒙组件库AUI：视频播放组件、音频播放组件-鸿蒙开发者社区

调用示例二：更多属性

1.将音频组件拖拽到页面排版区，可选择播放条宽度
2.设置音频地址，选择自动播放，选择循环播放
3.保存设置
纯血鸿蒙组件库AUI：视频播放组件、音频播放组件-鸿蒙开发者社区
生成纯血鸿蒙代码：

 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
              })
            }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

以下分别为音频播放组件在平板、折叠屏、手机，以及在浅色模式和深色模式下的表现：
纯血鸿蒙组件库AUI：视频播放组件、音频播放组件-鸿蒙开发者社区

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

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