video | uni-app-x

video

video 兼容性

属性

objectFit 兼容性

事件

UniVideoTimeUpdateEvent

UniVideoFullScreenChangeEvent

UniVideoErrorEvent

UniVideoProgressEvent

UniVideoFullScreenClickEvent

展示全部

# video

组件类型：UniVideoElement

视频

# video 兼容性

Android	iOS	web
3.9	4.11	4.0

# 属性

名称

类型

默认值

描述

loop

boolean

false

是否循环播放

src

string(string.VideoURIString)

视频资源地址

initial-time

number

指定视频初始播放位置

duration

number

指定视频长度

controls

boolean

true

是否显示默认播放控件（播放/暂停按钮、播放进度、时间）

danmu-list

array

弹幕列表

danmu-btn

boolean

false

是否显示弹幕按钮，只在初始化时有效，不能动态变更

enable-danmu

boolean

false

是否展示弹幕，只在初始化时有效，不能动态变更

autoplay

boolean

false

是否自动播放

muted

boolean

false

是否静音播放

page-gesture

boolean

false

在非全屏模式下，是否开启亮度与音量调节手势

direction

number

-90

设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度）

show-progress

boolean

true

若不设置，宽度大于240时才会显示

show-fullscreen-btn

boolean

true

是否显示全屏按钮

show-play-btn

boolean

true

是否显示视频底部控制栏的播放按钮

show-center-play-btn

boolean

true

是否显示视频中间的播放按钮

show-loading

boolean

true

是否显示loading控件

enable-progress-gesture

boolean

true

是否开启控制进度的手势

objectFit

string

"contain"

当视频大小与 video 容器大小不一致时，视频的表现形式。

值名称	描述
contain	包含
fill	填充
cover	覆盖

poster

string

视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效

show-mute-btn

boolean

false

是否显示静音按钮

title

string

视频的标题，全屏时在顶部展示

play-btn-position

string

播放按钮的位置

enable-play-gesture

boolean

false

是否开启播放手势，即双击切换播放、暂停

auto-pause-if-navigate

boolean

当跳转到其它小程序页面时，是否自动暂停本页面的视频

auto-pause-if-open-native

boolean

当跳转到其它微信原生页面时，是否自动暂停本页面的视频

vslide-gesture

boolean

false

在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture）

vslide-gesture-in-fullscreen

boolean

true

在全屏模式下，是否开启亮度与音量调节手势

poster-for-crawler

string

用于给搜索等场景作为视频封面展示，建议使用无播放 icon 的视频封面图，只支持网络地址

codec

string

"hardware"

解码器选择

http-cache

boolean

false

是否对 http、https 视频源开启本地缓存

play-strategy

number

播放策略

is-live

boolean

是否为直播源

@loadedmetadata

(event: UniVideoLoadedMetadataEvent) => void

视频元数据加载完成时触发

@play

(event: UniEvent) => void

当开始/继续播放时触发

@pause

(event: UniEvent) => void

当暂停播放时触发

@ended

(event: UniEvent) => void

当播放到视频末尾时触发

@timeupdate

(event: UniVideoTimeUpdateEvent) => void

播放进度变化时触发，event.detail = { currentTime, duration }。触发频率 250ms 一次

@fullscreenchange

(event: UniVideoFullScreenChangeEvent) => void

当视频进入和退出全屏时触发，event.detail = { fullScreen, direction }，direction取为 vertical 或 horizontal

@waiting

(event: UniEvent) => void

视频出现缓冲时触发

@error

(event: UniVideoErrorEvent) => void

播放出错时触发

@progress

(event: UniVideoProgressEvent) => void

加载进度变化时触发，只支持一段加载。event.detail = { buffered }，百分比

@fullscreenclick

(event: UniVideoFullScreenClickEvent) => void

视频全屏播放时点击屏幕触发。event.detail = { screenX, screenY, screenWidth, screenHeight }

@controlstoggle

(event: UniVideoControlsToggleEvent) => void

切换 controls 显示隐藏时触发。event.detail = { show }

# objectFit 兼容性

	Android	iOS	web
contain	3.9	4.11	4.0
fill	3.9	4.11	4.0
cover	3.9	4.11	4.0

# 事件

# UniVideoTimeUpdateEvent

timeupdate 事件播放进度变化时触发

# UniVideoTimeUpdateEvent 的属性值

名称

类型

必填

默认值

描述

detail

UniVideoTimeUpdateEventDetail

是

名称	类型	必备	默认值	描述
currentTime	number	是	-	当前进度
duration	number	是	-	总进度

type

string

是

target

UniElement | null

否

UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。

currentTarget

UniElement | null

否

UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。

timeStamp

Long

是

# UniVideoFullScreenChangeEvent

