# vf-player

**Repository Path**: kyo_niuniu/vf-player

## Basic Information

- **Project Name**: vf-player
- **Description**: player 库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-19
- **Last Updated**: 2021-11-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VfPlayer H5播放器

> 简介 `H5直播/点播`播放器，使用简单，功能强大

## 属性(Property)

*   `video-url` 视频流地址 String default ''
*   `video-title` 视频右上角显示的标题 String default ''
*   `poster` 视频封面图片 String default ''
*   `autoplay` 自动播放 Boolean default true
*   `controls` 显示播放器控制栏 Boolean default true
*   `loop` 是否循环播放 Boolean default false
*   `live` 是否直播, 标识要不要显示进度条 Boolean default false
*   `alt` 视频流地址没有指定情况下, 视频所在区域显示的文字, 相当于 html img 标签的 alt 属性 String default '无信号'
*   `muted` 是否静音 Boolean default false
*   `aspect` 视频显示区域的宽高比, fullscreen 即是全屏展示 String default '16:9'
*   `loading` 指示加载状态, 支持 sync 修饰符
*   `fluent` 流畅模式, Boolean default true
*   `stretch` 是否拉伸, Boolean default false
*   `timeout` m3u8 加载超时(秒) Number default 20
*   `show-custom-button` 是否在工具栏显示自定义按钮(极速/流畅, 拉伸/标准), Boolean default true
*   `hide-big-play-button` 是否隐藏起播状态下的大播放按钮, Boolean default false
*   `hide-snapshot-button` 是否隐藏 快照 按钮, Boolean default false
*   `hide-fullscreen-button` 是否隐藏 全屏 按钮, Boolean default false
*   `hide-stretch-button` 是否隐藏 拉伸/标准 按钮, Boolean default false
*   `playback-rates` 倍速列表, Array default [0.5, 1, 2, 3]
*   `playback-rate` 默认倍速, Number default 1
*   `hasaudio` HTTP-FLV播放时使用:是否有音频，传递该属性用于处理只有音频或只有视频的源 Boolean，默认不配置自动判断
*   `hasvideo` HTTP-FLV播放时使用:是否有视频，传递该属性用于处理只有音频或只有视频的源 Boolean，默认不配置自动判断
*   `custom-buttons` 自定义工具栏按钮, String default ''，配置模板（按钮名称[:class名称]），多个用英文逗号分隔，示例：custom-buttons="对讲,配置:vjs-icon-cog"
*   `autofocus`  是否自动获取焦点, Boolean default false

## 方法(Medthod)

*   `play` 播放
*   `pause` 暂停
*   `paused` 获取暂停状态
*   `getCurrentTime` 获取当前播放时间进度, 同步返回播放时间进度数据
*   `setCurrentTime` 设置当前播放时间进度, 即 seek
*   `snap` 外部 API 方式获取快照, 快照获取成功后, 触发 snapOutside Event
*   `getMuted` 获取静音状态
*   `setMuted` 设置静音状态
*   `isFullscreen` 获取全屏状态
*   `requestFullscreen` 触发全屏, 需要放置到交互事件回调中调用
*   `exitFullscreen` 退出全屏, 需要放置到交互事件回调中调用
*   `toggleFullscreen` 触发全屏, 需要放置到交互事件回调中调用, 如果已处在全屏状态, 则退出全屏
*   `getVolume` 获取音量
*   `setVolume` 设置音量, 0~1

## 事件(Event)

*   `message` m3u8 加载失败时触发通知消息, 参数: { type: '', message: ''}
*   `error` 播放器出错回调, 参数: Error Object
*   `ended` 播放结束, 参数: 无
*   `timeupdate` 进度更新, 参数: 当前时间进度
*   `pause` 暂停, 参数: 当前时间进度
*   `play` 播放, 参数: 当前时间进度
*   `fullscreen` 全屏状态改变, 参数：true/false
*   `snapOutside` 外部快照回调, 参数: 快照 Base64 数据
*   `snapInside` 内部快照回调, 由控制栏快照按钮触发, 参数: 快照 Base64 数据
*   `customButtons`  自定义按钮点击回调, 参数：名称

## 使用

将dist目录下的player压缩包放到项目静态目录，在入口引用vfplayer.min.js，然后在具体页面组件里引用vf-player组件即可，具体使用查看demo页