uni-app【多媒体API】

文章目录

  • 多媒体API
    • 一、图片
      • uni.chooseImage(OBJECT)
      • uni.previewImage(OBJECT) @unipreviewimageobject
      • uni.closePreviewImage(OBJECT)
      • uni.getImageInfo(OBJECT)
      • uni.saveImageToPhotosAlbum(OBJECT)
      • uni.compressImage(OBJECT)
    • 二、文件
      • uni.chooseFile(OBJECT)
      • wx.chooseMessageFile(OBJECT)
    • 三、录音管理
      • uni.getRecorderManager()
    • 四、背景音频播放管理
      • uni.getBackgroundAudioManager()
    • 五、音频组件控制
      • uni.createInnerAudioContext()
    • 六、视频
      • uni.chooseVideo(OBJECT)
      • uni.chooseMedia(OBJECT)
      • uni.saveVideoToPhotosAlbum(OBJECT)
      • uni.getVideoInfo(OBJECT)
      • uni.compressVideo(OBJECT)
      • uni.openVideoEditor(OBJECT)
    • 七、视频组件控制
      • uni.createVideoContext(videoId, this)
    • 八、相机组件控制
      • uni.createCameraContext()
      • cameraContext.takePhoto
      • cameraContext.setZoom
      • cameraContext.startRecord
      • cameraContext.stopRecord
    • 九、直播组件控制
      • uni.createLivePlayerContext(livePlayerId, this)
      • uni.createLivePusherContext(livePusherId, this)
        • livePusherContext
        • start(OBJECT)
        • pause(OBJECT)
        • resume(OBJECT)
        • stop(OBJECT)
        • switchCamera(OBJECT)
        • snapshot(OBJECT)
        • startPreview(OBJECT)
        • stopPreview(OBJECT)
    • 十、富文本
      • editorContext
      • editorContext.format(name, value)
      • editorContext.insertDivider(OBJECT)
      • editorContext.insertImage(OBJECT)
      • editorContext.insertText(OBJECT)
      • editorContext.setContents(OBJECT)
      • editorContext.getContents(OBJECT)
      • editorContext.clear(OBJECT)
      • editorContext.removeFormat(OBJECT)
      • editorContext.undo(OBJECT)
      • editorContext.redo(OBJECT)
      • editorContext.blur(OBJECT)1
        • editorContext.scrollIntoView(OBJECT)
      • editorContext.getSelectionText(OBJECT)
    • 十一、音视频合成
      • uni.createMediaContainer()
        • MediaContainer.addTrack(track)
        • MediaContainer.destroy()
        • MediaContainer.export()
        • MediaContainer.extractDataSource(object)
        • MediaContainer.removeTrack(track)
      • MediaTrack

多媒体API

一、图片

uni.chooseImage(OBJECT)

从本地相册选择图片或使用相机拍照。
App端如需要更丰富的相机拍照API(如直接调用前置摄像头),参考plus.camera

OBJECT 参数说明

参数名 类型 必填 说明 平台差异说明
count Number 最多可以选择的图片张数,默认9 见下方说明
sizeTyPE Array original 原图,compressed 压缩图,默认二者都有 App、微信小程序、支付宝小程序、百度小程序
extension Array 根据文件拓展名过滤,每一项都不能是空字符串。默认不过滤。 H5(HBuilder X2.9.9+)
sourceType Array album 从相册选图,camera 使用相机,默认二者都有。如需直接开相机或直接选相册,请只使用一个选项
crop Object 图像裁剪参数,设置后 sizeType 失效 App 3.1.19+
success Function 成功则返回图片的本地文件路径列表 tempFilePaths
fail Function 接口调用失败的回调函数 小程序、App
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

crop 参数说明

参数名 类型 必填 说明 平台差异说明
quality Number 取值范围为1-100,数值越小,质量越低(仅对jpg格式有效)。默认值为80。
width Number 裁剪的宽度,单位为px,用于计算裁剪宽高比。
height Number 裁剪的高度,单位为px,用于计算裁剪宽高比。
resize Boolean 是否将width和height作为裁剪保存图片真实的像素值。默认值为true。注F1a;设置为false时在裁剪编辑界面显示图片的像素值,设置为true时不显示

Tips

  • count 值在 H5 平台的表现,基于浏览器本身的规范。目前测试的结果来看,只能限制单选/多选,并不能限制数量。并且,在实际的手机浏览器很少有能够支持多选的。
  • sourceType 在H5端对应inputcapture属性,设置为['album']无效,依然可以使用相机。
  • 可以通过用户授权API来判断用户是否给应用授予相册或摄像头的访问权限
  • App端如需选择非媒体文件,可在插件市场搜索文件选择,其中AndROId端可以使用Native.js,无需原生插件,而iOS端需要原生插件。
  • 选择照片大多为了上传,uni ui封装了更完善的uni-file-picker组件,文件选择、上传到unicloud的免费存储和cdn中,一站式集成。强烈推荐使用。
注:文件的临时路径,在应用本次启动期间可以正常使用,如需持久保存,需在主动调用 uni.saveFile,在应用下次启动时才能访问得到。

success 返回参数说明

参数 类型 说明
tempFilePaths Array 图片的本地文件路径列表
tempFiles Array、Array 图片的本地文件列表,每一项是一个 File 对象

File 对象结构如下

参数 类型 说明
path String 本地文件路径
size Number 本地文件大小,单位:B
name String 包含扩展名的文件名称,仅H5支持
type String 文件类型,仅H5支持

示例

uni.chooseImage({
	count: 6, //默认9
	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
	sourceType: ['album'], //从相册选择
	success: function (res) {
		console.LOG(JSON.stringify(res.tempFilePaths));
	}
});

uni.previewImage(OBJECT) @unipreviewimageobject

预览图片。

OBJECT 参数说明

参数名 类型 必填 说明 平台差异说明
current String/Number 详见下方说明 详见下方说明
urls Array 需要预览的图片链接列表
indicator String 图片指示器样式,可取值:“default” - 底部圆点指示器; “number” - 顶部数字指示器; “none” - 不显示指示器。 App
loop Boolean 是否可循环预览,默认值为 false
longPressActions Object 长按图片显示操作菜单,如不填默认为保存相册 App 1.9.5+
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

current 参数说明

1.9.5+ 支持传图片在 urls 中的索引值

