# video

视频开发者可通过 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	是否展示弹幕，只在初始化时有效，不能动态变更
direction	Number		设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 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	是否开启控制进度的手势
object-fit	String	contain	当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖
poster	String		视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效
title	String		视频的标题，全屏时在顶部展示
vslide-gesture	Boolean	false	在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture）
vslide-gesture-in-fullscreen	Boolean	true	在全屏模式下，是否开启亮度与音量调节手势
header	Object		HTTP 请求 Header
@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		视频播放出错时触发
@fullscreenclick	EventHandle		视频播放全屏播放时点击事件。event.detail = { screenX:"Number类型，点击点相对于屏幕左侧边缘的 X 轴坐标", screenY:"Number类型，点击点相对于屏幕顶部边缘的 Y 轴坐标", screenWidth:"Number类型，屏幕总宽度", screenHeight:"Number类型，屏幕总高度"}

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

# direction 的合法值

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

# object-fit 的合法值

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

# 示例代码

扫码预览

<template>
    <view>
        <view class="bz-padding-wrap bz-common-mt">
            <view>
               <video id="myVideo" src="https://histatic.zhipin.com/front/files/9hdB3UbpDU6RGawJw2gedo.mp4" controls></video>
            </view>
    </view>
</template>

1
2
3
4
5
6
7
8

展开刷新关闭

video 组件是原生组件，层级高于普通前端组件，覆盖其需要使用 cover-view 组件

← image map →