MediaPlayer

可定制，插件化，轻量灵活的视频播放器

在线文档

http://player.linjiafu.top

简介

MediaPlayer 是由多包架构组成的开源项目。其中@lin-media/player为核心包，集成了一些常用的功能，如清晰度切换，倍数播放，全屏等等；其他非常见功能通过插件的形式扩展使用，如截图，弹幕，自定义进度条提示点等等；其中，插件以第三方包的形式存在，独立于@lin-media/player核心包，使用的时候需要自行进行下载安装。

目前有六个插件包，分别为：

• 弹幕插件 @lin-media/danmaku
• 缩放插件 @lin-media/zoom
• 截图插件 @lin-media/screenshot
• 右键菜单插件 @lin-media/contextmenu
• 视频缩略图预览插件 @lin-media/preview
• 自定义进度条提示插件 @lin-media/highlight

为什么要使用插件的形式扩展？

1、考虑到一些功能使用频率不高，但我们在打包的时候也无法剔除这些功能，这样就会导致我们的打包体积变大。

2、开闭原则。当我们需要实现新的功能的是时候，可通过插件的形式去实现，而不是在@lin-media/player这个核心包中添加功能

3、防止包的体积无限制得增大。插件功能天然支持按需加载功能

特点

• 基于typescript开发的一款视频播放器
• 没有第三方依赖
• 支持插件功能，可定制一些其他的功能
• 按需加载
• 使用原生css变量实现自定义主题
• 支持移动端和pc端

安装使用

安装

npm i @lin-media/player

初始化

import MediaPlayer from "@lin-media/player";
const player = new MediaPlayer({
  // 容器
  el: ".container",
  // 视频列表
  videoList: [
    {
      label: "标清",
      url: "http://127.0.0.1/demo.mp4"
    },
    {
      label: "高清",
      url: "http://127.0.0.1/demo.mp4"
    }
  ]
});

经过上述步骤，一个具有常见功能的视频播放器就会出现在你的眼前！！！

使用插件

以弹幕插件为例：

安装

npm i @lin-media/danmaku

注册使用插件

import MediaPlayer from "@lin-media/player";
import Danmaku from "@lin-media/danmaku";
// 全局注册插件。插件注册分全局注册和局部注册
MediaPlayer.use(Danmaku);

const player = new MediaPlayer({
  // ...
  Danmaku: {
    // 弹幕字体颜色，随机
    fontColors: ["blue", "red", "green", "#fff"],
    // 弹幕字体大小随机
    fontSizes: [16, 18, 20, 22, 24, 26, 28]
  }
});

发送弹幕

player.danmaku.send('你好')

浏览器支持

• 现代浏览器
• Electron

注意：默认不支持IE浏览器，如果你有需要，请自行使用 polyfill 进行兼容

问题 & 建议

如果你在使用 MediaPlayer 时遇到问题，或者有好的建议，欢迎给我提 Issue

贡献

如果想参与贡献，请查看 CONTRIBUTING 。

LICENSE

MIT

其他

更详细的功能请查看在线文档，点击这里