current 为当前显示图片的链接/索引值,不填或填写的值无效则为 urls 的第一张。App平台在 1.9.5至1.9.8之间,current为必填。不填会报错
注意,当 urls 中有重复的图片链接时:

  • 传链接,预览结果始终显示该链接在 urls 中第一次出现的位置。
  • 传索引值,在微信/百度/字节跳动小程序平台,会过滤掉传入的 urls 中该索引值之前与其对应图片链接重复的值。其它平台会保留原始的 urls 不会做去重处理。
举例说明: 一组图片 [A, B1, C, B2, D],其中 B1 与 B2 的图片链接是一样的。
  • 传 B2 的链接,预览的结果是 B1,前一张是 A,下一张是 C。
  • 传 B2 的索引值 3,预览的结果是 B2,前一张是 C,下一张是 D。此时在微信/百度/字节跳动小程序平台,最终传入的 urls 是 [A, C, B2, D],过滤掉了与 B2 重复的 B1。

longPressActions 参数说明

参数 类型 必填 说明
iteMList Array 按钮的文字数组
itemColor String 按钮的文字颜色,字符串格式,默认为"#000000"
success Function 接口调用成功的回调函数,详见返回参数说明
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

success 返回参数说明

参数 类型 说明
index Number 用户长按图片的索引值
tapIndex Number 用户点击按钮列表的索引值
示例
uni.chooseImage({
	count: 9,
	sizeType: ['original', 'compressed'],
	sourceType: ['album'],
	success: function(res) {
		// 预览图片
		uni.previewImage({
			urls: res.tempFilePaths,
			longPressActions: {
				itemList: ['发送给朋友', '保存图片', '收藏'],
				success: function(data) {
					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				},
				fail: function(err) {
					console.log(err.errMsg);
				}
			}
		});
	}
});

TIPS

  • 在非H5端,previewImage是原生实现的,界面自定义灵活度较低。
  • 插件市场有前端实现的previewImage,性能低于原生实现,但界面可随意定义;插件市场也有适于App端的previewImage原生插件,提供了更多功能。

uni.closePreviewImage(OBJECT)

关闭预览图片。

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序 飞书小程序 QQ小程序 快手小程序
(3.2.15+) (3.2.15+) x x x x x x x

OBJECT 参数说明

参数 类型 必填 说明
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

uni.getImageInfo(OBJECT)

获取图片信息。
小程序下获取网络图片信息需先配置download域名白名单才能生效。
平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序、飞书小程序 QQ小程序 快手小程序

OBJECT 参数说明

参数 类型 必填 说明
src String 图片的路径,可以是相对路径,临时文件路径,存储文件路径,网络图片路径
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

success 返回参数说明

参数名 类型 说明 平台差异说明
width Number 图片宽度,单位px
height Number 图片高度,单位px
path String 返回图片的本地路径
orientation String 返回图片的方向,有效值见下表 App、小程序
type String 返回图片的格式 App、小程序

orientation 参数说明

枚举值 说明
up 默认
down 180度旋转
left 逆时针旋转90度
right 顺时针旋转90度
up-mirrored 同up,但水平翻转
down-mirrored 同down,但水平翻转
left-mirrored 同left,但垂直翻转
right-mirrored 同right,但垂直翻转

示例

uni.chooseImage({
	count: 1,
	sourceType: ['album'],
	success: function (res) {
		uni.getImageInfo({
			src: res.tempFilePaths[0],
			success: function (image) {
				console.log(image.width);
				console.log(image.height);
			}
		});
	}
});

uni.saveImageToPhotosAlbum(OBJECT)

保存图片到系统相册。
平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序、飞书小程序 QQ小程序 快手小程序
x

OBJECT 参数说明

参数 类型 必填 说明
filePath String 图片文件路径,可以是临时文件路径也可以是永久文件路径,不支持网络图片路径
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

success 返回参数说明

参数名 类型 说明
path String 保存到相册的图片路径,仅 App 3.0.5+ 支持
errMsg String 调用结果
注意
  • 可以通过用户授权API来判断用户是否给应用授予相册的访问权限
  • H5没有API可触发保存到相册行为,下载图片时浏览器会询问图片存放地址。

示例代码:

uni.chooseImage({
	count: 1,
	sourceType: ['camera'],
	success: function (res) {
		uni.saveImageToPhotosAlbum({
			filePath: res.tempFilePaths[0],
			success: function () {
				console.log('save success');
			}
		});
	}
});

uni.compressImage(OBJECT)

压缩图片接口,可选压缩质量
平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序、飞书小程序 QQ小程序 快手小程序
x √(基础库版本>=3.110.3)

OBJECT 参数说明

属性 类型 默认值 必填 说明 平台差异说明
src String - 图片路径,图片的路径,可以是相对路径、临时文件路径、存储文件路径
quality Number 80 压缩质量,范围0~100,数值越小,质量越低,压缩率越高(仅对jpg有效)
width String auto 缩放图片的宽度,支持像素值(如"100px")、百分比(如"50%“)、自动计算(如"auto”,即根据width与源图宽的缩放比例计算,若未设置width则使用源图宽度) App 3.0.0+
height String auto 缩放图片的高度,支持像素值(如"100px")、百分比(如"50%“)、自动计算(如"auto”,即根据height与源图高的缩放比例计算,若未设置height则使用源图高度) App 3.0.0+
rotate Number 0 旋转度数,范围0~360 App 3.0.0+
success Function - 接口调用成功的回调函数
fail Function - 接口调用失败的回调函数
complete Function - 接口调用结束的回调函数(调用成功、失败都会执行)

success 返回参数说明

属性 类型 说明
tempFilePath String 压缩后图片的临时文件路径
示例代码:
uni.compressImage({
  src: '/static/logo.jpg',
  quality: 80,
  success: res => {
console.log(res.tempFilePath)
  }
})

二、文件

uni.chooseFile(OBJECT)

从本地选择文件。
本API主要用于选择非媒体文件,如果选择的文件是媒体文件,另有3个专用API:

  • 图片选择
  • 视频选择
  • 多媒体文件选择(含图片视频)

平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序、飞书小程序 QQ小程序 快手小程序
x (HBuilder X2.9.9+) x(可使用wx.chooseMessageFile) x x x x x
  • App端如需选择非媒体文件,可在插件市场搜索文件选择,其中Android端可以使用Native.js,无需原生插件,而iOS端需要原生插件。
  • App端如果想选择下载到_doc_downloads_Documents等plus.io控制的目录下的文件,可通过plus.io Api,自己做选择框。
  • 选择文件大多为了上传,uni ui封装了更完善的uni-file-picker组件,文件选择、上传到uniCloud的免费存储和cdn中,一站式集成。强烈推荐使用。

