WeChat Open Platform

Mini Programs Documentation

video

Video

Attribute name Type Default value Description Minimum version
src String Resource address for video that needs to be played
duration Number Duration of specified video {%version('1.1.0')%}
controls Boolean true Whether default playback controls displayed (Play/Pause buttons, playback progress, time)
danmu-list Object Array Danmu list
danmu-btn Boolean false Whether Danmu button displayed, only effective during initialization, cannot be dynamically changed
enable-danmu Boolean false Whether danmu displayed, only effective during initialization, cannot be dynamically changed
autoplay Boolean false Whether playback is automatic
bindplay EventHandle play event triggered when starting/continuing playback
bindpause EventHandle pause event triggered when playback paused
bindended EventHandle ended event triggered when playback ends
bindtimeupdate EventHandle Triggered when playback progress changes, event.detail = {currentTime: 'current play time'}. Trigger frequency should be once every 250ms.
objectFit String contain Video display mode when video size is inconsistent with video container size. Contain, fill, cover.
poster String Audio cover image resource address on default control, if controls attribute value is false, then setting poster will be ineffective  

Recognized video tag width 300px, height 225px. Width and height need to be set using wxss.

Sample code:

<view class="section tc">
  <video src="{{src}}"   controls ></video>
  <view class="btn-area">
    <button bindtap="bindButtonTap">Get video</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">Get video</button>
    <input bindblur="bindInputBlur"/>
    <button bindtap="bindSendDanmu">Send danmu</button>
  </view>
</view>
function getRandomColor () {
  let 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: function (res) {
    this.videoContext = wx.createVideoContext('myVideo')
  },
  inputValue: '',
    data: {
        src: '',
    danmuList: [
      {
        text: 'Danmu that appears in 1st second',
        color: '#ff0000',
        time: 1
      },
      {
        text: 'Danmu that appears in 3rd second',
        color: '#ff00ff',
        time: 3
    }]
    },
  bindInputBlur: function(e) {
    this.inputValue = e.detail.value
  },
  bindButtonTap: function() {
    var that = this
    wx.chooseVideo({
      sourceType: ['album', 'camera'],
      maxDuration: 60,
      camera: ['front','back'],
      success: function(res) {
        that.setData({
          src: res.tempFilePath
        })
      }
    })
  },
  bindSendDanmu: function () {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  }
})

video

Related apiļ¼šwx.createVideoContext

Bugs & Tips

  1. tip: The video component is a native component created by the client, its level is the highest.
  2. tip: Please do not use the video component in scroll-view.
  3. tip: css animation is ineffective on the video component.