video

视频播放组件。

属性说明

属性名	类型	默认值	说明	平台差异说明
src	String		要播放视频的资源地址
autoplay	Boolean	false	是否自动播放
loop	Boolean	false	是否循环播放
muted	Boolean	false	是否静音播放
initial-time	Number		指定视频初始播放位置，单位为秒（s）。
duration	Number		指定视频时长，单位为秒（s）。	抖音小程序、快手小程序不支持
controls	Boolean	true	是否显示默认播放控件（播放/暂停按钮、播放进度、时间）	快手小程序不支持
danmu-list	Object Array		弹幕列表	抖音小程序、快手小程序不支持
danmu-btn	Boolean	false	是否显示弹幕按钮，只在初始化时有效，不能动态变更	抖音小程序、快手小程序不支持
enable-danmu	Boolean	false	是否展示弹幕，只在初始化时有效，不能动态变更	抖音小程序、快手小程序不支持
page-gesture	Boolean	false	在非全屏模式下，是否开启亮度与音量调节手势	微信小程序、H5
direction	Number		设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度）	H5、快手小程序不支持
show-progress	Boolean	true	若不设置，宽度大于 240 时才会显示	抖音小程序、快手小程序不支持
show-fullscreen-btn	Boolean	true	是否显示全屏按钮
show-play-btn	Boolean	true	是否显示视频底部控制栏的播放按钮
show-center-play-btn	Boolean	true	是否显示视频中间的播放按钮	抖音小程序不支持
enable-progress-gesture	Boolean	true	是否开启控制进度的手势	抖音小程序不支持
object-fit	String	contain	当视频大小与 video 容器大小不一致时，视频的表现形式。 contain ：包含， fill ：填充， cover ：覆盖	微信小程序、抖音小程序、H5
poster	String		视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效
show-mute-btn	Boolean	false	是否显示静音按钮	微信小程序、抖音小程序
title	String		视频的标题，全屏时在顶部展示	微信小程序
play-btn-position	String	bottom	播放按钮的位置	微信小程序、抖音小程序
enable-play-gesture	Boolean	false	是否开启播放手势，即双击切换播放/暂停	微信小程序、快手小程序
auto-pause-if-navigate	Boolean	true	当跳转到其它小程序页面时，是否自动暂停本页面的视频	微信小程序
auto-pause-if-open-native	Boolean	true	当跳转到其它微信原生页面时，是否自动暂停本页面的视频	微信小程序
vslide-gesture	Boolean	false	在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture ）	微信小程序、快手小程序
vslide-gesture-in-fullscreen	Boolean	true	在全屏模式下，是否开启亮度与音量调节手势	微信小程序、快手小程序
ad-unit-id	String		视频前贴广告单元ID，更多详情可参考开放能力视频前贴广告	微信小程序
poster-for-crawler	String		用于给搜索等场景作为视频封面展示，建议使用无播放 icon 的视频封面图，只支持网络地址	微信小程序
is-live	Boolean	false	是否为直播源	微信小程序（2.28.1+）
@play	EventHandle		当开始/继续播放时触发 play 事件
@pause	EventHandle		当暂停播放时触发 pause 事件
@ended	EventHandle		当播放到末尾时触发 ended 事件
@timeupdate	EventHandle		播放进度变化时触发， event.detail = {currentTime, duration} 。触发频率 250ms 一次
@fullscreenchange	EventHandle		当视频进入和退出全屏时触发， event.detail = {fullScreen, direction} ， direction 取为 vertical 或 horizontal
@waiting	EventHandle		视频出现缓冲时触发	快手小程序不支持
@error	EventHandle		视频播放出错时触发
@progress	EventHandle		加载进度变化时触发，只支持一段加载。 event.detail = {buffered} ，百分比	微信小程序、抖音小程序、H5
@loadedmetadata	EventHandle		视频元数据加载完成时触发。 event.detail = {width, height, duration}	微信小程序、H5、抖音小程序
@controlstoggle	EventHandle		切换 controls 显示隐藏时触发。 event.detail = {show}	微信小程序2.9.5

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

direction 的合法值