OBJECT 参数说明

参数名 类型 默认值 必填 说明 平台差异说明
count Number 100 最多可以选择的文件数量 见下方说明
type String ‘all’ 所选的文件的类型 见下方说明
extension Array 根据文件拓展名过滤,每一项都不能是空字符串。默认不过滤。 见下方说明
sourceType Array [‘album’,‘camera’] (仅在type为imagevideo时可用)album 从相册选图,camera 使用相机,默认二者都有。如需直接开相机或直接选相册,请只使用一个选项
success Function 成功则返回图片的本地文件路径列表 tempFilePaths
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)  
Tips
  • count 值在 H5 平台的表现,基于浏览器本身的规范。目前测试的结果来看,只能限制单选/多选,并不能限制数量。并且,在实际的手机浏览器很少有能够支持多选的。
  • sourceType 在H5端对应inputcapture属性,设置为['album']无效,依然可以使用相机。
  • extension暂只支持文件后缀名,例如['.zip','.exe','.js'],不支持application/msword等类似值
注:文件的临时路径,在应用本次启动期间可以正常使用,如需持久保存,需在主动调用 uni.saveFile,在应用下次启动时才能访问得到。 OBJECT.type 的合法值
说明
all 从所有文件选择
video 只能选择视频文件
image 只能选择图片文件
Tips
  • 如果type属性和extension同时存在,例如{type:'image',extension:['.png','.jpg']},则会选择image/png,image/jpg文件
  • 如果只配置extension属性,例如{extension:['.doc','.xlsx','.docx']},则会选择.doc,.xlsx,.docx文件,详情见accept属性
  • 在微信环境中,如果type="all",则extension属性失效

success 返回参数说明

参数 类型 说明
tempFilePaths Array 文件的本地文件路径列表
tempFiles Array、Array 文件的本地文件列表,每一项是一个 File 对象

File 对象结构如下

参数 类型 说明
path String 本地文件路径
size Number 本地文件大小,单位:B
name String 包含扩展名的文件名称,仅H5支持
type String 文件类型,仅H5支持
示例
uni.chooseFile({
  count: 6, //默认100
  extension:['.zip','.doc'],
	success: function (res) {
		console.log(JSON.stringify(res.tempFilePaths));
	}
});
// 选择图片文件
uni.chooseFile({
  count: 10,
  type: 'image',
  success (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFiles
  }
})

wx.chooseMessageFile(OBJECT)

从微信聊天会话中选择文件。
平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序、飞书小程序 QQ小程序 快手小程序
x x (基础库2.5.0+) x x x (基础库1.18.0+) x

三、录音管理

uni.getRecorderManager()

获取全局唯一的录音管理器 recorderManager

平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序、飞书小程序 QQ小程序 快手小程序
x x x

recorderManager 对象的方法列表

方法 参数 说明 平台差异说明
start options 开始录音
pause 暂停录音 App 暂不支持
resume 继续录音 App 暂不支持
stop 停止录音
onStart callback 录音开始事件
onPause callback 录音暂停事件
onStop callback 录音停止事件,会回调文件地址
onFrameRecorded callback 已录制完指定帧大小的文件,会回调录音分片结果数据。如果设置了 frameSize ,则会回调此事件 App 暂不支持
onError callback 录音错误事件, 会回调错误信息  

start(options) 说明

属性 类型 必填 说明 平台差异说明
duration Number 指定录音的时长,单位 ms ,如果传入了合法的 duration ,在到达指定的 duration 后会自动停止录音,最大值 600000(10 分钟),默认值 60000(1 分钟) App、小程序支持
sampleRate Number 采样率,有效值 8000/16000/44100 App、小程序支持
numberOfchannels Number 录音通道数,有效值 1/2 仅小程序支持
encodeBitRate Number 编码码率,有效值见下表格 仅小程序支持
format String 音频格式,有效值 aac/mP3/wav/PCM。App默认值为mp3,小程序默认值aac App、小程序支持
frameSize String 指定帧大小,单位 KB。传入 frameSize 后,每录制指定帧大小的内容后,会回调录制的文件内容,不指定则不会回调。暂仅支持 mp3 格式。 App、百度小程序不支持
其中,采样率和码率有一定要求,具体有效值如下:
采样率 编码码率
8000 16000 ~ 48000
11025 16000 ~ 48000
12000 24000 ~ 64000
16000 24000 ~ 96000
22050 32000 ~ 128000
24000 32000 ~ 128000
32000 48000 ~ 192000
44100 64000 ~ 320000
48000 64000 ~ 320000

onStop(callback) 回调结果说明

属性 类型 说明
tempFilePath String 录音文件的临时路径
onFrameRecorded(callback) 回调结果说明
属性 类型 说明
frameBuffer ArrayBuffer 录音分片结果数据
isLastFrame Boolean 当前帧是否正常录音结束前的最后一帧
onError(callback) 回调结果说明
属性 类型 说明
errMsg String 错误信息

注意

  • 可以通过用户授权API来判断用户是否给应用授予麦克风的访问权限 /api/other/authorize
示例
<template>
	<view>
		<button @tap="startRecord">开始录音</button>
		<button @tap="endRecord">停止录音</button>
		<button @tap="playVoice">播放录音</button>
	</view>
</template>
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
export default {
	data() {
		return {
			text: 'uni-app',
			voicePath: ''
		}
	},
	onLoad() {
		let self = this;
		recorderManager.onStop(function (res) {
			console.log('recorder stop' + JSON.stringify(res));
			self.voicePath = res.tempFilePath;
		});
	},
	methods: {
		startRecord() {
			console.log('开始录音');
			recorderManager.start();
		},
		endRecord() {
			console.log('录音结束');
			recorderManager.stop();
		},
		playVoice() {
			console.log('播放录音');
			if (this.voicePath) {
				innerAudioContext.src = this.voicePath;
				innerAudioContext.play();
			}
		}
	}
}

四、背景音频播放管理

uni.getBackgroundAudioManager()

获取全局唯一的背景音频管理器 backgroundAudioManager
背景音频,不是游戏的背景音乐,而是类似QQ音乐那样,App在后台时,仍然在播放音乐。如果你不需要在App切后台时继续播放,那么不应该使用本API,而应该使用普通音频APIuni.createInnerAudioContext。

