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

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 中轻松嵌入丰富的多媒体内容,为用户提供视觉和听觉的体验。使用时请注意不同平台可能存在的兼容性问题,并确保测试不同环境下的表现。

相关推荐
天才熊猫君7 分钟前
容器与图片同步旋转:获取真实占位尺寸方案
前端·javascript·vue.js
英俊潇洒美少年16 分钟前
Vue2业务组件库生产级最佳实践:零依赖+依赖注入方案
前端·vue.js·重构
一條狗26 分钟前
学习日报 20260423|Vue SPA 部署到 Spring Boot:404/500 错误排查与解决方案1
vue.js·spring boot·学习
英俊潇洒美少年1 小时前
Vue2 高德地图地址选择器完整实战(组件抽离+高并发优化+@amap/amap-jsapi-loader最佳实践)
前端·javascript·vue.js
晴天丨1 小时前
🛡️ Vue 3 错误处理完全指南:全局异常捕获、前端监控、用户反馈
前端·vue.js
河阿里1 小时前
Vue3:全流程开发
vue.js
帅帅哥的兜兜1 小时前
猪齿鱼:实现table分页勾选
前端·javascript·vue.js
|晴 天|2 小时前
Vue 3 项目错误处理实战:Vue ErrorHandler、Promise 监控、用户友好提示
前端·javascript·vue.js
Cobyte2 小时前
8.响应式系统比对:手写 SolidJS 响应式系统
前端·javascript·vue.js
火乐暖阳851052 小时前
Vue3+Node.js
vue.js·node.js·pnpm·koa2·myslq2