值	说明
0	正常竖向
90	屏幕逆时针90度
-90	屏幕顺时针90度

object-fit 的合法值

值	说明
contain	包含
fill	填充
cover	覆盖

play-btn-position 的合法值

值	说明
bottom	controls bar上
center	视频中间

示例 查看示例

Vue

<template>
  <view>
    <view class="uni-padding-wrap uni-common-mt">
      <view>
        <video
          id="myVideo"
          src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
          @error="videoErrorCallback"
          :danmu-list="danmuList"
          enable-danmu
          danmu-btn
          controls
        />
      </view>
    </view>
  </view>
</template>

<template>
  <view>
    <view class="uni-padding-wrap uni-common-mt">
      <view>
        <video
          id="myVideo"
          src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
          @error="videoErrorCallback"
          :danmu-list="danmuList"
          enable-danmu
          danmu-btn
          controls
        />
      </view>
    </view>
  </view>
</template>

Script

<script>
export default {
  data() {
    return {
      src: '',
      danmuList: [
        {
          text: '第 1s 出现的弹幕',
          color: '#ff0000',
          time: 1,
        },
        {
          text: '第 3s 出现的弹幕',
          color: '#ff00ff',
          time: 3,
        },
      ],
      danmuValue: '',
    },
  },
  methods: {
    videoErrorCallback: function(e) {
      qin.showModal({
        content: e.target.errMsg,
        showCancel: false,
      });
    },
  },
};
</script>

<script>
export default {
  data() {
    return {
      src: '',
      danmuList: [
        {
          text: '第 1s 出现的弹幕',
          color: '#ff0000',
          time: 1,
        },
        {
          text: '第 3s 出现的弹幕',
          color: '#ff00ff',
          time: 3,
        },
      ],
      danmuValue: '',
    },
  },
  methods: {
    videoErrorCallback: function(e) {
      qin.showModal({
        content: e.target.errMsg,
        showCancel: false,
      });
    },
  },
};
</script>

相关api：qin.createVideoContext

注意

• 视频播放格式说明：

  • H5平台：支持的视频格式视浏览器而定，一般通用的都支持：mp4、webm 和 ogg。（<video/> 组件编译到 H5 时会替换为标准 html 的 video 标签）。H5端也可以自行在条件编译里使用video.js等三方库，这些库可以自动判断环境兼容以决定使用标准video或flash来播放。
  • 小程序平台：各小程序平台支持程度不同，详见各家文档：微信小程序视频组件文档、支付宝小程序video组件、百度小程序视频组件文档、抖音小程序视频组件文档、QQ小程序视频组件文档、华为快应用视频组件文档

• video全屏后，如何自行绘制界面？比如加个标题、加个分享按钮

  • 微信基础库 2.4.0 以上可通过cover-view来绘制界面覆盖元素
  • H5端可通过通用h5做法实现
  • 其他端无法全屏后自行绘制内容

• 如何实现抖音、映客等全屏视频垂直滑动切换效果？

  • 微信基础库 2.4.0 以上，可通过在垂直的swiper中内嵌video来实现。原生导航栏设置为custom，视频长宽设为手机屏幕大小，通过cover-view覆盖视频内容。插件市场有相关示例

• <video/> 组件在非H5端是原生组件，层级高于普通前端组件，覆盖其需要使用cover-view组件。微信基础库 2.4.0+和抖音小程序 已支持 video 组件的同层渲染，也就是video在非全屏时，可以被前端元素通过调节z-index来遮挡，但video全屏时，仍需要cover-view覆盖。

• 除微信基础库 2.4.0+ 和 抖音小程序，其他情况下非H5的video不能放入scroll-view和swiper。注意参考 原生组件使用限制。

• 你也可以尝试换个设计思路，如：列表中的视频组件是通过图片与icon模拟的，点击后播放全屏播放视频的方案。详情【video组件会覆盖页面其他非原生组件的设计替代方案示例】

• H5平台： 在部分浏览器中会强制调用原生播放器播放（如：微信内置浏览器、UC浏览器等），在 x5 内核的浏览器中支持配置同层播放器。