平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序 飞书小程序 QQ小程序 快手小程序
x x x x

backgroundAudioManager 对象的属性列表

属性 类型 说明 只读
duration Number 当前音频的长度(单位:s),只有在当前有合法的 src 时返回
currentTime Number 当前音频的播放位置(单位:s),只有在当前有合法的 src 时返回
paused Boolean 当前是是否暂停或停止状态,true 表示暂停或停止,false 表示正在播放
src String 音频的数据源,默认为空字符串,**当设置了新的 src 时,会自动开始播放,**目前支持的格式有 m4a, aac, mp3, wav
startTime Number 音频开始播放的位置(单位:s)
buffered Number 音频缓冲的时间点,仅保证当前播放时间点到此时间点内容已缓冲。
title String 音频标题,用于做原生音频播放器音频标题。原生音频播放器中的分享功能,分享出去的卡片标题,也将使用该值。
epname String 专辑名,原生音频播放器中的分享功能,分享出去的卡片简介,也将使用该值。
singer String 歌手名,原生音频播放器中的分享功能,分享出去的卡片简介,也将使用该值。
coverImgUrl String 封面图url,用于做原生音频播放器背景图。原生音频播放器中的分享功能,分享出去的卡片配图及背景也将使用该图。
webUrl String 页面链接,原生音频播放器中的分享功能,分享出去的卡片简介,也将使用该值。
protocol String 音频协议。默认值为 ‘http’,设置 ‘hls’ 可以支持播放 HLS 协议的直播音频,App平台暂不支持
backgroundAudioManager 对象的方法列表
方法 参数 说明
play 播放
pause 暂停
stop 停止
seek position 跳转到指定位置,单位 s
onCanplay callback 背景音频进入可以播放状态,但不保证后面可以流畅播放
onPlay callback 背景音频播放事件
onPause callback 背景音频暂停事件
onStop callback 背景音频停止事件
onEnded callback 背景音频自然播放结束事件
onTimeUpdate callback 背景音频播放进度更新事件
onPrev callback 用户在系统音乐播放面板点击上一曲事件(iOS only)
onNext callback 用户在系统音乐播放面板点击下一曲事件(iOS only)
onError callback 背景音频播放错误事件
onWaiting callback 音频加载中事件,当音频因为数据不足,需要停下来加载时会触发

errCode 说明

errCode 说明
10001 系统错误
10002 网络错误
10003 文件错误
10004 格式错误
-1 未知错误
示例
const bgAudioManager = uni.getBackgroundAudioManager();
bgAudioManager.title = '致爱丽丝';
bgAudioManager.singer = '暂无';
bgAudioManager.coverImgUrl = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png';
bgAudioManager.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9DFb-6da8e309e0d8.mp3';

注意 因为背景音频播放耗费手机电量,所以平台都有管控,需在manifest中填写申请。

  • ios App平台,背景播放需在manifest.json -> app-plus -> distribute -> ios 节点添加 "UIBackgroundModes":["audio"] 才能保证音乐可以后台播放(打包成ipa生效)
  • 小程序平台,需在manifest.json 对应的小程序节点下,填写"requiredBackgroundModes": [“audio”]。发布小程序时平台会审核
  • Android App端默认不会在通知栏出现音量控制,如需此功能,需要在插件市场单独下载原生插件,详见

五、音频组件控制

uni.createInnerAudioContext()

创建并返回内部 audio 上下文 innerAudioContext 对象。
平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序、飞书小程序 QQ小程序 快手小程序
1.23.4+

innerAudioContext 对象的属性列表

属性 类型 说明 只读 平台差异说明
src String 音频的数据链接,用于直接播放。 微信小程序不支持本地路径
startTime Number 开始播放的位置(单位:s),默认 0
autoplay Boolean 是否自动开始播放,默认 false H5端部分浏览器不支持
loop Boolean 是否循环播放,默认 false
obeyMuteSwitch Boolean 是否遵循系统静音开关,当此参数为 false 时,即使用户打开了静音开关,也能继续发出声音,默认值 true 微信小程序、百度小程序、字节跳动小程序、飞书小程序
duration Number 当前音频的长度(单位:s),只有在当前有合法的 src 时返回,需要在onCanplay中获取
currentTime Number 当前音频的播放位置(单位:s),只有在当前有合法的 src 时返回,时间不取整,保留小数点后 6 位
paused Boolean 当前是是否暂停或停止状态,true 表示暂停或停止,false 表示正在播放
buffered Number 音频缓冲的时间点,仅保证当前播放时间点到此时间点内容已缓冲。
volume Number 音量。范围 0~1。  

innerAudioContext 对象的方法列表

方法 参数 说明 平台差异说明
play 播放(H5端部分浏览器需在用户交互时进行)
pause 暂停
stop 停止
seek position 跳转到指定位置,单位 s
destroy 销毁当前实例
onCanplay callback 音频进入可以播放状态,但不保证后面可以流畅播放
onPlay callback 音频播放事件
onPause callback 音频暂停事件
onStop callback 音频停止事件
onEnded callback 音频自然播放结束事件
onTimeUpdate callback 音频播放进度更新事件
onError callback 音频播放错误事件
onWaiting callback 音频加载中事件,当音频因为数据不足,需要停下来加载时会触发
onSeeking callback 音频进行 seek 操作事件
onSeeked callback 音频完成 seek 操作事件
offCanplay callback 取消监听 onCanplay 事件 微信小程序1.9.0+,支付宝小程序,字节小程序、百度小程序
offPlay callback 取消监听 onPlay 事件 微信小程序1.9.0+,支付宝小程序,字节小程序、百度小程序
offPause callback 取消监听 onPause 事件 微信小程序1.9.0+,支付宝小程序,字节小程序、百度小程序
offStop callback 取消监听 onStop 事件 微信小程序1.9.0+,支付宝小程序,字节小程序、百度小程序
offEnded callback 取消监听 onEnded 事件 微信小程序1.9.0+,支付宝小程序,字节小程序、百度小程序
offTimeUpdate callback 取消监听 onTimeUpdate 事件 微信小程序1.9.0+,支付宝小程序,字节小程序、百度小程序
offError callback 取消监听 onError 事件 微信小程序1.9.0+,支付宝小程序,字节小程序、百度小程序
offWaiting callback 取消监听 onWaiting 事件 微信小程序1.9.0+,支付宝小程序,字节小程序、百度小程序
offSeeking callback 取消监听 onSeeking 事件 微信小程序1.9.0+,支付宝小程序,字节小程序、百度小程序
offSeeked callback 取消监听 onSeeked 事件 微信小程序1.9.0+,支付宝小程序,字节小程序、百度小程序