fullscreenchange 事件当视频进入和退出全屏是触发

# UniVideoFullScreenChangeEvent 的属性值

名称

类型

必填

默认值

描述

detail

UniVideoFullScreenChangeEventDetail

是

名称	类型	必备	默认值	描述
fullScreen	boolean	是	-	是否全屏
direction	string	是	-	横竖屏，取值 vertical 或 horizontal

type

string

是

target

UniElement | null

否

UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。

currentTarget

UniElement | null

否

UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。

timeStamp

Long

是

# UniVideoErrorEvent

error 事件视频播放出错时触发

# UniVideoErrorEvent 的属性值

名称

类型

必填

默认值

描述

detail

VideoError

是

名称	类型	必备	默认值	描述
errCode	100001 \| 200001 \| 300001	是	-	统一错误码 100001 网络错误 200001 内部错误 300001 SDK错误
errSubject	string	是	-	统一错误主题（模块）名称
data	any \| null	否	-	错误信息中包含的数据
cause	Error \| null	否	-	UTS错误信息对象
errMsg	string	是	-	-

type

string

是

target

UniElement | null

否

UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。

currentTarget

UniElement | null

否

UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。

timeStamp

Long

是

# UniVideoProgressEvent

progress 事件加载进度变化时触发

# UniVideoProgressEvent 的属性值

名称

类型

必填

默认值

描述

detail

UniVideoProgressEventDetail

是

名称	类型	必备	默认值	描述
buffered	number	是	-	加载进度百分比

type

string

是

target

UniElement | null

否

UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。

currentTarget

UniElement | null

否

UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。

timeStamp

Long

是

# UniVideoFullScreenClickEvent

fullscreenclick 事件视频播放全屏播放时点击事件

# UniVideoFullScreenClickEvent 的属性值

名称

类型

必填

默认值

描述

detail

UniVideoFullScreenClickEventDetail

是

名称	类型	必备	默认值	描述
screenX	number	是	-	点击点相对于屏幕左侧边缘的 X 轴坐标
screenY	number	是	-	点击点相对于屏幕顶部边缘的 Y 轴坐标
screenWidth	number	是	-	屏幕总宽度
screenHeight	number	是	-	屏幕总高度

type

string

是

target

UniElement | null

否

UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。

currentTarget

UniElement | null

否

UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。

timeStamp

Long

是

# UniVideoControlsToggleEvent

controlstoggle 事件切换播放控件显示隐藏时触发

# UniVideoControlsToggleEvent 的属性值

名称

类型

必填

默认值

描述

detail

UniVideoControlsToggleEventDetail

是

名称	类型	必备	默认值	描述
show	boolean	是	-	是否显示

type

string

是

target

UniElement | null

否

UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。

currentTarget

UniElement | null

否

UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。

timeStamp

Long

是

# UniVideoElement

video元素对象

# UniVideoElement 的方法

# play()

播放

# pause()

暂停

# seek(position)

跳转到指定位置

# 参数

名称	类型	必填	默认值	描述
position	number	是	-	跳转到指定位置(秒)

# stop()

停止视频

# sendDanmu(danmu)

发送弹幕

# 参数

名称

类型

必填

默认值

描述

danmu

Danmu

是

弹幕数据

名称	类型	必备	默认值	描述
text	string \| null	否	-	弹幕文字
color	string \| null	否	-	弹幕颜色
time	number \| null	否	-	显示时刻

# playbackRate(rate)

设置倍速播放

# 参数

名称	类型	必填	默认值	描述
rate	number	是	-	支持倍率 0.5/0.8/1.0/1.25/1.5

# requestFullScreen(direction?)

进入全屏

# 参数

名称

类型

必填

默认值

描述

direction

RequestFullScreenOptions

否

0|正常竖向, 90|屏幕逆时针90度, -90|屏幕顺时针90度

名称	类型	必备	默认值	描述
direction	number \| null	否	-	direction - 0: 正常竖向 - 90: 屏幕逆时针90度 - -90: 屏幕顺时针90度

# exitFullScreen()

退出全屏

# 视频格式

web端支持的视频格式，不同浏览器有差异，可查询caniuse。

app端支持的视频格式如下：

# video 属性兼容性

	Android	iOS	web
