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

相关推荐
持续前行6 小时前
vscode 中找settings.json 配置
前端·javascript·vue.js
JosieBook6 小时前
【Vue】11 Vue技术——Vue 中的事件处理详解
前端·javascript·vue.js
安逸点6 小时前
Vue项目中使用xlsx库解析Excel文件
vue.js
一只小阿乐7 小时前
vue 改变查询参数的值
前端·javascript·vue.js·路由·router·网文·未花中文网
小酒星小杜7 小时前
在AI时代下,技术人应该学会构建自己的反Demo地狱系统
前端·vue.js·ai编程
Code知行合壹8 小时前
Pinia入门
vue.js
今天也要晒太阳4738 小时前
element表单和vxe表单联动校验的实现
vue.js
依赖_赖9 小时前
前端实现token无感刷新
前端·javascript·vue.js
hhcccchh10 小时前
学习vue第十三天 Vue3组件深入指南:组件的艺术与科学
javascript·vue.js·学习
zhengxianyi51510 小时前
ruoyi-vue-pro本地环境搭建(超级详细,带异常处理)
前端·vue.js·前后端分离·ruoyi-vue-pro