uni-app 多媒体组件

1.audio：音频

属性说明

属性名	类型	默认值	说明
id	String		audio 组件的唯一标识符
src	String		要播放音频的资源地址
loop	Boolean	false	是否循环播放
controls	Boolean	false	是否显示默认控件
poster	String		默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效
name	String	未知音频	默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效
author	String	未知作者	默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效
@error	EventHandle		当发生错误时触发 error 事件，detail = {errMsg: MediaError.code}
@play	EventHandle		当开始/继续播放时触发play事件
@pause	EventHandle		当暂停播放时触发 pause 事件
@timeupdate	EventHandle		当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}
@ended	EventHandle		当播放到末尾时触发 ended 事件

2.image：图片

 

属性名	类型	默认值	说明	平台差异说明
src	String		图片资源地址
mode	String	'scaleToFill'	图片裁剪、缩放的模式
lazy-load	Boolean	false	图片懒加载。只针对page与scroll-view下的image有效	微信小程序、App、百度小程序、字节跳动小程序
fade-show	Boolean	true	图片显示动画效果	仅App-nvue 2.3.4+ Android有效
webp	boolean	false	默认不解析 webP 格式，只支持网络资源	微信小程序2.9.0
show-menu-by-longpress	boolean	false	开启长按图片显示识别小程序码菜单	微信小程序2.7.0
draggable	boolean	true	鼠标长按是否能拖动图片	仅 H5 平台 3.1.1+ 有效
@error	HandleEvent		当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}
@load	HandleEvent		当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

3.video：视频播放组件

属性说明

属性名	类型	默认值	说明	平台差异说明
src	String		要播放视频的资源地址
autoplay	Boolean	false	是否自动播放
loop	Boolean	false	是否循环播放
muted	Boolean	false	是否静音播放	字节跳动小程序不支持
initial-time	Number		指定视频初始播放位置，单位为秒（s）。	字节跳动小程序不支持
duration	Number		指定视频时长，单位为秒（s）。	字节跳动小程序不支持
controls	Boolean	true	是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
danmu-list	Object Array		弹幕列表	字节跳动小程序不支持
danmu-btn	Boolean	false	是否显示弹幕按钮，只在初始化时有效，不能动态变更	字节跳动小程序不支持
enable-danmu	Boolean	false	是否展示弹幕，只在初始化时有效，不能动态变更	字节跳动小程序不支持
page-gesture	Boolean	false	在非全屏模式下，是否开启亮度与音量调节手势	微信小程序、H5
direction	Number		设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度）	H5和字节跳动小程序不支持
show-progress	Boolean	true	若不设置，宽度大于240时才会显示	字节跳动小程序不支持
show-fullscreen-btn	Boolean	true	是否显示全屏按钮
show-play-btn	Boolean	true	是否显示视频底部控制栏的播放按钮
show-center-play-btn	Boolean	true	是否显示视频中间的播放按钮	字节跳动小程序不支持
show-loading	Boolean	true	是否显示loading控件	仅app 2.8.12+
enable-progress-gesture	Boolean	true	是否开启控制进度的手势	字节跳动小程序不支持
object-fit	String	contain	当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖	微信小程序、字节跳动小程序、H5
poster	String		视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效
show-mute-btn	Boolean	false	是否显示静音按钮	微信小程序
title	String		视频的标题，全屏时在顶部展示	微信小程序
play-btn-position	String	bottom	播放按钮的位置	微信小程序、字节跳动小程序
enable-play-gesture	Boolean	false	是否开启播放手势，即双击切换播放/暂停	微信小程序
auto-pause-if-navigate	Boolean	true	当跳转到其它小程序页面时，是否自动暂停本页面的视频	微信小程序
auto-pause-if-open-native	Boolean	true	当跳转到其它微信原生页面时，是否自动暂停本页面的视频	微信小程序
vslide-gesture	Boolean	false	在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture）	微信小程序
vslide-gesture-in-fullscreen	Boolean	true	在全屏模式下，是否开启亮度与音量调节手势	微信小程序
ad-unit-id	String		视频前贴广告单元ID，更多详情可参考开放能力视频前贴广告	微信小程序
poster-for-crawler	String		用于给搜索等场景作为视频封面展示，建议使用无播放 icon 的视频封面图，只支持网络地址	微信小程序
codec	String	hardware	解码器选择，hardware：硬解码（硬解码可以增加解码算力，提高视频清晰度。部分硬件可能存在兼容性问题）；software：ffmpeg 软解码；	App 3.1.0+
http-cache	Boolean	true	是否对 http、https 视频源开启本地缓存。缓存策略:开启了此开关的视频源，在视频播放时会在本地保存缓存文件，如果本地缓存池已超过100M，在进行缓存前会清空之前的缓存	App 3.1.0+
play-strategy	Number	0	播放策略，0：默认策略；1：平滑播放模式（开启了此模式的视频源 会加大缓冲力度，采用open sl解码音频，避免音视频脱轨的问题，可能会降低首屏展现速度。 适用于在线播放高清视频的场景。）；	App 3.1.0+
@play	EventHandle		当开始/继续播放时触发play事件	字节跳动小程序不支持
@pause	EventHandle		当暂停播放时触发 pause 事件	字节跳动小程序不支持
@ended	EventHandle		当播放到末尾时触发 ended 事件	字节跳动小程序不支持
@timeupdate	EventHandle		播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次	字节跳动小程序不支持
@fullscreenchange	EventHandle		当视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction取为 vertical 或 horizontal	字节跳动小程序不支持
@waiting	EventHandle		视频出现缓冲时触发	字节跳动小程序不支持
@error	EventHandle		视频播放出错时触发	字节跳动小程序不支持
@progress	EventHandle		加载进度变化时触发，只支持一段加载。event.detail = {buffered}，百分比	微信小程序、H5
@loadedmetadata	EventHandle		视频元数据加载完成时触发。event.detail = {width, height, duration}	微信小程序、H5
@fullscreenclick	EventHandle		视频播放全屏播放时点击事件。event.detail = { screenX:"Number类型，点击点相对于屏幕左侧边缘的 X 轴坐标", screenY:"Number类型，点击点相对于屏幕顶部边缘的 Y 轴坐标", screenWidth:"Number类型，屏幕总宽度", screenHeight:"Number类型，屏幕总高度"}	App 2.6.3+
@controlstoggle	EventHandle		切换 controls 显示隐藏时触发。event.detail = {show}	微信小程序2.9.5