uni-app官网

视频需要上传？推荐uni-cdn，帮你节省至少30%的 CDN 费用！详情。

# video

视频播放组件。

HarmonyOS Next 兼容性

HarmonyOS Next
HBuilderX 4.23

属性说明

属性名	类型	默认值	说明	平台差异说明
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	是否显示视频中间的播放按钮	抖音小程序、京东小程序不支持
show-loading	Boolean	true	是否显示loading控件	仅app 2.8.12+
enable-progress-gesture	Boolean	true	是否开启控制进度的手势	抖音小程序、京东小程序不支持
object-fit	String	contain	当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖	App、微信小程序、抖音小程序、飞书小程序、H5、京东小程序
poster	String		视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效
show-mute-btn	Boolean	false	是否显示静音按钮	微信小程序、抖音小程序、App-nvue
title	String		视频的标题，全屏时在顶部展示	微信小程序、App（3.6.7+）
play-btn-position	String	bottom	播放按钮的位置	微信小程序、抖音小程序、飞书小程序
mobilenet-hint-type	number	1	移动网络提醒样式：0是不提醒，1是提醒，默认值为1	京东小程序
enable-play-gesture	Boolean	false	是否开启播放手势，即双击切换播放/暂停	微信小程序、快手小程序
auto-pause-if-navigate	Boolean	true	当跳转到其它小程序页面时，是否自动暂停本页面的视频	微信小程序
auto-pause-if-open-native	Boolean	true	当跳转到其它微信原生页面时，是否自动暂停本页面的视频	微信小程序
vslide-gesture	Boolean	false	在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture）	微信小程序、App（3.4.0+）、快手小程序
vslide-gesture-in-fullscreen	Boolean	true	在全屏模式下，是否开启亮度与音量调节手势	微信小程序、App（3.4.0+）、快手小程序
ad-unit-id	String		视频前贴广告单元ID，更多详情可参考开放能力视频前贴广告	微信小程序
poster-for-crawler	String		用于给搜索等场景作为视频封面展示，建议使用无播放 icon 的视频封面图，只支持网络地址	微信小程序
codec	String	hardware	解码器选择，hardware：硬解码（硬解码可以增加解码算力，提高视频清晰度。少部分老旧硬件可能存在兼容性问题）；software：ffmpeg 软解码；	App-Android 3.1.0+
http-cache	Boolean	true	是否对 http、https 视频源开启本地缓存。缓存策略:开启了此开关的视频源，在视频播放时会在本地保存缓存文件，如果本地缓存池已超过100M，在进行缓存前会清空之前的缓存（不适用于m3u8等流媒体协议）	App-Android 3.1.0+
play-strategy	Number	0	播放策略，0：普通模式，适合绝大部分视频播放场景；1：平滑播放模式（降级），增加缓冲区大小，采用open sl解码音频，避免音视频脱轨的问题，可能会降低首屏展现速度、视频帧率，出现开屏音频延迟等。适用于高码率视频的极端场景；2： M3U8优化模式，增加缓冲区大小，提升视频加载速度和流畅度，可能会降低首屏展现速度。适用于M3U8在线播放的场景	App-Android 3.1.0+
header	Object		HTTP 请求 Header	App 3.1.19+
is-live	Boolean	false	是否为直播源	App 3.7.2+、微信小程序（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
@loadeddata	EventHandle		视频资源开始加载时触发	京东小程序
@loadstart	EventHandle		开始加载数据	京东小程序
@seeked	EventHandle		拖动进度条结束	京东小程序
@seeking	EventHandle		正在拖动进度条	京东小程序
@loadedmetadata	EventHandle		视频元数据加载完成时触发。event.detail = {width, height, duration}	微信小程序、H5、抖音小程序、京东小程序
@fullscreenclick	EventHandle		视频播放全屏播放时点击事件。event.detail = { screenX:"Number类型，点击点相对于屏幕左侧边缘的 X 轴坐标", screenY:"Number类型，点击点相对于屏幕顶部边缘的 Y 轴坐标", screenWidth:"Number类型，屏幕总宽度", screenHeight:"Number类型，屏幕总高度"}	App 2.6.3+
@controlstoggle	EventHandle		切换 controls 显示隐藏时触发。event.detail = {show}	微信小程序2.9.5

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

属性 HarmonyOS Next 兼容性