loop	3.9	4.11	4.0
src	3.9	4.11	4.0
initial-time	3.9	4.11	4.0
duration	3.9	4.11	4.0
controls	3.9	4.11	4.0
danmu-list	3.9	4.11	4.0
danmu-btn	3.9	4.11	4.0
enable-danmu	3.9	4.11	4.0
autoplay	3.9	4.11	4.0
muted	3.9	4.11	4.0
page-gesture	3.9	4.11	4.0
direction	3.9	4.11	4.0
show-progress	3.9	4.11	4.0
show-fullscreen-btn	3.9	4.11	4.0
show-play-btn	3.9	4.11	4.0
show-center-play-btn	3.9	4.11	4.0
show-loading	3.9	4.11	4.0
enable-progress-gesture	3.9	4.11	4.0
objectFit	3.9	4.11	4.0
poster	3.9	4.11	4.0
show-mute-btn	3.9	4.11	4.0
title	3.9	4.11	4.0
play-btn-position	x	x	4.0
enable-play-gesture	3.9	4.11	4.0
auto-pause-if-navigate	x	x	4.0
auto-pause-if-open-native	x	x	4.0
vslide-gesture	3.9	4.11	4.0
vslide-gesture-in-fullscreen	3.9	4.11	4.0
poster-for-crawler	x	x	4.0
codec	3.9	4.11	x
http-cache	3.9	4.11	x
play-strategy	3.9	4.11	4.0
is-live	x	x	4.0
@loadedmetadata	x	x	4.0
@play	3.9	4.11	4.0
@pause	3.9	4.11	4.0
@ended	3.9	4.11	4.0
@timeupdate	3.9	4.11	4.0
@fullscreenchange	3.9	4.11	4.0
@waiting	3.9	4.11	4.0
@error	3.9	4.11	4.0
@progress	3.9	4.11	4.0
@fullscreenclick	3.9	4.11	4.0
@controlstoggle	3.9	4.11	4.0

# App平台

App-Android平台video组件使用ijkplayer库实现：https://github.com/bilibili/ijkplayer；

弹幕功能使用DanmakuFlameMaster库实现：https://github.com/bilibili/DanmakuFlameMaster

ijkplayer库底层又使用了ffmpeg，这些库的功能较多，官方的video组件并非完全封装。有需要的开发者可以使用uts直接操作这些库。插件市场已经有一批uts库直接调用该库，见插件市场

video组件的源码详见。下载该uni_modules到工程下，修改源码打包，可覆盖内置的video组件。

另外ijkplayer作为一个开源库，比腾讯视频等商业sdk仍有差距。如无法在开源库上满足需求，可在插件市场寻找腾讯视频等商业sdk插件：见插件市场、阿里云视频

# 子组件

不可以嵌套组件

# 上下文对象API

video的操作api为uni.createVideoContext()。

给video组件设一个id属性，将id的值传入uni.createVideoContext()，即可得到video组件的上下文对象，进一步可使用.play()、.stop()等方法。

# 示例

hello uni-app x

Template

Script

<template>
  <view class="uni-flex-item">
    <video class="video" ref="video" id="video" :header="header" :src=src :autoplay="autoplay" :loop="loop"
      :muted="muted" :initial-time="initialTime" :duration="duration" :controls="controls" :danmu-btn="danmuBtn"
      :enable-danmu="enableDanmu" :page-gesture="pageGesture" :direction="direction" :show-progress="showProgress"
      :show-fullscreen-btn="showFullscreenBtn" :show-play-btn="showPlayBtn" :show-center-play-btn="showCenterPlayBtn"
      :show-loading="showLoading" :enable-progress-gesture="enableProgressGesture" :object-fit="objectFit"
      :poster="poster" :show-mute-btn="showMuteBtn" :title="title" :enable-play-gesture="enablePlayGesture"
      :vslide-gesture="vslideGesture" :vslide-gesture-in-fullscreen="vslideGestureInFullscreen" :codec="codec"
      :http-cache="httpCache" :play-strategy="playStrategy" :danmu-list="danmuList" @play="onPlay" @pause="onPause"
      @ended="onEnded" @timeupdate="onTimeUpdate" @waiting="onWaiting" @error="onError" @progress="onProgress"
      @fullscreenclick="onFullScreenClick" @controlstoggle="onControlsToggle" @fullscreenchange="onFullScreenChange">
    </video>
    <scroll-view class="uni-padding-wrap uni-common-mt uni-flex-item">
      <view class="uni-btn-v">
        <navigator url="/pages/component/video/video-format">
          <button type="primary" @click="pause">视频格式示例</button>
        </navigator>
      </view>
      <view class="uni-title">
        <text class="uni-title-text">API示例</text>
      </View>
      <view class="uni-btn-v">
        <button type="primary" @click="play">播放</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="pause">暂停</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="seek(pos)">跳转到指定位置</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="requestFullScreen(requestFullScreenOptions)">进入全屏</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="exitFullScreen">退出全屏</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="stop">停止</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="sendDanmu(danmu)">发送弹幕</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="playbackRate(rate)">设置倍速</button>
      </view>
      <view class="uni-title">
        <text class="uni-title-text">属性示例</text>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setSrc(_src)">设置播放资源</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setAutoplay()">设置是否自动播放（未播放时设置有效）</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setLoop()">设置是否循环播放（本次播放完成后生效）</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setMuted()">设置是否静音播放</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setInitialTime(_initialTime)">设置初始播放位置（本次播放完成后生效）</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setDuration(_duration)">设置视频时长（未播放时设置有效）</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setControls()">设置是否显示默认播放控件</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setDanmuBtn()">设置是否显示弹幕按钮</button>
      </view>
      <!-- #ifndef WEB -->
      <view class="uni-btn-v">
        <button type="primary" @click="setPageGesture()">非全屏模式下，设置是否开启亮度与音量调节手势</button>
      </view>
      <!-- #endif -->
      <view class="uni-btn-v">
        <button type="primary" @click="setDirection(_direction)">设置全屏时视频的方向</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setShowProgress()">设置是否显示进度条</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setShowFullscreenBtn()">设置是否显示全屏按钮</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setShowPlayBtn()">设置是否显示视频底部控制栏的播放按钮</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setShowCenterPlayBtn()">设置是否显示视频中间的播放按钮</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setShowLoading()">设置是否显示loading控件</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setEnableProgressGesture()">设置是否开启控制进度的手势</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setObjectFit(_objectFit)">设置视频大小与video容器大小不一致时，视频的表现形式</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setPoster(_poster)">设置视频封面</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setShowMuteBtn()">设置是否显示静音按钮（仅限非 Web 平台）</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setTitle(_title)">设置视频标题（仅限非 Web 平台）</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setEnablePlayGesture()">设置是否开启播放手势（仅限非 Web 平台）</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setVslideGesture()">非全屏模式下，设置是否开启亮度与音量调节手势（仅限非 Web 平台）</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setVslideGestureInFullscreen()">全屏模式下，设置是否开启亮度与音量调节手势（仅限非 Web 平台）</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setCodec(_codec)">设置解码器（仅 App 平台，未播放时设置有效）</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setHttpCache()">设置是否对http、https视频源开启本地缓存（仅 App 平台，未播放时设置有效）</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setPlayStrategy(_playStrategy)">设置播放策略（仅 App 平台，未播放时设置有效）</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setHeader(_header)">设置header</button>
      </view>
    </scroll-view>
    <video v-if="autoTest" :src="localSrc" @error="onError"></video>
  </view>
