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

相关推荐
工业互联网专业11 分钟前
基于springboot+vue的机场乘客服务系统
java·vue.js·spring boot·毕业设计·源码·课程设计·机场乘客服务系统
inksci30 分钟前
Vue 3 打开 el-dialog 时使 el-input 获取焦点
前端·javascript·vue.js
绝美焦栖3 小时前
vue复杂数据类型多层嵌套的监听
前端·javascript·vue.js
GoodStudyAndDayDayUp3 小时前
gitlab+portainer 实现Ruoyi Vue后端CI/CD
vue.js·ci/cd·gitlab
.生产的驴4 小时前
Vue3 加快页面加载速度 使用CDN外部库的加载 提升页面打开速度 服务器分发
运维·服务器·前端·vue.js·分布式·前端框架·vue
我是Superman丶7 小时前
【技巧】前端VUE用中文方法名调用没效果的问题
前端·javascript·vue.js
斯~内克7 小时前
Vue 3 中 watch 的使用与深入理解
前端·javascript·vue.js
松树戈12 小时前
plus-ui&RuoYi-Vue-Plus 基于pgSql本地运行实践
前端·vue.js·spring boot·ui
Stella252114 小时前
【Vue】CSS3实现关键帧动画
前端·vue.js·css3
素雪风华14 小时前
构建RAG混合开发---PythonAI+JavaEE+Vue.js前端的实践
java·vue.js·python·ai·语言模型·llms·qwen千问大模型