errCode 说明

errCode 说明
10001 系统错误
10002 网络错误
10003 文件错误
10004 格式错误
-1 未知错误

支持格式

格式 iOS Android
flac x
m4a
ogg x
ape x
amr x
wma x
wav
mp3
mp4 x
aac
aiff x
caf x

示例

const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
innerAudioContext.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
innerAudioContext.onPlay(() => {
  console.log('开始播放');
});
innerAudioContext.onError((res) => {
  console.log(res.errMsg);
  console.log(res.errCode);
});

tips

  • 如需音频的倍速播放,可通过video的倍速播放替代实现。插件市场有封装好的插件音频倍速播放
  • 如果需要带ui的音频播放器样式,可以在插件市场搜索相关插件
  • Android 4.1 及更高版本对 PCM/WAVE 支持范围是 8 位和 16 位线性 PCM(比特率最高可达到硬件上限)。以 8000、16000 和 44100 Hz 录制原始 PCM 所需的采样率。

六、视频

uni.chooseVideo(OBJECT)

拍摄视频或从手机相册中选视频,返回视频的临时文件路径。
若选择和上传非图像、视频文件,另行参考:

平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序、飞书小程序 QQ小程序 快手小程序

OBJECT 参数说明

参数名 类型 必填 说明 平台差异说明
sourceType Array album 从相册选视频,camera 使用相机拍摄,默认为:[‘album’, ‘camera’]
extension Array 根据文件拓展名过滤,每一项都不能是空字符串。默认不过滤。 H5(HBuilder X 2.9.9+)
compressed Boolean 是否压缩所选的视频源文件,默认值为 true,需要压缩。 微信小程序、百度小程序、字节跳动小程序、飞书小程序、App(HBuilder X 3.2.7+)
maxDuration Number 拍摄视频最长拍摄时间,单位秒。最长支持 60 秒。 APP平台 1.9.7+(iOS支持,Android取决于rom的拍照组件是否实现此功能,如果没实现此功能则忽略此属性。) 微信小程序、百度小程序
camera String ‘front’、‘back’,默认’back’ APP、微信小程序
success Function 接口调用成功,返回视频文件的临时文件路径,详见返回参数说明。
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)  

success 返回参数说明

参数 类型 说明 平台差异
tempFilePath String 选定视频的临时文件路径
tempFile File 选定的视频文件 仅H5(2.6.15+)支持
duration Number 选定视频的时间长度,单位为 s APP 2.1.0+、H5、微信小程序
size Number 选定视频的数据量大小 APP 2.1.0+、H5、微信小程序
height Number 返回选定视频的高 APP 2.1.0+、H5、微信小程序
width Number 返回选定视频的宽 APP 2.1.0+、H5、微信小程序
name String 包含扩展名的文件名称 仅H5支持

注意:

  • app安卓端选择的视频最大只支持180MB,如需突破该限制请使用原生插件
  • 文件的临时路径,在应用本次启动期间可以正常使用,如需持久保存,需在主动调用 uni.saveFile,在应用下次启动时才能访问得到。
  • camera 部分 Android 手机下由于系统 ROM 不支持无法生效,打开拍摄界面后可操作切换
  • 可以通过用户授权API来判断用户是否给应用授予相册或摄像头的访问权限
  • App下如需进一步压缩视频大小,可以在插件市场搜索视频压缩插件
  • 如需上传到cdn,可使用uniCloud.uploadFile API,uniCloud提供了免费cdn给开发者使用,详见
  • 选择视频大多为了上传,uni ui封装了更完善的uni-file-picker组件,文件选择、上传到uniCloud的免费存储和cdn中,一站式集成。强烈推荐使用。
  • 部分浏览器中无法获取视频信息。

示例

<template>
	<view>
		<text>hello</text>
		<button @tap="test">click me</button>
		<video :src="src"></video>
	</view>
</template>

export default {
	data() {
		return {
			src: ''
		}
	},
	methods: {
		test: function () {
			VAR self = this;
			uni.chooseVideo({
				count: 1,
				sourceType: ['camera', 'album'],
				success: function (res) {
					self.src = res.tempFilePath;
				}
			});
		}
	}
}

uni.chooseMedia(OBJECT)

拍摄或从手机相册中选择图片或视频。
若选择和上传非图像、视频文件,另行参考:

平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序、飞书小程序 QQ小程序 快手小程序
x x 2.10.0+ x x x x x

OBJECT 参数说明

参数 类型 默认值 必填 说明
count Number 9(注意:ios不可大于9) 最多可以选择的文件个数
mediaType Array. [‘image’, ‘video’] 文件类型
sourceType Array. [‘album’, ‘camera’] 图片和视频选择的来源
maxDuration Number 10 拍摄视频最长拍摄时间,单位秒。时间范围为 3s 至 30s 之间
sizeType Array. [‘original’, ‘compressed’] 仅对 mediaType 为 image 时有效,是否压缩所选文件
camera String ‘back’ 仅在 sourceType 为 camera 时生效,使用前置或后置摄像头
success Function - 接口调用成功的回调函数
fail Function - 接口调用失败的回调函数
complete Function - 接口调用结束的回调函数(调用成功、失败都会执行)

OBJECT.mediaType 合法值

说明
image 只能拍摄图片或从相册选择图片
video 只能拍摄视频或从相册选择视频

OBJECT.sourceType 合法值

说明
album 从相册选择
camera 使用相机拍摄

OBJECT.camera 合法值

说明
back 使用后置摄像头
front 使用前置摄像头

success 返回参数说明

参数名 类型 说明
tempFiles Array. 本地临时文件列表
type String 文件类型,有效值有 image 、video

res.tempFiles 的结构

参数名 类型 说明
tempFilePath String 本地临时文件路径 (本地路径)
size Number 本地临时文件大小,单位 B
duration Number 视频的时间长度
height Number 视频的高度
width Number 视频的宽度
thumBTempFilePath String 视频缩略图临时文件路径

示例

uni.chooseMedia({
  count: 9,
  mediaType: ['image','video'],
  sourceType: ['album', 'camera'],
  maxDuration: 30,
  camera: 'back',
  success(res) {
console.log(res.tempFilest)
  }
})

