微信小程序媒体组件 video（视频）

属性名	类型	默认值	说明	最低版本
src	string		要播放视频的资源地址
initial-time	number		指定视频初始播放位置	1.6.0
duration	number		指定视频时长	1.1.0
controls	boolean	true	是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
danmu-list	object array		弹幕列表
danmu-btn	boolean	false	是否显示弹幕按钮，只在初始化时有效，不能动态变更
enable-danmu	boolean	false	是否展示弹幕，只在初始化时有效，不能动态变更
autoplay	boolean	false	是否自动播放
loop	boolean	false	是否循环播放	1.4.0
muted	boolean	false	是否静音播放	1.4.0
page-gesture	boolean	false	在非全屏模式下，是否开启亮度与音量调节手势	1.6.0
direction	number		设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度）	1.7.0
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	1.4.0
objectfit	string	contain	当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖
poster	string		视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效

video标签认宽度300px、高度225px，设置宽高需要通过wxss设置width和height。

示例代码：

<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 () {
  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()
    })
  }
})

video

bug & tip

tip:video组件是由客户端创建的原生组件，它的层级是最高的。
tip: 请勿在scroll-view中使用video组件。
tip:css动画对video组件无效。