简体中文
组件类型:UniVideoElement
视频
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 容器大小不一致时,视频的表现形式。 | ||||||||
| |||||||||||
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 | 0 | 播放策略 | ||||||||
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 } |
Android | iOS | web | |
---|---|---|---|
contain | 3.9 | 4.11 | 4.0 |
fill | 3.9 | 4.11 | 4.0 |
cover | 3.9 | 4.11 | 4.0 |
timeupdate 事件 播放进度变化时触发
名称 | 类型 | 必填 | 默认值 | 描述 | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
detail | UniVideoTimeUpdateEventDetail | 是 | - | - | |||||||||||||||
| |||||||||||||||||||
type | string | 是 | - | - | |||||||||||||||
target | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | |||||||||||||||
currentTarget | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | |||||||||||||||
timeStamp | Long | 是 | - | - |
fullscreenchange 事件 当视频进入和退出全屏是触发
名称 | 类型 | 必填 | 默认值 | 描述 | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
detail | UniVideoFullScreenChangeEventDetail | 是 | - | - | |||||||||||||||
| |||||||||||||||||||
type | string | 是 | - | - | |||||||||||||||
target | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | |||||||||||||||
currentTarget | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | |||||||||||||||
timeStamp | Long | 是 | - | - |
error 事件 视频播放出错时触发
名称 | 类型 | 必填 | 默认值 | 描述 | ||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
detail | VideoError | 是 | - | - | ||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||
type | string | 是 | - | - | ||||||||||||||||||||||||||||||
target | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | ||||||||||||||||||||||||||||||
currentTarget | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | ||||||||||||||||||||||||||||||
timeStamp | Long | 是 | - | - |
progress 事件 加载进度变化时触发
名称 | 类型 | 必填 | 默认值 | 描述 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
detail | UniVideoProgressEventDetail | 是 | - | - | ||||||||||
| ||||||||||||||
type | string | 是 | - | - | ||||||||||
target | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | ||||||||||
currentTarget | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | ||||||||||
timeStamp | Long | 是 | - | - |
fullscreenclick 事件 视频播放全屏播放时点击事件
名称 | 类型 | 必填 | 默认值 | 描述 | |||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
detail | UniVideoFullScreenClickEventDetail | 是 | - | - | |||||||||||||||||||||||||
| |||||||||||||||||||||||||||||
type | string | 是 | - | - | |||||||||||||||||||||||||
target | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | |||||||||||||||||||||||||
currentTarget | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | |||||||||||||||||||||||||
timeStamp | Long | 是 | - | - |
controlstoggle 事件 切换播放控件显示隐藏时触发
名称 | 类型 | 必填 | 默认值 | 描述 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
detail | UniVideoControlsToggleEventDetail | 是 | - | - | ||||||||||
| ||||||||||||||
type | string | 是 | - | - | ||||||||||
target | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | ||||||||||
currentTarget | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | ||||||||||
timeStamp | Long | 是 | - | - |
video元素对象
播放
暂停
跳转到指定位置
名称 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
position | number | 是 | - | 跳转到指定位置(秒) |
停止视频
发送弹幕
名称 | 类型 | 必填 | 默认值 | 描述 | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
danmu | Danmu | 是 | - | 弹幕数据 | ||||||||||||||||||||
|
设置倍速播放
名称 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
rate | number | 是 | - | 支持倍率 0.5/0.8/1.0/1.25/1.5 |
进入全屏
名称 | 类型 | 必填 | 默认值 | 描述 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
direction | RequestFullScreenOptions | 否 | - | 0|正常竖向, 90|屏幕逆时针90度, -90|屏幕顺时针90度 | ||||||||||
|
退出全屏
web端支持的视频格式,不同浏览器有差异,可查询caniuse。
app端支持的视频格式如下:
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-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插件:见插件市场、阿里云视频
不可以嵌套组件
video的操作api为uni.createVideoContext()。
给video组件设一个id属性,将id的值传入uni.createVideoContext(),即可得到video组件的上下文对象,进一步可使用.play()
、.stop()
等方法。
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>
abiFilters
,打包或自定义基座后生效 详见本地视频文件,有2种方式: