UniApp 内置组件：`<image>`, `<video>`, `<audio>` 详解

UniApp 提供了一系列内置组件用于处理媒体内容，其中 <image>, <video>, <audio> 是最常用的三个组件，分别用于图片的展示，视频的播放，以及音频的播放。

<image> 组件

<image> 组件用于展示图片，它支持 JPG、PNG、SVG 等格式。

示例

<image src="/static/logo.png" mode="aspectFill"></image>

基础属性

• src：图片资源地址，支持本地路径和网络图片路径。
• mode：图片裁剪、缩放的模式。

API

没有特殊 API，主要通过属性控制。

事件

• bindload：图片加载完成时触发。
• binderror：图片加载失败时触发。

<video> 组件

<video> 组件用于在页面中嵌入视频播放。

示例

<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls="true"></video>

基础属性

• src：要播放视频的资源地址。
• controls：是否显示默认播放控件。

API

<video> 提供了一系列 API 来控制视频播放，例如播放、暂停等。

事件

• bindplay：当开始/继续播放时触发。
• bindpause：当暂停时触发。

<audio> 组件

<audio> 组件用于控制音频的播放。

示例

<audio src="http://www.example.com/audio.mp3" controls="true"></audio>

基础属性

• src：音频文件的资源地址。
• controls：是否显示音频控件。

API

和 <video> 类似，<audio> 也有控制播放的 API。

事件

• bindplay：当音频开始播放时触发。
• bindpause：当音频暂停时触发。

---

参考链接

• UniApp 官方文档 - image
• UniApp 官方文档 - video
• UniApp 官方文档 - audio

这些媒体组件允许开发者在 UniApp 中轻松嵌入丰富的多媒体内容，为用户提供视觉和听觉的体验。使用时请注意不同平台可能存在的兼容性问题，并确保测试不同环境下的表现。