微信小程序中的媒体组件包括 audio、image、video 等，用于展示和播放音频、图片、视频等多媒体内容。以下是一些媒体组件的基本用法：

audio 组件

1. 播放音频：
   <audio src="http://example.com/audio.mp3" controls></audio>
   使用 src 属性设置音频文件的地址，并通过 controls 属性显示播放控制器。

2. 自定义控制器样式：
   <audio src="http://example.com/audio.mp3" controls show-play-btn show-pause-btn></audio>
   使用 show-play-btn 和 show-pause-btn 属性显示自定义样式的播放按钮。

3. 监听播放状态：
   <audio src="http://example.com/audio.mp3" bindplay="onPlay" bindpause="onPause"></audio>
   通过 bindplay 和 bindpause 绑定播放和暂停的事件，然后在对应的 .js 文件中定义相应的函数。

image 组件

1. 显示图片：
   <image src="http://example.com/image.jpg" mode="aspectFit"></image>
   使用 src 属性设置图片地址，通过 mode 属性设置图片展示模式。

2. 点击事件：
   <image src="http://example.com/image.jpg" bindtap="onImageTap"></image>
   通过 bindtap 绑定图片点击事件，在对应的 .js 文件中定义相应的函数。

video 组件

1. 播放视频：
   <video src="http://example.com/video.mp4" controls></video>
   使用 src 属性设置视频文件的地址，并通过 controls 属性显示播放控制器。

2. 自定义控制器样式：
   <video src="http://example.com/video.mp4" controls show-play-btn show-center-play-btn></video>
   使用 show-play-btn 和 show-center-play-btn 属性显示自定义样式的播放按钮。

3. 监听播放状态：
   <video src="http://example.com/video.mp4" bindplay="onPlay" bindpause="onPause"></video>
   通过 bindplay 和 bindpause 绑定播放和暂停的事件，然后在对应的 .js 文件中定义相应的函数。

这些是媒体组件的一些基本用法。根据实际需求，你还可以进一步了解媒体组件的其他属性和事件，以满足不同场景的需求。在使用媒体组件时，记得关注小程序的基础库版本，确保你使用的组件和属性在当前基础库版本中是支持的。


转载请注明出处：http://www.zyzy.cn/article/detail/816/微信小程序