@mfuns/pc-player

mfunsPlayer 弹幕播放器

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

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

功能

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

使用方法

1. cdn 引入 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

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

  编辑器：http://cdn.bootcss.com/ace/1.4.9/ace.js

  语言工具：http://cdn.bootcss.com/ace/1.4.9/ext-language_tools.js

配置代码示例

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

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 两个方法用于事件绑定和解除事件绑定

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