NPlayer可定制的弹幕视频播放器

联合创作 · 2023-10-02 11:37

NPlayer 是由 Typescript 加 Sass 编写,无任何第三方运行时依赖,Gzip 大小只有 21KB,兼容 IE11,支持 SSR。该播放器高度可定制,所有图标、按钮、色彩等都可以替换,并且提供了 内置组件 方便二次开发。它还拥有插件系统,弹幕功能 就是使用插件形式提供。该播放器可以接入任何 流媒体,如 hls、dash 和 flv 等。

兼容

NPlayer 兼容 IE11, Edge, Chrome, FireFox, Safari 等现代浏览器。

安装

npm i -S nplayer

或者使用 CDN

<script src="https://unpkg.com/nplayer@latest/dist/index.min.js"></script>

快速使用

import Player from "nplayer";
import Danmaku from "@nplayer/danmaku";
import items from "./items";

const danmaku = new Danmaku({
  items
});

/**
 * 官网:https://nplayer.js.org/
 * 源码:https://github.com/woopen/nplayer
 * 
 * 
 * 测试视频地址
 * https://blog.csdn.net/qq_17497931/article/details/80824328
 *
 * 部分地址
 * https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4
 * https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4
 * https://stream7.iqilu.com/10339/article/202002/18/2fca1c77730e54c7b500573c2437003f.mp4
 *
 * 还可以使用 .m3u8 .mpd 等视频格式,请引入 hls.js 等
 * 参考 https://nplayer.js.org/docs/streaming
 */

const player = new Player({
  src: "https://v-cdn.zjol.com.cn/280443.mp4",
  plugins: [danmaku]
});

player.mount(document.body);

DEMO

文档

你可以在 nplayer.js.org 查看 NPlayer 的文档。

查看 快速入门章节 来快速上手 NPlayer。

浏览 15
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报