</template>



<style>
  .video {
    width: 100%;
    height: 200px;
  }
</style>

# 参见

# Bug & Tips

App暂不支持横屏全屏后放置子组件
标准运行基座默认不包含intel x86 cpu的兼容so库，所以video组件在标准基座运行时无法在x86 cpu的设备上运行（常见于模拟器）。如需支持x86 cpu，请在manifest里配置abiFilters，打包或自定义基座后生效详见
App默认拦截触摸事件，目前会导致父组件无法响应触摸事件
video 默认宽度为300px，高度为225px。（App平台从 uni-app x 4.0起支持该默认宽高）

# 本地文件播放

本地视频文件，有2种方式：

static目录下（项目下或uni_modules下都支持static目录）
使用绝对路径。相对路径转绝对路径详见

运营产品

uni-AD uni统计 uni发行 uni安全专题

开发者服务

问答社区开发者后台

技术文档

uni-app文档 uniCloud文档原生开发者支持文档 HBuilder文档

生态服务

插件市场 OAuth用户开放平台

关于我们： DCloud官网案例需求墙许可协议加入我们赞助我们

联系我们：商务合作：bd@dcloud.io 广告合作：uniad@dcloud.io

DCloud.io 数字天堂（北京）网络技术有限公司是

HTML5中国产业联盟发起单位

京公网安备：11010802035340号

国家信息安全等级保护三级，证书编号：11010813802-20001

# video

# video 兼容性

# 属性

# objectFit 兼容性

# 事件

# UniVideoTimeUpdateEvent

# UniVideoTimeUpdateEvent 的属性值

# UniVideoFullScreenChangeEvent

# UniVideoFullScreenChangeEvent 的属性值

# UniVideoErrorEvent

# UniVideoErrorEvent 的属性值

# UniVideoProgressEvent

# UniVideoProgressEvent 的属性值

# UniVideoFullScreenClickEvent

# UniVideoFullScreenClickEvent 的属性值

# UniVideoControlsToggleEvent

# UniVideoControlsToggleEvent 的属性值

# UniVideoElement

# UniVideoElement 的方法

# play()

# pause()

# seek(position)

# 参数

# stop()

# sendDanmu(danmu)

# 参数

# playbackRate(rate)

# 参数

# requestFullScreen(direction?)

# 参数

# exitFullScreen()

# 视频格式

# video 属性兼容性

# App平台

# 子组件

# 上下文对象API

# 示例

# 参见

# Bug & Tips

# 本地文件播放

本页导读