README.md · ZZONE/z-player

# ZPlayer
🍭 哇~，简单干净的弹幕播放器  
🍭 Wow, a simple and clean player

## 安装
使用 npm:
```
npm install @jinzhengze/z-player --save
```
使用 script 标签:
```
<script src="./ZPlayer.min.js"></script>
```

## 快速开始
尝试初始化一个最简单的 ZPlayer

创建播放器节点:
```html
<div id="player"></div>
```
使用模块管理器:
```js
import ZPlayer from '@jinzhengze/z-player'

// 传入id选择器
const player1 = new ZPlayer({
    element: 'player'
})
// 传入节点对象
const player2 = new ZPlayer({
    element: document.getElementById('player')
})
```
在 js 里初始化:
```js
// 传入id选择器
const player1 = new ZPlayer({
    element: 'player'
})
// 传入节点对象
const player2 = new ZPlayer({
    element: document.getElementById('player')
})
```

一个最简单的 ZPlayer 就初始化完成了

## 配置参数
你可以在创建 ZPlayer 时，使用以下参数自定义你的播放器实例

| 名称                 | 默认值        | 类型                             | 必填    | 描述                            |
|--------------------|------------|--------------------------------|-------|-------------------------------|
| element            | null       | string / 节点对象                  | true  | 播放器实例容器                       |
| loop               | false      | boolean                        | false | 是否循环播放                        |
| autoplay           | false      | boolean                        | false | 是否自动播放                        |
| lang               | 'cn'       | string(cn / en / jp)           | false | 语言                            |
| hotkey             | false      | boolean                        | false | 是否开启热键                        |
| airplay            | true       | boolean                        | false | airplay                       |
| preload            | 'metadata' | string(auto / metadata / none) | false | preload                       |
| volume             | 0.5        | number(0 - 1)                  | false | 音量                            |
| playbackRate       | 1          | number                         | false | 视频播放倍速                        |
| jumpTime           | 10         | number                         | false | 快进退时间                         |
| video              | {}         | object                         | false | 视频信息                          |
| video.src          | null       | string                         | false | 视频链接                          |
| video.poster       | null       | string                         | false | 封面链接                          |
| highlight          | {}         | object                         | false | 提示点信息                         |
| highlight.data     | null       | array                          | false | 提示点列表[#提示点data格式](#提示点data格式) |
| danmu              | {}         | object                         | false | 弹幕信息                          |
| danmu.visible      | true       | boolean                        | false | 是否显示弹幕                        |
| danmu.massive      | false      | boolean                        | false | 开启海量弹幕                        |
| danmu.playbackRate | 1          | number(> 0)                    | false | 弹幕倍速                          |
| danmu.screen       | 1          | number(0 - 1)                  | false | 弹幕显示区域                        |
| danmu.scale        | 1          | number(> 0)                    | false | 弹幕大小                          |
| danmu.opacity      | 1          | number(0 - 1)                  | false | 弹幕不透明度                        |
| danmu.data         | null       | array / string                 | false | 弹幕数据[#弹幕data格式](#弹幕data格式)    |

### 提示点data格式
```
[
    {
        time: numer,
        text: string
    },
    {
        time: numer,
        text: string
    },
    ...
]
```
### 弹幕data格式
```
arr = [
    [timer(number), type(number | string), userId(number | string), color(十进制颜色信息 number | string), text(string)],
    [timer(number), type(number | string), userId(number | string), color(十进制颜色信息 number | string), text(string)],
    ...
]
str = (bili xml 文本)
```

## API
播放器实例创建后可以使用的方法
```js
const zp = new ZPlayer({...})
```
- `zp.play()`: 播放视频
- `zp.pause()`: 暂停视频
- `zp.seek(time: number)`: 跳转到特定时间 (单位: s)
- `zp.volume(v: number, notice: boolean)`: 设置视频音量 (v: 音量值, notice: 是否显示提示)
- `zp.notice(text: string)`: 显示提示信息 (text: 信息内容)
- `zp.on(name: string, callback: function)`: 事件回调绑定 (name: 详见[#事件列表](#事件列表), callback: 回调方法)
- `zp.remove(name: string, callback: function)`: 事件回调解绑 (name: 事件名, callback: 回调方法)
- `zp.destroy()`: 销毁播放器实例
- `zp.controller.highlight(data: object)`: 更新提示点 (data: 详见[#配置参数](#配置参数))
- `zp.hotkey.open()`: 开启热键
- `zp.hotkey.close()`: 关闭热键
- `zp.danmu.load(data: object)`: 加载弹幕 (data: 详见[#配置参数](#配置参数))
- `zp.danmu.seek(flag: boolean)`: 弹幕跳转 (flag: 是否保留页面已出现的弹幕)
- `zp.danmu.send(data: object)`: 发送弹幕
    ```js
    zp.danmu.send({
        time: number, // null 直接在当前时刻发送弹幕
        type: number | string, // 弹幕类型(0: 滚动, 1: 顶部, 2: 底部)
        userId: number | string, // 用户id
        color: number | string, // 十进制颜色
        text: string, // 弹幕文本
    })
    ```
- `zp.video`: 原生 video
- `zp.video.src`: 视频源修改
- `zp.video.poster`: 视频封面修改
- `zp.video.playbackRate`: 视频倍速修改
- `zp.video.loop`: 开启关闭视频循环
- `zp.danmu.visible`: 开启关闭弹幕
- `zp.danmu.massive`: 开启关闭海量弹幕
- `zp.danmu.playbackRate`: 弹幕倍速修改
- `zp.danmu.screen`: 弹幕显示区域修改
- `zp.danmu.scale`: 弹幕字体修改
- `zp.danmu.opacity`: 弹幕不透明度修改

## 事件列表
#### 视频事件
-   abort
-   canplay
-   canplaythrough
-   durationchange
-   emptied
-   ended
-   error
-   loadeddata
-   loadedmetadata
-   loadstart
-   mozaudioavailable
-   pause
-   play
-   playing
-   progress
-   ratechange
-   seeked
-   seeking
-   stalled
-   suspend
-   timeupdate
-   volumechange
-   waiting
#### 实例事件
-   pip: 画中画
-   resize: 视频大小切换 | 网页大小切换
-   danmuLoad: 弹幕装载完成
-   danmuSeek: 弹幕跳转
-   destroy: 实例销毁

## 其他
**项目演示链接: [https://zzone.cc/player](https://zzone.cc/player)**

**联系作者: 85160581@qq.com**

ZZONE/z-player

简介

发行版

贡献者

近期动态

ZZONE/z-player .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

ZZONE/z-player