UniApp 提供了一系列内置组件用于处理媒体内容,其中 <image>
, <video>
, <audio>
是最常用的三个组件,分别用于图片的展示,视频的播放,以及音频的播放。
<image>
组件
<image>
组件用于展示图片,它支持 JPG、PNG、SVG 等格式。
示例
html
<image src="/static/logo.png" mode="aspectFill"></image>
基础属性
src
:图片资源地址,支持本地路径和网络图片路径。mode
:图片裁剪、缩放的模式。
API
没有特殊 API,主要通过属性控制。
事件
bindload
:图片加载完成时触发。binderror
:图片加载失败时触发。
<video>
组件
<video>
组件用于在页面中嵌入视频播放。
示例
html
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls="true"></video>
基础属性
src
:要播放视频的资源地址。controls
:是否显示默认播放控件。
API
<video>
提供了一系列 API 来控制视频播放,例如播放、暂停等。
事件
bindplay
:当开始/继续播放时触发。bindpause
:当暂停时触发。
<audio>
组件
<audio>
组件用于控制音频的播放。
示例
html
<audio src="http://www.example.com/audio.mp3" controls="true"></audio>
基础属性
src
:音频文件的资源地址。controls
:是否显示音频控件。
API
和 <video>
类似,<audio>
也有控制播放的 API。
事件
bindplay
:当音频开始播放时触发。bindpause
:当音频暂停时触发。
参考链接
这些媒体组件允许开发者在 UniApp 中轻松嵌入丰富的多媒体内容,为用户提供视觉和听觉的体验。使用时请注意不同平台可能存在的兼容性问题,并确保测试不同环境下的表现。