Tips

  • 如需上传到cdn,可使用uniCloud.uploadFile API,uniCloud提供了免费cdn给开发者使用,详见
  • 选择文件大多为了上传,uni ui封装了更完善的uni-file-picker组件,文件选择、上传到uniCloud的免费存储和cdn中,一站式集成。强烈推荐使用。
  • 经开发者提醒,微信小程序ios真机可以选择的文件个数不能大于9,详见帖子https://ask.dcloud.net.cn/question/115561

uni.saveVideoToPhotosAlbum(OBJECT)

保存视频到系统相册。
平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序、飞书小程序 QQ小程序 快手小程序
x

OBJECT 参数说明

参数名 类型 必填 说明
filePath String 视频文件路径,可以是临时文件路径也可以是永久文件路径
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

success 返回参数说明

参数名 类型 说明
errMsg String 调用结果
注意
  • 可以通过用户授权API来判断用户是否给应用授予相册写入权限
示例
<template>
	<view>
		<text>hello</text>
		<button @tap="test">click me</button>
		<video :src="src"></video>
	</view>
</template>
export default {
	data() {
		return {
			src: ''
		}
	},
	methods: {
		test: function () {
			var self = this;
			uni.chooseVideo({
				count: 1,
				sourceType: ['camera'],
				success: function (res) {
					self.src = res.tempFilePath;

					uni.saveVideoToPhotosAlbum({
						filePath: res.tempFilePath,
						success: function () {
							console.log('save success');
						}
					});
				}
			});
		}
	}
}

uni.getVideoInfo(OBJECT)

获取视频详细信息
平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序、飞书小程序 QQ小程序 快手小程序
3.1.10+ 3.1.10+ 2.11.0+ x x x x

OBJECT 参数说明

属性 类型 默认值 必填 说明
src string - 视频文件路径,可以是临时文件路径也可以是永久文件路径(不支持网络地址)
success function - 接口调用成功的回调函数
fail function - 接口调用失败的回调函数
complete function - 接口调用结束的回调函数(调用成功、失败都会执行)

success 返回参数说明

参数名 类型 说明 平台差异说明
orientation string 画面方向 微信小程序、App(3.1.14+)
type string 视频格式 微信小程序、App(3.1.14+)
duration number 视频长度 微信小程序、App(3.1.10+)、H5
size number 视频大小,单位 kB 微信小程序、App(3.1.10+)、H5
height number 视频的长,单位 px 微信小程序、App(3.1.10+)、H5
width number 视频的宽,单位 px 微信小程序、App(3.1.10+)、H5
fps number 视频帧率 微信小程序、App(3.1.14+)
bitrate number 视频码率,单位 kbps 微信小程序、App(3.1.14+)

res.orientation参数说明

说明
up 默认
down 180度旋转
left 逆时针旋转90度
right 顺时针旋转90度
up-mirrored 同up,但水平翻转
down-mirrored 同down,但水平翻转
left-mirrored 同left,但垂直翻转
right-mirrored 同right,但垂直翻转

uni.compressVideo(OBJECT)

压缩视频接口。开发者可指定压缩质量 quality 进行压缩。当需要更精细的控制时,可指定 bitrate、fps、和 resolution,当 quality 传入时,这三个参数将被忽略。原视频的相关信息可通过 getVideoInfo 获取。
平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序、飞书小程序 QQ小程序 快手小程序
3.1.10+ x 2.11.0+ x x x x x

App端有很多插件支持视频压缩,详见插件市场
压缩完毕后如需上传到cdn,可使用uniCloud.uploadFile API,uniCloud提供了免费cdn给开发者使用,

OBJECT 参数说明

属性 类型 默认值 必填 说明
src string 视频文件路径,可以是临时文件路径也可以是永久文件路径
quality string 压缩质量
bitrate number 码率,单位 kbps
fps number 帧率
resolution number 相对于原视频的分辨率比例,取值范围(0, 1]
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

quality可取值

说明
low
medium
high

success 返回参数说明

参数名 类型 说明
tempFilePath string 压缩后的临时文件地址
size string 压缩后的大小,单位 kB

uni.openVideoEditor(OBJECT)

打开视频编辑器
平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序、飞书小程序 QQ小程序 快手小程序
x x 2.12.0+ x x x x x
OBJECT 参数说明
属性 类型 默认值 必填 说明
filePath string - 视频源的路径,只支持本地路径
success function - 接口调用成功的回调函数
fail function - 接口调用失败的回调函数
complete function - 接口调用结束的回调函数(调用成功、失败都会执行)

success 返回参数说明

参数名 类型 说明
duration number 剪辑后生成的视频文件的时长,单位毫秒(;ms)
size number 剪辑后生成的视频文件大小,单位字节数(byte)
tempFilePath string 编辑后生成的视频文件的临时路径
tempThumbPath string 编辑后生成的缩略图文件的临时路径

七、视频组件控制

uni.createVideoContext(videoId, this)

创建并返回 video 上下文 videoContext 对象。在自定义组件下,第二个参数传入组件实例this,以操作组件内 组件。
平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序、飞书小程序 QQ小程序 快手小程序
基础库版本>=1.10.0

videoContext 对象的方法列表

方法 参数 说明 平台差异说明
play 播放
pause 暂停
seek position 跳转到指定位置,单位 s
stop 停止视频 微信小程序
sendDanmu danmu 发送弹幕,danmu 包含两个属性 text, color
playbackRate rate 设置倍速播放,支持的倍率有 0.5/0.8/1.0/1.25/1.5。微信基础库2.6.3 起支持 2.0 倍速
requestFullScreen 进入全屏,可传入{direction}参数,详见 video 组件文档 H5和字节跳动小程序不支持{direction}参数
exitFullScreen 退出全屏
showStatusbar 显示状态栏,仅在iOS全屏下有效 微信小程序、百度小程序、QQ小程序
hideStatusBar 隐藏状态栏,仅在iOS全屏下有效 微信小程序、百度小程序、QQ小程序

注意:

  • app-nvue 平台 2.2.5以下使用本API,需同时设置组件属性id和ref ,或者直接使用 ref,例如 this.$refs.video1,2.2.5+ 支持直接使用 uni.createVideoContext(videoId, this)
