video

Base library 1.0.0 starts to support, and low versions need to be compatible.

Video (v2.4.0 supports same-layer rendering). Related api: wx.createVideoContext

The legal value of the direction

The legal value of object-fit

The legal value of play-btn-position

The legal value of picture-in-picture-mode

Tips

1. tip:' Video has a default width of 300px and a height of 225px, and can be set wide and high via wxss.
2. tip: Video supports same-layer rendering from 2.4.0.

The supported format

The supported encoding format

Description of the characteristics of the small window

The video window supports three trigger modes (setting the picture-in-picture-mode property on the component):

1. Push mode, where a window appears when jumping from the current page to the next page (page stack push)
2. pop mode, i.e. triggered when leaving the current page (page stack pop)
3. Both of these routing behaviors trigger small windows

In addition, the windows support the following features:

• The size of the small window container is automatically determined based on the size of the original component
• Click on the small window and the user will be navigated back to the player page corresponding to the small window
• Once the window appears, the user can click the close button in the upper right corner of the window or call the context.exitPictureInPicture() interface to close the window

When the player enters window mode, the page on which the player is located is in a hide state (triggering the onHide life cycle) and the page is not destroyed. When the window is closed, the page on which the player is located is unload (triggering the onUnload lifecycle).

The sample code

Video label recognized width 300px, height 225px, set width height needs to be set via wxsswidth and height.

Example code:

<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" rel="external nofollow"  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 () {
  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: '第 1s 出现的弹幕',
        color: '#ff0000',
        time: 1
      },
      {
        text: '第 3s 出现的弹幕',
        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()
    })
  }
})

Related API: wx.createVideoContext

Bug & Tip

1. Tip:video component is a native component created by the client and has the highest hierarchy.
2. tip: Do not use the video component in scroll-view.
3. tip:css animation is not valid for the video component.