.. _video:

:wx_comp:`video ☁️ <video>`
==============================

.. versionadded:: 1.0.0 低版本需做 :ref:`compatibility` 。

.. versionadded:: 2.3.0 支持云文件ID。

视频组件。相关api：:func:`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              |     |
+------------------------------+----------------+---------+------+---------------------------------+--------------------+-----+

.. table:: video 组件 绑定事件
   :widths: auto
   :align: left

   +------------------------------+---------------+------+-------------------------------------------------------------------------------------------------------------+----------+
   |             属性             |      类型     | 必填 |                                                    说明                                                     | 最低版本 |
   +==============================+===============+======+=============================================================================================================+==========+
   | 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 | 视频中间       |
+--------+----------------+


.. tip:: <video> 默认宽度300px、高度225px，可通过wxss设置宽高。

.. tip:: 请注意原生组件使用限制

支持的格式

+------+-----+---------+
| 格式 | iOS | Android |
+======+=====+=========+
| mp4  | √   | √       |
+------+-----+---------+
| mov  | √   | x       |
+------+-----+---------+
| m4v  | √   | x       |
+------+-----+---------+
| 3gp  | √   | √       |
+------+-----+---------+
| avi  | √   | x       |
+------+-----+---------+
| m3u8 | √   | √       |
+------+-----+---------+
| webm | x   | √       |
+------+-----+---------+

支持的编码格式

+--------+-----+---------+
|  格式  | iOS | Android |
+========+=====+=========+
| H.264  | √   | √       |
+--------+-----+---------+
| HEVC   | √   | √       |
+--------+-----+---------+
| MPEG-4 | √   | √       |
+--------+-----+---------+
| VP9    | x   | √       |
+--------+-----+---------+

示例代码

在开发者工具中预览效果

.. code:: html

  <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>

.. code:: js

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

.. image:: https://developers.weixin.qq.com/miniprogram/dev/image/pic/video.png?t=19041921