示例
<template>
	<view>
		<view class="page-body">
			<view class="page-section">
				<video id="myVideo" src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/360e4b20-4f4b-11eb-8a36-ebb87efCF8c0.mp4" @error="videoErrorCallback" :danmu-list="danmuList"
				enable-danmu danmu-btn controls></video>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view>
							<view class="uni-label">弹幕内容</view>
						</view>
						<view class="uni-list-cell-db">
							<input @blur="bindInputBlur" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
						</view>
					</view>
				</view>
				<view class="btn-area">
					<button @tap="bindSendDanmu" class="page-body-button" formType="submit">发送弹幕</button>
				</view>
			</view>
		</view>
	</view>
</template>
export default {
	data() {
		return {
			title: 'video',
			src: '',
			inputValue: '',
			danmuList: [{
					text: '第 1s 出现的弹幕',
					color: '#ff0000',
					time: 1
				},
				{
					text: '第 3s 出现的弹幕',
					color: '#ff00ff',
					time: 3
				}
			]
		}
	},
	onReady: function (res) {
		this.videoContext = uni.createVideoContext('myVideo')
	},
	methods: {
		bindInputBlur: function (e) {
			this.inputValue = e.target.value
		},
		bindButtonTap: function () {
			var that = this
			uni.chooseVideo({
				sourceType: ['album', 'camera'],
				maxDuration: 60,
				camera: ['front', 'back'],
				success: function (res) {
					this.src = res.tempFilePath
				}
			})
		},
		bindSendDanmu: function () {
			this.videoContext.sendDanmu({
				text: this.inputValue,
				color: this.getRandomColor()
			})
		},
		videoErrorCallback: function (e) {
			console.log('视频错误信息:')
			console.log(e.target.errMsg)
		},
		getRandomColor: function () {
			const rgb = []
			for (let i = 0; i < 3; ++i) {
				let color = Math.floor(Math.random() * 256).toString(16)
				color = color.length == 1 ? '0' + color : color
				rgb.push(color)
			}
			return '#' + rgb.join('')
		}
	}
}

八、相机组件控制

uni.createCameraContext()

创建并返回 camera 组件的上下文 cameraContext 对象。
平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序、飞书小程序 QQ小程序 快手小程序
x x x x

本API为 camera 组件配套的js API,与 camera 组件的平台兼容性相同,可实现非全屏摄像头。App端可通过plus.camera实现全屏摄像头。
cameraContext 对象的方法列表

方法 参数 说明
takePhoto Object 拍照,可指定质量,成功则返回图片路径。
setZoom Object 设置缩放级别 微信小程序 2.10.0+ 支持
startRecord Object 开始录像
stopRecord Object 结束录像,成功则返回封面与视频。
onCameraFrame Function 获取 Camera 实时帧数据。仅微信小程序平台支持,规范详情

cameraContext.takePhoto

takePhoto 的 Object 参数列表:

参数 类型 必填 说明
quality String 成像质量,值为high(高质量)、normal(普通质量)、low(低质量),默认normal
success Function 接口调用成功的回调函数 ,返回照片文件的临时路径,res = { tempImagePath }
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

cameraContext.setZoom

setZoom 的 Object 参数列表:

参数 类型 必填 说明
zoom String 缩放级别,范围[1, maxZoom]。zoom 可取小数,精确到小数后一位。maxZoom 可在 @initdone 返回值中获取。
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

cameraContext.startRecord

startRecord 的 Object 参数列表:

参数 类型 必填 说明
timeoutCallback Function 接超过30s或页面 onHide 时会结束录像
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

cameraContext.stopRecord

stopRecord 的 Object 参数列表:

参数 类型 默认值 必填 说明
compressed Boolean false 启动视频压缩,压缩效果同 chooseVideo ,微信小程序 2.10.0+ 支持
success Function - 接口调用成功的回调函数
fail Function - 接口调用失败的回调函数
complete Function - 接口调用结束的回调函数(调用成功、失败都会执行)

注意

  • App下实现OCR等证件识别等需求,可在插件市场获取原生插件,
  • 微信小程序下实现OCR等证件识别等需求,插件市场也有封装,搜索 ocr 可见。
  • 可以通过用户授权API来判断用户是否给应用授予摄像头的访问权限

九、直播组件控制

uni.createLivePlayerContext(livePlayerId, this)

创建 live-player 上下文 livePlayerContext 对象。注意是直播的播放而不是推流。
平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序、飞书小程序 QQ小程序 快手小程序
见下 x x x x
App平台的直播播放,不使用此API,而直接使用video的API。 参数说明
参数 说明 平台差异说明
livePlayerId 组件 id
this 在自定义组件下,当前组件实例的 this,以操作组件内 组件 微信小程序

livePlayerContext 对象的方法列表:

方法 参数 说明
play Object 播放
stop Object 停止
mute Object 静音
pause Object 暂停
resume Object 恢复
requestFullScreen Object 进入全屏
exitFullScreen Object 退出全屏

requestFullScreen 的 Object 参数列表:

参数 类型 必填 说明
direction Number 设置全屏时的方向,有效值为 0(正常竖向), 90(屏幕逆时针90度), -90(屏幕顺时针90度)。
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

其他方法的 Object 参数列表:

参数 类型 必填 说明
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

uni.createLivePusherContext(livePusherId, this)

创建 live-pusher 上下文 livePusherContext 对象。
平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序、飞书小程序 QQ小程序 快手小程序
见下 x x x x x
  • app-nvue 平台 2.2.5+ 支持 uni.createLivePusherContext(livePusherId, this)
  • app-nvue 平台 2.2.5以下,需要同时设置组件属性id和ref ,或者直接使用 ref,例如 this.$refs.livepusher1
  • app-vue 平台,需要编写条件编译代码,使用 plus.video.LivePusher,业务指南、规范文档
livePusherContext
start(OBJECT)

开始推流

参数 类型 必填 说明
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)
pause(OBJECT)

暂停推流

参数 类型 必填 说明
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)
resume(OBJECT)

恢复推流

参数 类型 必填 说明
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)
stop(OBJECT)

停止推流

参数 类型 必填 说明
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)
switchCamera(OBJECT)

切换前后摄像头

参数 类型 必填 说明
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)
snapshot(OBJECT)

快照

属性 类型 必填 说明
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)
startPreview(OBJECT)

开启摄像头预览

参数 类型 必填 说明
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)
stopPreview(OBJECT)

关闭摄像头预览

参数 类型 必填 说明
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

十、富文本

