@jinzhengze/z-player

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

联系作者: [e-mail]