NPlayer написан на Typescript с использованием Sass, не требует сторонних зависимостей во время выполнения и совместим с IE11. Он поддерживает мобильные устройства, серверный рендеринг (SSR) и прямые трансляции.

NPlayer легко настраивается: все значки, цвета темы и другие элементы могут быть заменены, а также предоставляет встроенные компоненты для упрощения вторичной разработки. Можно настроить любое количество точек останова, чтобы обеспечить совместимость с различными устройствами, включая мобильные телефоны в портретном и ландшафтном режимах, планшеты и т. д.

Плеер имеет систему плагинов, и функция «Даньмaku» (внутриигровые субтитры) реализуется через плагин. Плагины можно легко добавлять по мере необходимости. NPlayer поддерживает различные форматы потокового мультимедиа, такие как HLS, DASH и FLV.

Установка

Для установки NPlayer можно использовать npm или CDN:

npm i -S nplayer

или

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

Быстрое использование

Пример кода для быстрого использования NPlayer:

import Player from "nplayer";

/**
 * Danmaku DEMO:
 *    https://codesandbox.io/s/nplayer-demo-ujtms?file=/src/index.js
 * React DEMO:
 *    https://codesandbox.io/s/nplayer-react-demo-p558g?file=/src/App.js
 * Vue2 DEMO:
 *    https://codesandbox.io/s/nplayer-vue2-demo-9lps9?file=/src/main.js
 * Vue3 DEMO:
 *    https://codesandbox.io/s/nplayer-vue3-demo-mt8s4?file=/src/main.js
 */
const player = new Player({
  src: "https://v-cdn.zjol.com.cn/280443.mp4"
});

player.mount(document.body);

Также приведены ссылки на демоверсии для различных фреймворков.

Документация

Документация NPlayer доступна на сайте nplayer.js.org. Также есть раздел с быстрым стартом.

Экосистема

В тексте перечислены различные плагины и экосистема NPlayer.

Примеры

Приведены примеры использования NPlayer, такие как переключение качества видео, создание скриншотов, зеркальное отображение видео и мини-плеер.

Рекомендуемые статьи

Перечислены статьи, которые рекомендуется прочитать для более глубокого понимания NPlayer и его возможностей. Проблемы и новые функции

Если вы столкнулись с BUG или хотите новую функцию, пожалуйста, отправьте issue.

Вклад

Если хотите внести свой вклад, ознакомьтесь с CONTRIBUTING.