editorContext

editor 组件对应的 editorContext 实例,可通过 uni.createSelectorQuery 获取。

onEditorReady() {
uni.createSelectorQuery().select('#editor').context((res) => {
this.editorCtx = res.context
}).exec()
}

百度小程序 Editor富文本编辑器动态库提供了 createEditorContext的方法来获取。

 onEditorReady() {
this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId');
  }

editorContext 通过 id 跟一个 组件绑定,操作对应的 组件。
平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序、飞书小程序 QQ小程序
2.4.5+ x 需引入动态库 x x
百度小程序引入动态库
  1. 在项目中引用动态库,在 manifest.json中增添一项 dynamicLib
"mp-baidu" : {
	"appid" : "",
	"setting" : {
	  "urlCheck" : true
	},
	"dynamicLib": {//引入百度小程序动态库
	  "editorLib": {
	"provider": "swan-editor"
	  }
	}
  },
  1. 在每个使用到富文本编辑器组件的页面,配置 pages.json文件如下:
{
	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app",
				"usingSwancomponents": {
					"editor": "dynamicLib://editorLib/editor"
				}
			}
		}
	]
}

editorContext.format(name, value)

修改样式

参数 类型 说明
name String 属性
value String

支持设置的样式列表

name value
bold
italic
underline
strike
ins
script sub / super
header h1 / H2 / h3 / H4 / h5 / H6
align left / center / right / justify
direction rtl
indent -1 / +1
list ordered / bullet / check
color hex color
backgroundColor hex color
margin/marginTop/marginBottom/marginLeft/marginRight css style
padding/paddingTop/paddingBottom/paddingLeft/paddingRight css style
font/fontSize/fontStyle/fontVariant/fontWeight/fontFamily css style
lineHeight css style
letterSpacing css style
textDecoration css style
textIndent css style
对已经应用样式的选区设置会取消样式。css style 表示 css 中规定的允许值。

editorContext.insertDivider(OBJECT)

插入分割线
OBJECT 参数说明

参数 类型 默认值 必填 说明
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

editorContext.insertImage(OBJECT)

插入图片。
微信小程序平台地址为临时文件时,获取的编辑器html格式内容中 标签增加属性 data-local,delta 格式内容中图片 attributes 属性增加 data-local 字段,该值为传入的临时文件地址。 开发者可选择在提交阶段上传图片到服务器,获取到网络地址后进行替换。替换时对于html内容应替换掉 的 src 值,对于 delta 内容应替换掉 insert { image:abc } 值。
OBJECT 参数说明

属性 类型 默认值 必填 说明
src String 图片地址
alt String 图像无法显示时的替代文本
width String 图片宽度(pixels/百分比),2.6.5+ 支持
height String 图片高度 (pixels/百分比),2.6.5+ 支持
extClass String 添加到图片 img 标签上的类名,2.6.5+ 支持
data Object data 被序列化为 name=value;name1=value2 的格式挂在属性 data-custom 上,2.6.5+ 支持
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

editorContext.insertText(OBJECT)

覆盖当前选区,设置一段文本
OBJECT 参数说明

参数 类型 默认值 必填 说明
text String 文本内容
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

editorContext.setContents(OBJECT)

初始化编辑器内容,hmlt和delta同时存在时仅delta生效

OBJECT 参数说明

参数 类型 默认值 必填 说明
html String 带标签的HTML内容
delta Object 表示内容的delta对象
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

editorContext.getContents(OBJECT)

获取编辑器内容
OBJECT 参数说明

参数 类型 默认值 必填 说明
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

editorContext.clear(OBJECT)

清空编辑器内容
OBJECT 参数说明

参数 类型 必填 说明
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

editorContext.removeFormat(OBJECT)

清除当前选区的样式
OBJECT 参数说明

参数 类型 必填 说明
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

editorContext.undo(OBJECT)

撤销
OBJECT 参数说明

参数 类型 必填 说明
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

editorContext.redo(OBJECT)

恢复
OBJECT 参数说明

参数 类型 必填 说明
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

editorContext.blur(OBJECT)1

编辑器失焦,同时收起键盘。
平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序、飞书小程序 QQ小程序 快手小程序
hbuilderx 3.0.3 HBuilderX 3.0.3 基础库2.8.3 x x x x x

OBJECT 参数说明

参数 类型 必填 说明
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)
editorContext.scrollIntoView(OBJECT)

使得编辑器光标处滚动到窗口可视区域内。
平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序、飞书小程序 QQ小程序 快手小程序
HBuilderX 3.0.3 HBuilderX 3.0.3 基础库2.8.3 x x x x x

OBJECT 参数说明

参数 类型 必填 说明
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

editorContext.getSelectionText(OBJECT)

获取编辑器已选区域内的纯文本内容。当编辑器失焦或未选中一段区间时,返回内容为空。
平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序、飞书小程序 QQ小程序 快手小程序
HBuilderX 3.0.3 HBuilderX 3.0.3 基础库2.10.2 x x x x x

OBJECT 参数说明

参数 类型 必填 说明
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

success 返回参数说明:

参数 类型 说明
errMsg String 接口调用结果
text String 纯文本内容

十一、音视频合成

uni.createMediaContainer()

创建音视频处理容器,最终可将容器中的轨道合成一个视频 ,返回 MediaContainer 对象

平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序、飞书小程序 QQ小程序 快手小程序
x x 2.9.0+ x x x x x
MediaContainer.addTrack(track)

将音频或视频轨道添加到容器
参数说明

参数 说明
track 要添加的音频或视频轨道
MediaContainer.destroy()

将容器销毁,释放资源

MediaContainer.export()

将容器内的轨道合并并导出视频文件

MediaContainer.extractDataSource(object)

将容器内的轨道合并并导出视频文件 ,返回 MediaTrack 对象
参数说明

属性 类型 必填 说明
source String 视频源地址,只支持本地文件
MediaContainer.removeTrack(track)

将音频或视频轨道添加到容器
参数说明

参数 说明
track 要移除的音频或视频轨道

MediaTrack

可通过 MediaContainer.extractDataSource 返回。
MediaTrack 音频或视频轨道,可以对轨道进行一些操作
参数说明

属性 类型 说明
kind String 轨道类型,只读 ,audio:音频轨道;video:视频轨道
duration Number 轨道长度,只读
volume Number 音量,音频轨道下有效,可写

你可能感兴趣的:(uni-app,javascript,html)