npm package: @mfuns/pc-player
Description: 基于H5的PC端弹幕播放器
Author: rudiusu
Latest version: 1.0.3

# mfunsPlayer 弹幕播放器

自研的弹幕播放器，没啥优点，能用就行 Ծ‸Ծ

> 播放器示例地址(施工 ing,持续更新) [https://mfuns-cn.github.io/mfunsPlayer](https://mfuns-cn.github.io/mfunsPlayer)

### 功能

-   主题色设置
-   视频的暂停/播放（快捷键 space）
-   可控进度条
-   全屏/退出全屏(快捷键 F)
-   弹幕展示(支持拓展 bilibili 格式弹幕)
-   弹幕屏蔽及属性控制(快捷键 D)
-   弹幕防挡字幕
-   弹幕举报/复制/撤回
-   发送弹幕(快捷键 Enter)
-   编辑弹幕/高级弹幕(支持换行符\n)
-   音量调节(快捷键 ↑ ↓)
-   一键静音(快捷键 M)
-   洗脑循环
-   快进快退(快捷键 ← →)
-   分 P 切集(快捷键 < >)
-   断点续播
-   关灯模式
-   镜像画面
-   高能进度条(需要自行引入 echarts.js)
-   倍速播放
-   画中画
-   小窗播放
-   视频滤镜
-   视频色彩调整
-   视频暂停展示活动弹窗(可恰饭或站内活动引导)

### 使用方法

1. cdn 引入 [https://unpkg.com/@mfuns/pc-player](https://unpkg.com/@mfuns/pc-player)

```
  <script src="https://unpkg.com/@mfuns/pc-player"></script>
```

2. npm 引入

```
  npm install @mfuns/pc-player
```

-   如果需要缩略图，可使用播放器配套的缩略图工具在线生成

    > 地址：[https://mfuns-cn.github.io/mfunsPlayer/src/thumbnail](https://mfuns-cn.github.io/mfunsPlayer/src/thumbnail)

-   如果需要编辑高级弹幕，请自行用 script 标签引入 ace.js
    cdn 地址:

    > 编辑器：[http://cdn.bootcss.com/ace/1.4.9/ace.js](http://cdn.bootcss.com/ace/1.4.9/ace.js)

    > 语言工具：[http://cdn.bootcss.com/ace/1.4.9/ext-language_tools.js](http://cdn.bootcss.com/ace/1.4.9/ext-language_tools.js)

### 配置代码示例

⚠️ 注意：播放器实例化过程会操作部分 DOM，请务必在页面加载完成后（window.onload(原生 JS)，mounted(Vue)，componentDidMount(React)）进行实例化操作，否则部分功能会出现问题

```js
import mfunsPlayer from "@mfuns/pc-player"
const container = document.querySelector(".content");
//初始化播放器
window.onload = function(){
 new mfunsPlayer({
  container, //容器dom
  uid:2333,//用户id
  theme: "#666", //主题色
  autoPlay: false, //自动播放
  autoSkip:true,//断点续播
  autoSwitch: true,//自动切集
  blackBorder: false, // 播放器黑边
  draggable: false, //进度条是否可拖拽
  hotkey: true, //是否启用快捷键
  volume: 0.7, //视频初始音量
  currentVideo: 0, //当前播放视频的下标
  smallWindow:true, //小窗播放
  widescreenSwitch: false, // 宽屏模式是否可用
  widescreen: false, // 宽屏模式
  video: [ //type:ObjectArray
    {
      url: "", //视频链接地址（必传）
      pic: "", //视频预览图链接地址（不传默认为视频第1帧）
      type: "mp4", //视频类型
      title: "", //视频标题（必传）
      danId: 100, //弹幕id(选传)
      advDanId:12,//高级弹幕id(选传)
      thumbnails:""//缩略图(选传)
      danmakuAddition: [  // 附加弹幕文件
        {
          url:"",
          type:""   // 弹幕数据的api处理类型 (不传默认为dplayer-danmaku)
        }
      ],
      lastPosition:56, //上次播放位置
      otherDanParams:"&a=1&b=2"//其他弹幕参数
    },
  ],
  //以下为选传配置
  danmaku: {
    api: "", //弹幕接口基准地址
    bottom: "0", //弹幕距离视频底部的距离
    showDanmaku: true, //初始化完成是否自动开启弹幕
    opacity: 0.7, //弹幕透明度(0.1 ~ 1)
    limitArea: 4, //弹幕区域(1.1/4  2.半屏  3.3/4屏  4.不重叠  5.不限 )
    fontScale: 1, //弹幕字体大小缩放(0.5 ~ 1.5)
    speed: 1,//弹幕速度(0.5, 0.75, 1, 1.25, 1.5)
    sensitivity:3.5, //弹幕tip灵敏度(建议 1~10之间 数值越大越灵敏)
    editor: 0, //弹幕样式面板类型，0为普通面板，1为全功能面板(不传默认为普通面板)
    danmakuCatch: false, //开启弹幕捕获模式，鼠标移至弹幕上可暂停该条弹幕移动并显示操作tip
    showHighEnergy: true,//是否显示高能进度条
    keepOutSubtitle:false,//防挡字幕
  },
  //高级弹幕
  advancedDanmaku: {
    api: "", //高级弹幕接口地址
    editor: true, //是否启用编辑器
  },
  //活动&广告
  activity:[
    {
    pic:"",//预览图
    link:""//链接
  },
  ]
  mutex: true, //互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
});
}
```

### 事件绑定

播放器实例对象有 on 和 off 两个方法用于事件绑定和解除事件绑定

```js
const mp = new mfunsPlayer({});
const fn = (...arg) => {
    console.log(arg);
};
mp.on('play', fn); //绑定视频play事件
mp.off('play', fn); //解除视频play事件绑定(解除事件绑定时不能使用匿名函数)
```

#### 视频事件

-   abort
-   canplay
-   canplaythrough
-   durationchange
-   emptied
-   ended
-   error
-   loadeddata
-   loadedmetadata
-   loadstart
-   mozaudioavailable
-   pause
-   play
-   playing
-   progress
-   ratechange
-   seeked
-   seeking
-   stalled
-   suspend
-   timeupdate
-   volumechange
-   waiting

#### 播放器事件

-   danmaku_show
-   danmaku_hide
-   danmaku_clear
-   danmaku_loaded
-   danmaku_send
-   danmaku_report
-   contextmenu_show
-   contextmenu_hide
-   notice_show
-   notice_hide
-   toLogin
-   destroy
-   resize
-   fullscreen
-   fullscreen_cancel
-   webfullscreen
-   webfullscreen_cancel
-   widescreen
-   widescreen_cancel
-   danmaku_load_start
-   danmaku_load_end
-   danmaku_load_failed
-   darkmode_on
-   darkmode_off
-   danmaku_filter
-   setPlayer
-   setDanmaku
-   update_video_position