属性 | 类型 | 默认值 | 说明 |
src | string | - | 图片资源地址,支持云文件 ID(2.2.3起) |
mode | string | 'scaleToFill' | 图片裁剪、缩放的模式 |
lazy-load | boolean | false | 图片懒加载。只针对 page 与 scroll-view 下的 image 有效 |
binderror | handleevent | - | 当错误发生时,发布到 AppService 的事件名,事件对象 event.detail = {errMsg: 'something wrong'} |
bindload | handleevent | - | 当图片载入完毕时,发布到 AppService 的事件名,事件对象 event.detail = {height:'图片高度px', width:'图片宽度px'} |
aria-lable | string | - | 无障碍访问,(属性)元素的额外描述 |
模式 | 值 | 说明 |
缩放 | scaleToFill | 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 |
缩放 | aspectFit | 保持纵横比缩放图片,使图片的长边能完全显示出来。即可以完整地将图片显示出来 |
缩放 | aspectFill | 保持纵横比缩放图片,只保证图片的短边能完全显示出来。即图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取 |
缩放 | widthFix | 宽度不变,高度自动变化,保持原图宽高比不变 |
裁剪 | top | 不缩放图片,只显示图片的顶部区域 |
裁剪 | bottom | 不缩放图片,只显示图片的底部区域 |
裁剪 | center | 不缩放图片,只显示图片的中间区域 |
裁剪 | left | 不缩放图片,只显示图片的左边区域 |
裁剪 | right | 不缩放图片,只显示图片的右边区域 |
裁剪 | top left | 不缩放图片,只显示图片的左上角区域 |
裁剪 | top right | 不缩放图片,只显示图片的右上角区域 |
裁剪 | bottom left | 不缩放图片,只显示图片的左下边区域 |
裁剪 | bottom right | 不缩放图片,只显示图片的右下边区域 |
<view class="page"><view class="page__hd"><text class="page__title">image</text><text class="page__desc">图片</text></view><view class="page__bd"><view class="section section_gap" wx.for="{{array}}" wx.for-item="item"><view class="section__title">{{item.text}}</view><view class="section__ctn"><imagestyle="width: 200px; height: 200px; background-color: #eeeeee;"mode="{{item.mode}}"src="{{src}}"></image></view></view></view></view>
Page({data: {array: [{mode: 'scaleToFill',text: 'scaleToFill:不保持纵横比缩放图片,使图片完全适应'}, {mode: 'aspectFit',text: 'aspectFit:保持纵横比缩放图片,使图片的长边能完全显示出来'}, {mode: 'aspectFill',text: 'aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来'}, {mode: 'top',text: 'top:不缩放图片,只显示图片的顶部区域'}, {mode: 'bottom',text: 'bottom:不缩放图片,只显示图片的底部区域'}, {mode: 'center',text: 'center:不缩放图片,只显示图片的中间区域'}, {mode: 'left',text: 'left:不缩放图片,只显示图片的左边区域'}, {mode: 'right',text: 'right:不缩放图片,只显示图片的右边区域'}, {mode: 'top left',text: 'top left:不缩放图片,只显示图片的左上边区域'}, {mode: 'top right',text: 'top right:不缩放图片,只显示图片的右上边区域'}, {mode: 'bottom left',text: 'bottom left:不缩放图片,只显示图片的左下边区域'}, {mode: 'bottom right',text: 'bottom right:不缩放图片,只显示图片的右下边区域'}],src: '../resources/cat.jpg'},imageError(e) {console.log('image3发生error事件,携带值为', e.detail.errMsg)}})
属性 | 类型 | 默认值 | 说明 |
src | string | - | 要播放视频的资源地址,支持云文件 ID |
duration | number | - | 指定视频时长 |
controls | boolean | true | 是否显示默认播放控件(播放/暂停按钮、播放进度、时间) |
danmu-list | Object Array | - | 弹幕列表 |
danmu-btn | boolean | false | 是否显示弹幕按钮,只在初始化时有效,不能动态变更 |
enable-danmu | boolean | false | 是否展示弹幕,只在初始化时有效,不能动态变更 |
autoplay | boolean | false | 是否自动播放 |
loop | boolean | false | 是否循环播放 |
muted | boolean | false | 是否静音播放 |
initial-time | number | - | 指定视频初始播放位置 |
page-gesture | boolean | false | 在非全屏模式下,是否开启亮度与音量调节手势 |
direction | number | - | 设置全屏时视频的方向,不指定则根据宽高比自动判断。 有效值为0(正常竖向) 有效值为90(屏幕逆时针90度) 有效值为-90(屏幕顺时针90度) |
show-progress | boolean | true | 若不设置,宽度大于240时才会显示 |
show-fullscreen-btn | boolean | true | 是否显示全屏按钮 |
show-play-btn | boolean | true | 是否显示视频底部控制栏的播放按钮 |
show-center-play-btn | boolean | true | 是否显示视频中间的播放按钮 |
enable-progress-gesture | boolean | true | 是否开启控制进度的手势 |
object-fit | string | contain | 当视频大小与 video 容器大小不一致时,视频的表现形式。 contain:包含 fill:填充 cover:覆盖 |
poster | string | - | 视频封面的图片网络资源地址或云文件 ID。若 controls 属性值为 false 则设置 poster 无效 |
show-mute-btn | boolean | false | 是否显示静音按钮 |
title | string | - | 视频的标题,全屏时在顶部展示 |
play-btn-position | string | bottom | 播放按钮的位置, 有效值为bottom(controls bar 上) 有效值为center(视频中间) |
enable-play-gesture | boolean | false | 是否开启播放手势,即双击切换播放/暂停 |
auto-pause-if-navigate | boolean | true | 当跳转到其它小程序页面时,是否自动暂停本页面的视频 |
auto-pause-if-open-native | boolean | true | 当跳转到其它原生页面时,是否自动暂停本页面的视频 |
bindplay | eventhandle | - | 当开始/继续播放时触发 play 事件 |
bindpause | eventhandle | - | 当暂停播放时触发 pause 事件 |
bindended | eventhandle | - | 当播放到末尾时触发 ended 事件 |
bindtimeupdate | eventhandle | - | 播放进度变化时触发,event.detail = {currentTime, duration} 。触发频率250ms一次 |
bindfullscreenchange | eventhandle | - | 视频进入和退出全屏时触发,event.detail = {fullScreen, direction},direction 有效值为 vertical 或 horizontal |
bindwaiting | eventhandle | - | 视频出现缓冲时触发 |
binderror | eventhandle | - | 视频播放出错时触发 |
bindprogress | eventhandle | - | 加载进度变化时触发,只支持一段加载。event.detail = {buffered},百分比 |
<video>
默认宽度300px、高度225px,可通过 wxss 设置宽高。<view class="section tc"><video src="{{src}}" controls></video><view class="btn-area"><button bindtap="bindButtonTap">获取视频</button></view></view><view class="section tc"><videoid="myVideo"src="https://qzonestyle.gtimg.cn/qzone/qzact/act/external/qq-video/qq-video.mp4"danmu-list="{{danmuList}}"enable-danmudanmu-btncontrols></video><view class="btn-area"><button bindtap="bindButtonTap">获取视频</button><input bindblur="bindInputBlur" /><button bindtap="bindSendDanmu">发送弹幕</button></view></view>
function getRandomColor() {const rgb = []for (let i = 0; i < 3; ++i) {let color = Math.floor(Math.random() * 256).toString(16)color = color.length == 1 ? '0' + color : colorrgb.push(color)}return '#' + rgb.join('')}Page({onReady(res) {this.videoContext = wx.createVideoContext('myVideo')},inputValue: '',data: {src: '',danmuList: [{text: '第 1s 出现的弹幕',color: '#ff0000',time: 1},{text: '第 3s 出现的弹幕',color: '#ff00ff',time: 3}]},bindInputBlur(e) {this.inputValue = e.detail.value},bindButtonTap() {const that = thiswx.chooseVideo({sourceType: ['album', 'camera'],maxDuration: 60,camera: ['front', 'back'],success(res) {that.setData({src: res.tempFilePath})}})},bindSendDanmu() {this.videoContext.sendDanmu({text: this.inputValue,color: getRandomColor()})}})
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
resource-width | number | 800 | 否 | 组件使用的 video 视频资源的宽度(单位:px) | 1.4.99 |
resource-height | number | 400 | 否 | 组件使用的 video 视频资源的高度(单位:px) | 1.4.99 |
canvas-style | string | width: 400px;height: 400px; | 否 | 用于设置动画画布的 CSS 样式 | 1.4.99 |
path | string | | 是 | 动画资源地址,支持相对路径以及远程地址。如果是远程路径,response header 里需要设置 Access-Control-Allow-Origin 来防止跨域问题 | 1.4.99 |
loop | boolean | false | 否 | 动画是否循环播放 | 1.4.99 |
autoplay | boolean | false | 否 | 动画是否自动 | 1.4.99 |
alpha-direction | string | left | 否 | 视频资源中 alpha 通道的方向,left 表示 alpha 通道在资源的左边,right 表示 alpha 通道在资源的右边。 | 1.4.99 |
bindstarted | eventhandle | - | 否 | 动画开始播放的回调 | 1.4.99 |
bindended | eventhandle | - | 否 | 当播放到末尾时触发 ended 事件(自然播放结束会触发回调,循环播放结束及暂停动画不会触发) | 1.4.99 |
<view class="wrap"><view class="card-area"><view class="top-description border-bottom"><view>视频右侧为动画 alpha 通道信息</view><view>alpha-direction='right'</view></view><view class="video-area"><animation-videopath="{{rightAlphaSrcPath}}"loop="{{loop}}"resource-width="800"resource-height="400"canvas-style="width:200px;height:200px"autoplay="{{autoplay}}"bindstarted="onStarted"bindended="onEnded"alpha-direction='right'></animation-video></view></view><view class="card-area"><view class="top-description border-bottom"><view>视频左侧为动画 alpha 通道信息</view><view>alpha-direction='left'</view></view><view class="video-area"><animation-videopath="{{leftAlphaSrcPath}}"loop="{{loop}}"resource-width="800"resource-height="400"canvas-style="width:200px;height:200px"autoplay="{{autoplay}}"bindstarted="onStarted"bindended="onEnded"alpha-direction='left'></animation-video></view></view></view>Page({data: {loop: true,leftAlphaSrcPath: 'https://efe-h2.cdn.bcebos.com/ceug/resource/res/2020-1/1577964961344/003e2f0dcd81.mp4',rightAlphaSrcPath: 'https://b.bdstatic.com/miniapp/assets/docs/alpha-right-example.mp4',autoplay: true},onStarted() {console.log('===onStarted');},onEnded() {console.log('===onEnded');}})
属性 | 类型 | 默认值 | 说明 |
mode | string | normal | 有效值为 normal, scanCode |
device-position | string | back | 前置或后置,值为 front, back |
flash | string | auto | 闪光灯,值为 auto, on, off |
bindstop | eventhandle | - | 摄像头在非正常终止时触发,如退出后台等情况 |
binderror | eventhandle | - | 用户不允许使用摄像头时触发 |
bindscancode | eventhandle | - | 在扫码识别成功时触发,仅在 mode="scanCode" 时生效 |
<!-- camera.wxml --><cameradevice-position="back"flash="off"binderror="error"style="width: 100%; height: 300px;"></camera><button type="primary" bindtap="takePhoto">拍照</button><view>预览</view><image mode="widthFix" src="{{src}}"></image>
// camera.jsPage({takePhoto() {const ctx = wx.createCameraContext()ctx.takePhoto({quality: 'high',success: (res) => {this.setData({src: res.tempImagePath})}})},error(e) {console.log(e.detail)}})
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
src | string | - | 否 | 音视频地址。目前仅支持 flv, rtmp 格式 | 1.4.96 |
mode | string | live | 否 | 模式 | 1.4.96 |
autoplay | boolean | false | 否 | 自动播放 | 1.4.96 |
muted | boolean | false | 否 | 是否静音 | 1.4.96 |
orientation | string | vertical | 否 | 画面方向 | 1.4.96 |
object-fit | string | contain | 否 | 填充模式,可选值有 contain, fillCrop | 1.4.96 |
min-cache | number | 1 | 否 | 最小缓冲区,单位 s | 1.4.96 |
max-cache | number | 3 | 否 | 最大缓冲区,单位 s | 1.4.96 |
sound-mode | string | speaker | 否 | 声音输出方式 | 1.4.96 |
auto-pause-if-navigate | boolean | true | 否 | 当跳转到其它小程序页面时,是否自动暂停本页面的实时音视频播放 | 1.4.96 |
auto-pause-if-open-native | boolean | true | 否 | 当跳转到其它 QQ 原生页面时,是否自动暂停本页面的实时音视频播放 | 1.4.96 |
enable-metadata | boolean | false | 否 | 是否回调 metadata | 1.4.96 |
bindstatechange | eventhandle | - | 否 | 播放状态变化事件,detail = {code} | 1.4.96 |
bindfullscreenchange | eventhandle | - | 否 | 全屏变化事件,detail = {direction, fullScreen} | 1.4.96 |
bindnetstatus | eventhandle | - | 否 | 网络状态通知,detail = {info} | 1.4.96 |
bindmetadatachange | eventhandle | - | 否 | metadata通知,detail = {info} | 1.4.96 |
值 | 说明 | 最低版本 |
live | 直播 | 1.4.96 |
值 | 说明 | 最低版本 |
vertical | 竖直 | 1.4.96 |
horizontal | 水平 | 1.4.96 |
值 | 说明 | 最低版本 |
contain | 图像长边填满屏幕,短边区域会被填充黑色 | 1.4.96 |
fillCrop | 图像铺满屏幕,超出显示区域的部分将被裁掉 | 1.4.96 |
值 | 说明 | 最低版本 |
speaker | 扬声器 | 1.4.96 |
代码 | 说明 |
2001 | 已经连接服务器 |
2002 | 已经连接服务器,开始拉流 |
2003 | 网络接收到首个视频数据包(IDR) |
2004 | 视频开始播放 |
2006 | 视频播放结束 |
2007 | 视频播放 Loading |
2008 | 解码器启动 |
2009 | 视频分辨率改变 |
-2301 | 网络断连,且多次重连无效,更多重试请自行重启播放 |
-2302 | 获取加速拉流地址失败 |
2101 | 当前视频帧解码失败 |
2102 | 当前音频帧解码失败 |
2103 | 网络断连,已启动自动重连 |
2104 | 网络来包不稳。可能是下行带宽不足,或由于主播端出流不均匀 |
2105 | 当前视频播放出现卡顿 |
2106 | 硬解启动失败,采用软解 |
2107 | 当前视频帧不连续,可能丢帧 |
2108 | 当前流硬解第一个I帧失败,SDK 自动切软解 |
3001 | RTMP -DNS 解析失败 |
3002 | RTMP 服务器连接失败 |
3003 | RTMP 服务器握手失败 |
3005 | RTMP 读/写失败 |
键名 | 说明 |
videoBitrate | 当前视频数据接收比特率,单位:kbps |
audioBitrate | 当前音频数据接收比特率,单位:kbps |
videoFPS | 当前视频帧率 |
videoGOP | 当前视频GOP,也就是每两个关键帧(I帧)间隔时长,单位:s |
netSpeed | 当前的发送/接收速度 |
netJitter | 网络抖动情况,抖动越大,网络越不稳定 |
videoWidth | 视频画面的宽度 |
videoHeight | 视频画面的高度 |
<live-player id="playerid" src="https://domain/pull_stream" mode="live" autoplay bindstatechange="statechange" binderror="error" />
Page({statechange(e) {console.log('live-player code:', e.detail.code)},error(e) {console.error('live-player error:', e.detail.errMsg)}})
live-player
默认宽度300px、高度225px,可通过 wxss 设置宽高。scope.camera
、scope.record
。属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
url | string | - | 否 | 推流地址。目前仅支持 rtmp | 1.4.96 |
mode | string | RTC | 否 | SD(标清), HD(高清), FHD(超清), RTC(实时通话) | 1.4.96 |
autopush | boolean | false | 否 | 自动推流 | 1.4.96 |
muted | boolean | false | 否 | 是否静音 | 1.4.96 |
enable-camera | boolean | true | 否 | 开启摄像头 | 1.4.96 |
auto-focus | boolean | true | 否 | 自动聚集 | 1.4.96 |
orientation | string | vertical | 否 | 画面方向 | 1.4.96 |
beauty | number | 0 | 否 | 美颜,取值范围 0-9 ,0 表示关闭 | 1.4.96 |
whiteness | number | 0 | 否 | 美白,取值范围 0-9 ,0 表示关闭 | 1.4.96 |
aspect | string | 9:16 | 否 | 宽高比,可选值有 3:4, 9:16 | 1.4.96 |
min-bitrate | number | 200 | 否 | 最小码率 | 1.4.96 |
max-bitrat | number | 1000 | 否 | 最大码率 | 1.4.96 |
audio-quality | string | height | 否 | 高音质(48KHz)或低音质(16KHz),值为high, low | 1.4.96 |
waiting-image | string | - | 否 | 进入后台时推流的等待画面 | 1.4.96 |
waiting-image-hash | string | - | 否 | 等待画面资源的 MD5 值 | 1.4.96 |
zoom | boolean | false | 否 | 调整焦距 | 1.4.96 |
device-position | string | - | 否 | 前置或后置,值为 front,back | 1.4.96 |
background-mute | boolean | false | 否 | 进入后台时是否静音 | 1.4.96 |
mirror | boolean | false | 否 | 设置推流画面是否镜像,产生的效果在 live-player 反应到 | 1.4.96 |
bindstatechange | eventhandle | - | 否 | 状态变化事件,detail = {code} | 1.4.96 |
bindnetstatus | eventhandle | - | 否 | 网络状态通知,detail = {info} | 1.4.96 |
binderror | eventhandle | - | 否 | 渲染错误事件,detail = {errMsg, errCode} | 1.4.96 |
bindbgmstart | eventhandle | - | 否 | 背景音开始播放时触发 | 1.4.96 |
bindbgmprogress | eventhandle | - | 否 | 背景音进度变化时触发,detail = {progress, duration} | 1.4.96 |
bindbgmcomplete | eventhandle | - | 否 | 背景音播放完成时触发 | 1.4.96 |
audio-reverb-type | number | 0 | 否 | 混响模式(0~6):"关闭混响", "KTV", "小房间", "大会堂", "低沉", "洪亮", "磁性" | 1.4.96 |
值 | 说明 | 最低版本 |
vertical | 竖直 | 1.4.96 |
horizontal | 水平 | 1.4.96 |
代码 | 说明 |
10001 | 用户禁止使用摄像头 |
10002 | 用户禁止使用录音 |
10003 | 背景音资源(BGM)加载失败 |
10004 | 等待页面资源(waiting-image)加载失败 |
代码 | 说明 |
1001 | 已经连接推流服务器 |
1002 | 已经与服务器握手完毕,开始推流 |
1003 | 打开摄像头成功 |
1004 | 录屏启动成功 |
1005 | 推流动态调整分辨率 |
1006 | 推流动态调整码率 |
1007 | 首帧画面采集完成 |
1008 | 编码器启动 |
-1301 | 打开摄像头失败 |
-1302 | 打开麦克风失败 |
-1303 | 视频编码失败 |
-1304 | 音频编码失败 |
-1305 | 不支持的视频分辨率 |
-1306 | 不支持的音频采样率 |
-1307 | 网络断连,且经多次重连抢救无效,更多重试请自行重启推流 |
-1308 | 开始录屏失败,可能是被用户拒绝 |
-1309 | 录屏失败,不支持的 Android 系统版本,需要5.0以上的系统 |
-1310 | 录屏被其他应用打断了 |
-1311 | Android Mic 打开成功,但是录不到音频数据 |
-1312 | 录屏动态切横竖屏失败 |
1101 | 网络状况不佳:上行带宽太小,上传数据受阻 |
1102 | 网络断连, 已启动自动重连 |
1103 | 硬编码启动失败,采用软编码 |
1104 | 视频编码失败 |
1105 | 新美颜软编码启动失败,采用老的软编码 |
1106 | 新美颜软编码启动失败,采用老的软编码 |
3001 | RTMP -DNS 解析失败 |
3002 | RTMP 服务器连接失败 |
3003 | RTMP 服务器握手失败 |
3004 | RTMP 服务器主动断开,请检查推流地址的合法性或防盗链有效期 |
3005 | RTMP 读/写失败 |
键名 | 说明 |
videoBitrate | 当前视频编/码器输出的比特率,单位:kbps |
audioBitrate | 当前音频编/码器输出的比特率,单位:kbps |
videoFPS | 当前视频帧率 |
videoGOP | 当前视频 GOP,也就是每两个关键帧(I帧)间隔时长,单位:s |
netSpeed | 当前的发送/接收速度 |
netJitter | 网络抖动情况,抖动越大,网络越不稳定 |
videoWidth | 视频画面的宽度 |
videoHeight | 视频画面的高度 |
<live-pusher url="https://domain/push_stream" mode="RTC" autopush bindstatechange="statechange" style="width: 300px; height: 225px;" />Page({statechange(e) {console.log('live-pusher code:', e.detail.code)}})
本页内容是否解决了您的问题?