video ☁️

1.0.0 新版功能: 低版本需做 兼容处理

2.3.0 新版功能: 支持云文件ID。

视频组件。相关api:wx.createVideoContext()

属性

类型

默认值

必填

说明

最低版本

src

string

要播放视频的资源地址,

支持云文件ID(2.3.0)

1.0.0

duration

number

指定视频时长

1.1.0

controls

boolean

true

是否显示默认播放控件

(播放/暂停按钮、播放进度、时间)

1.0.0

danmu-list

Array.<object>

弹幕列表

1.0.0

danmu-btn

boolean

false

是否显示弹幕按钮,

只在初始化时有效,

不能动态变更

1.0.0

enable-danmu

boolean

false

是否展示弹幕,

只在初始化时有效,

不能动态变更

1.0.0

autoplay

boolean

false

是否自动播放

1.0.0

loop

boolean

false

是否循环播放

1.4.0

muted

boolean

false

是否静音播放

1.4.0

initial-time

number

0

指定视频初始播放位置

1.6.0

page-gesture

boolean

false

在非全屏模式下,

是否开启亮度与音量调节手势

(废弃,见 vslide-gesture)

1.6.0

direction

number

设置全屏时视频的方向,

不指定则根据宽高比自动判断

1.7.0

show-progress

boolean

true

若不设置,宽度大于

240时才会显示

1.9.0

show-fullscreen-btn

boolean

true

是否显示全屏按钮

1.9.0

show-play-btn

boolean

true

是否显示视频底部

控制栏的播放按钮

1.9.0

show-center-play-btn

boolean

true

是否显示视频中间的播放按钮

1.9.0

enable-progress-gesture

boolean

true

是否开启控制进度的手势

1.9.0

object-fit

string

contain

当视频大小与 video

容器大小不一致时,

视频的表现形式

1.0.0

poster

string

视频封面的图片网络资源地址

或云文件ID(2.3.0)

若 controls 属性值为 false

则设置 poster 无效

1.0.0

show-mute-btn

boolean

false

是否显示静音按钮

2.4.0

title

string

视频的标题,全屏时在顶部展示

2.4.0

play-btn-position

string

bottom

播放按钮的位置

2.4.0

enable-play-gesture

boolean

false

是否开启播放手势,

即双击切换播放/暂停

2.4.0

auto-pause-if-navigate

boolean

true

当跳转到其它小程序页面时,

是否自动暂停本页面的视频

2.5.0

auto-pause-if-open-native

boolean

true

当跳转到其它微信原生页面时,

是否自动暂停本页面的视频

2.5.0

vslide-gesture

boolean

false

在非全屏模式下,是否开启亮度

与音量调节手势

(同 page-gesture)

2.6.2

vslide-gesture-in-fullscreen

boolean

true

在全屏模式下,是否开启亮度

与音量调节手势

2.6.2

video 组件 绑定事件

属性

类型

必填

说明

最低版本

bindplay

eventhandle

当开始/继续播放时触发play事件

1.0.0

bindpause

eventhandle

当暂停播放时触发 pause 事件

1.0.0

bindended

eventhandle

当播放到末尾时触发 ended 事件

1.0.0

bindtimeupdate

eventhandle

播放进度变化时触发,event.detail = {currentTime, duration} 。触发频率 250ms 一次

1.0.0

bindfullscreenchange

eventhandle

视频进入和退出全屏时触发,event.detail = {fullScreen, direction},direction 有效值为 vertical 或 horizontal

1.4.0

bindwaiting

eventhandle

视频出现缓冲时触发

1.7.0

binderror

eventhandle

视频播放出错时触发

1.7.0

bindprogress

eventhandle

加载进度变化时触发,只支持一段加载。event.detail = {buffered},百分比

2.4.0

direction 的合法值

说明

0

正常竖向

90

屏幕逆时针90度

-90

屏幕顺时针90度

object-fit 的合法值

说明

contain

包含

fill

填充

cover

覆盖

play-btn-position 的合法值

说明

bottom

controls bar上

center

视频中间

小技巧

<video> 默认宽度300px、高度225px,可通过wxss设置宽高。

小技巧

请注意原生组件使用限制

支持的格式

格式

iOS

Android

mp4

mov

x

m4v

x

3gp

avi

x

m3u8

webm

x

支持的编码格式

格式

iOS

Android

H.264

HEVC

MPEG-4

VP9

x

示例代码

在开发者工具中预览效果

<view class="section tc">
  <video src="{{src}}" controls></video>
  <view class="btn-area">
    <button bindtap="bindButtonTap">获取视频</button>
  </view>
</view>

<view class="section tc">
  <video
    id="myVideo"
    src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
    danmu-list="{{danmuList}}"
    enable-danmu
    danmu-btn
    controls
  ></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 : color
    rgb.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 = this
    wx.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()
    })
  }
})
https://developers.weixin.qq.com/miniprogram/dev/image/pic/video.png?t=19041921