更新时间:2020-11-19 14:18
基础库版本 1.14.1 开始支持本组件。
在 Android 工程中,从 mPaaS 10.1.58.12 开始支持视频组件,且需要在工程中添加 小程序-视频 组件后方可使用,见下图。
您可通过 video 组件上传并播放视频。相关 API:my.createVideoContext。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
style | String | - | 内联样式。 |
class | String | - | 外部样式名。 |
src | String | - | 要播放视频的资源地址,支持优酷视频编码。 src 支持的协议如下: apFilePath: https://resource/xxx.video |
poster | String | - | 视频封面图的 URL,支持 jpg、png 等图片,如 https://***.jpg 。如果不传,则默认取视频的首帧图作为封面图。 |
objectFit | String | contain | 当视频大小与 video 容器大小不一致时,视频的表现形式。contain:包含,fill:填充。 |
initial-time | Number | - | 指定视频初始播放位置,单位为 s。 |
duration | Number | - | 指定视频时长,单位为 s,默认读取视频本身时长信息。 |
controls | Boolean | true | 是否显示默认播放控件(底部工具条,包括播放/暂停按钮、播放进度、时间)。 |
autoplay | Boolean | false | 是否自动播放。该功能在 Android 10 系统上有兼容性问题,建议不要开启自动播放。 |
direction | Number | - | 设置全屏时视频的方向,不指定则根据宽高比自动判断。有效值为:
|
loop | Boolean | false | 是否循环播放。 |
muted | Boolean | false | 是否静音播放。 |
show-fullscreen-btn | Boolean | true | 是否显示全屏按钮。 |
show-play-btn | Boolean | true | 是否显示视频底部控制栏的播放按钮。 |
show-center-play-btn | Boolean | true | 是否显示视频中间的播放按钮。 |
show-mute-btn | Boolean | true | 是否展示工具栏上的静音按钮。 |
show-thin-progress-bar | Boolean | false | 当底部工具条隐藏时,是否显示细进度条(controls=false 时设置无效)。 |
enableProgressGesture | Boolean | true | 全屏模式下是否开启控制进度的手势。 |
mobilenetHintType | Number | 1 | 移动网络提醒样式:
|
onPlay | EventHandle | - | 当开始/继续播放时触发 play 事件。 |
onPause | EventHandle | - | 当暂停播放时触发 pause 事件。 |
onEnded | EventHandle | - | 当播放到末尾时触发 ended 事件。 |
onTimeUpdate | EventHandle | - | 播放进度变化时触发,event.detail = {currentTime: '当前播放时间',userPlayDuration:'用户实际观看时长',videoDuration:'视频总时长'} |
onLoading | EventHandle | - | 视频出现缓冲时触发。 |
onError | EventHandle | - | 视频播放出错时触发(见下方 错误码 列表)。 |
onFullScreenChange | EventHandle | - | 视频进入和退出全屏时触发,event.detail = {fullScreen, direction} ,direction 取为 vertical 或 horizontal。 |
onTap | EventHandle | - | 点击视频 view 时触发,event.detail = {ptInView:{x:0,y:0}} |
onUserAction | EventHandle | - | 用户操作事件,event.detail = {tag:"mute", value:0} ,tag 为用户操作的元素,目前支持的 tag 有:
|
onStop | EventHandle | - | 视频播放终止。 |
onRenderStart | EventHandle | - | 当视频加载完真正开始播放时触发。 |
onTap | EventHandle | - | 点击视频 view 时触发,event.detail = {ptInView:{x:0,y:0}} |
<view>
<video id="myVideo"
src="{{video.src}}"
controls="{{video.showAllControls}}"
loop="{{video.isLooping}}"
muted="{{video.muteWhenPlaying}}"
show-fullscreen-btn="{{video.showFullScreenButton}}"
show-play-btn="{{video.showPlayButton}}"
show-center-play-btn="{{video.showCenterButton}}"
object-fit="{{video.objectFit}}"
autoplay="{{video.autoPlay}}"
direction="{{video.directionWhenFullScreen}}"
initial-time="{{video.initTime}}"
mobilenetHintType="{{video.mobilenetHintType}}"
onPlay="onPlay"
onPause="onPause"
onEnded="onEnded"
onError="onPlayError"
onTimeUpdate="onTimeUpdate"
/>
</view>
Page({
data: {
status: "inited",
time: "0",
video: {
src: "http://flv.bn.netease.com/tvmrepo/2012/7/C/7/E868IGRC7-mobile.mp4",
showAllControls: false,
showPlayButton: false,
showCenterButton: true,
showFullScreenButton: true,
isLooping: false,
muteWhenPlaying: false,
initTime: 0,
objectFit: "contain",
autoPlay: false,
directionWhenFullScreen: 90,
mobilenetHintType: 2,
},},
onPlay(e) {
console.log('onPlay');
},
onPause(e) {
console.log('onPause');
},
onEnded(e) {
console.log('onEnded');
},
onPlayError(e) {
console.log('onPlayError, e=' + JSON.stringify(e));
},
onTimeUpdate(e) {
console.log('onTimeUpdate:', e.detail.currentTime);
},
});
错误码 | 大类 | 详细说明 |
---|---|---|
1 | loading、playing 过程中都可能抛出 | 未知错误。 |
1002 | loading、playing 过程中都可能抛出 | 播放器内部错误。 |
1005 | loading、playing 过程中都可能抛出 | 网络连接失败。 |
1006 | loading 异常 | 数据源错误。 |
1007 | loading 异常 | 播放器准备失败。 |
1008 | loading 异常 | 网络错误。 |
1009 | loading 异常 | 搜索视频出错(源出错的一种)。 |
1010 | loading 异常 | 准备超时,也可认为是网络太慢或数据源太慢导致的播放失败。 |
400 | loading 异常 | 读 ups 信息超时。 |
3001 | loading 异常 | audio 渲染出错。 |
3002 | loading 异常 | 硬解码错误。 |
2004 | playing 过程中可能抛出 | 播放过程中加载时间超时。 |
1023 | playing 过程中可能抛出 | 播放中内部错误(ffmpeg 内错误)。 |
iOS、Android 支持以下视频封装格式:
iOS、Android 支持以下编码格式:
onTimeUpdate
方法中获取。
在文档使用中是否遇到以下问题
更多建议
匿名提交