名称	HarmonyOS Next 兼容性
loop	HBuilderX 4.23
src	HBuilderX 4.23
initial-time	HBuilderX 4.23
duration	HBuilderX 4.23
controls	HBuilderX 4.23
danmu-list	HBuilderX 4.23
danmu-btn	HBuilderX 4.23
enable-danmu	HBuilderX 4.23
autoplay	HBuilderX 4.23
muted	HBuilderX 4.23
page-gesture	HBuilderX 4.23
direction	HBuilderX 4.23
show-progress	HBuilderX 4.23
show-fullscreen-btn	HBuilderX 4.23
show-play-btn	HBuilderX 4.23
show-center-play-btn	HBuilderX 4.23
show-loading	HBuilderX 4.23
enable-progress-gesture	HBuilderX 4.23
object-fit	HBuilderX 4.23
poster	HBuilderX 4.23
show-mute-btn	HBuilderX 4.23
title	HBuilderX 4.23
play-btn-position	HBuilderX 4.23
enable-play-gesture	HBuilderX 4.23
auto-pause-if-navigate	HBuilderX 4.23
auto-pause-if-open-native	HBuilderX 4.23
vslide-gesture	HBuilderX 4.23
vslide-gesture-in-fullscreen	HBuilderX 4.23
poster-for-crawler	HBuilderX 4.23
play-strategy	HBuilderX 4.23
is-live	HBuilderX 4.23
@loadedmetadata	HBuilderX 4.23
@play	HBuilderX 4.23
@pause	HBuilderX 4.23
@ended	HBuilderX 4.23
@timeupdate	HBuilderX 4.23
@fullscreenchange	HBuilderX 4.23
@waiting	HBuilderX 4.23
@error	HBuilderX 4.23
@progress	HBuilderX 4.23
@fullscreenclick	HBuilderX 4.23
@controlstoggle	HBuilderX 4.23

# direction 的合法值

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

# object-fit 的合法值

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

# play-btn-position 的合法值

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

示例查看示例

Template

Script

<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></video>
            </view>
            <!-- #ifndef MP-ALIPAY -->
            <view class="uni-list uni-common-mt">
                <view class="uni-list-cell">
                    <view>
                        <view class="uni-label">弹幕内容</view>
                    </view>
                    <view class="uni-list-cell-db">
                        <input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
                    </view>
                </view>
            </view>
            <view class="uni-btn-v">
                <button @click="sendDanmu" class="page-body-button">发送弹幕</button>
            </view>
            <!-- #endif -->
        </view>
    </view>
</template>

相关api：uni.createVideoContext

注意

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

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

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

video全屏后，如何自行绘制界面？比如加个标题、加个分享按钮
- 微信基础库 2.4.0 以上可通过cover-view来绘制界面覆盖元素
- app端 2.1.5 以上nvue页面的video也可以通过cover-view来绘制界面覆盖元素
- H5端可通过通用h5做法实现
- 其他端无法全屏后自行绘制内容
如何实现抖音、映客等全屏视频垂直滑动切换效果？
- 微信基础库 2.4.0 和 app端nvue 2.1.5 以上，可通过在垂直的swiper中内嵌video来实现。原生导航栏设置为custom，视频长宽设为手机屏幕大小，通过cover-view覆盖视频内容。插件市场有相关示例
<video/> 组件在非H5端是原生组件，层级高于普通前端组件，覆盖其需要使用cover-view组件或plus.nativeObj.view、subNVue。微信基础库 2.4.0+和抖音小程序已支持 video 组件的同层渲染，也就是video在非全屏时，可以被前端元素通过调节z-index来遮挡，但video全屏时，仍需要cover-view覆盖。
除微信基础库 2.4.0+ 和抖音小程序和 app-nvue 2.1.5+，其他情况下非H5的video不能放入scroll-view和swiper。注意参考原生组件使用限制。
你也可以尝试换个设计思路，如：列表中的视频组件是通过图片与icon模拟的，点击后播放全屏播放视频的方案。详情【video组件会覆盖页面其他非原生组件的设计替代方案示例】
App平台：使用 <video/> 组件，打包 App 时必须勾选 manifest.json->App 模块权限配置->VideoPlayer 模块。此模块体积较大，非默认内置。
App平台：如果使用的视频路径为本地路径，需要配置资源为释放模式：在 manifest.json 文件内 app-plus 节点下新增 runmode 配置，设置值为liberate。
App平台：如果想使用非原生的video，即原来普通的html5自带video，可使用web-view组件load html页面，在其中使用普通h5 video。
App平台：app-vue即使选择了使用x5内核，也不会使用x5的video播放，仍然使用uni-app的App引擎自带的原生视频播放。
App平台：3.6.14 以及手机系统 iOS16 以上video全屏需要配置应用支持横屏：在 manifest.json 文件内 app-plus 节点下新增 screenOrientation 配置，设置值为["portrait-primary","portrait-secondary","landscape-primary","landscape-secondary"]。
H5平台：在部分浏览器中会强制调用原生播放器播放（如：微信内置浏览器、UC浏览器等），在 x5 内核的浏览器中支持配置同层播放器。
HBuilderX内置浏览器，使用video标签暂时存在问题，请先使用其他外部浏览器。