ZPlayer

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

安装

使用 npm:

npm install @jinzhengze/z-player --save

使用 script 标签:

<script src="./ZPlayer.min.js"></script>

快速开始

尝试初始化一个最简单的 ZPlayer

创建播放器节点:

<div id="player"></div>

使用模块管理器:

import ZPlayer from '@jinzhengze/z-player'

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

在 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 | autoplay | | preload | 'metadata' | string(auto / metadata / none) | false | autoplay | | 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格式 | | 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格式

[
    {
        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

播放器实例创建后可以使用的方法

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): 发送弹幕

  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

联系作者: [email protected]