快应用 video组件

2020-08-08 13:41 更新

概述

视频播放器

子组件

不支持

属性

支持 通用属性

名称 类型 默认值 必填 描述
src <uri> - 视频播放内容的 uri
autoplay <boolean> false 渲染后是否自动播放
poster <uri> - 视频预览海报
controls 1010+ <boolean> true 是否显示默认控件
muted 1030+ <boolean> false 是否静音播放
orientation 1070+ <string> landscape(横屏) 指定点击默认控件的全屏按钮时视频进入的全屏方向。landscape横屏,portrait竖屏
titlebar 1070+ <boolean> true 指定视频组件全屏播放时是否显示顶栏,true为显示,false为不显示,在非全屏时均不显示顶栏
title 1070+ <string> - 配置全屏播放时顶栏显示的标题,最多只支持一行文案,超过会自动以省略号结尾截断

备注:如果开发者手动调用requestFullScreen方法进入全屏,将根据此方法的传入参数screenOrientation设置全屏方向。

示例代码:

<video src="xxx.mp4" orientation="portrait"></video>

样式

支持 通用样式

名称 类型 默认值 必填 描述
object-fit 1040+ contain | cover | fill | none | scale-down contain 视频源的缩放类型

object-fit 类型 1040+

类型 描述
contain 保持宽高比,缩小或者放大,使得视频完全显示在显示边界内,居中显示
cover 保持宽高比,缩小或者放大,使得两边都大于或等于显示边界,居中显示
fill 不保存宽高比,填充满显示边界
none 居中,无缩放
scale-down 保持宽高比,缩小或保持不变,取 contain 和 none 中显示较小的一个,居中显示

事件

支持 通用事件

名称 参数 描述
prepared {duration: value(秒)} 视频连接成功时触发
start - 开始播放时触发
pause - 暂停时触发
finish - 播放结束时触发
error - 播放失败时触发
seeking {currenttime: value(秒)} 播放进度条滑动时触发
seeked {currenttime: value(秒)} 播放进度条滑动放开时触发
timeupdate {currenttime: value(秒)} 播放进度变化时触发,触发频率4HZ
fullscreenchange {fullscreen: fullscreenValue} 视频进入和退出全屏时触发

方法

名称 参数 描述
start - 开始播放视频
pause - 暂停播放视频
setCurrentTime {currenttime: value(秒)} 指定视频播放位置
requestFullscreen { screenOrientation : "portrait" | "landscape" } minPlatformVersion < 1050: 默认参数为 "landscape"; minPlatformVersion >= 1050: 默认参数为 "portrait". 请求进入全屏模式
exitFullscreen - 视频退出全屏

video   示例代码

查看 示例代码

说明:

  1. 支持 HTTP/HTTPS/RTSP 协议
  2. 在主流的视频编码格式(如:H.263,H.264,MPEG-4 等)和主流的音频编码格式(AAC,FLAC,MP3 等)下,支持主流的音视频封装格式如:MPEG-4(.mp4),3GPP(.3gp),MPEG-TS(.ts,not seekable),Matroska(.mkv),Ogg(.ogg)等


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号