NPlayer Это мощный, настраиваемый, поддерживаемый технологиями Заградительный видеоплеер огонь. Вы можете контролировать расположение всех значков, цветов и элементов управления, а также предоставлять встроенные компоненты для облегчения вторичной разработки. Вы можете установить столько точек останова, сколько захотите. Это совместимо не только с концом движения. Если вы хотите, вы можете легко быть совместимым с вертикальным экраном мобильного телефона, горизонтальным экраном мобильного телефона, плоским и другими устройствами. Заградительный Система огня представлена ​​в виде плагинов, которые можно устанавливать по мере необходимости в процессе использования. Система огня поддерживает множество настроек и не ограничивает внутреннюю реализацию, поэтому доступ к ней очень прост. NPlayer Также поддерживает IE 11,SSR,любойпотоковое мультимедиа, прямые трансляции и многое другое.

Мобильный телефон/планшет/настольный компьютер/пользовательские точки останова

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

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

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

Пользовательская тема

Цвет темы NPlayer и все значки можно настроить, и вы можете очень легко переключиться на другую тему. Как показано ниже.

Пожалуйста, просмотрите полный код Настроить Bilibili тема。

Заградительный огонь

Функция NPlayer «Заградительный огонь» представлена ​​в виде плагинов, которые можно устанавливать по требованию, когда это необходимо.

Пожалуйста, просмотрите больше Заградительный огоньплагин。

Мини-окно

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

Используя упомянутую выше точку останова Настроить, мы можем очень легко реализовать мини-функцию проигрывателя.

import Player from 'nplayer'const videoContainer = document.querySelector('.video_container')const miniContainer = document.querySelector('.mini_container')const player = new Player({  src: 'https://v-cdn.zjol.com.cn/280443.mp4',  bpControls: {    500: [
      ['play', 'progress', 'time'],
    ]
  }
})const interObserver = new IntersectionObserver((entries) => {
  player.mount(entries[0].isIntersecting ? videoContainer : miniContainer)
}, {  root: null,  threshold: 0})

interObserver.observe(videoContainer);

прошло выше IntersectionObserver API Чтобы определить, виден ли текущий игрок в окне просмотра, если нет, смонтируйте его в Mini DOM в элементе контейнера.

Видеоконтейнер и Mini контейнер CSS код. Мы предполагаем Mini Ширина контейнера меньше 500 , поэтому, когда плеер подключен к Mini В контейнере он будет применен bpControls середина 500 макет, тем самым скрывая некоторые несущественные элементы управления.

потоковое мультимедиа

NPlayer Нет встроенной реализации различных акций Мультимедийный договор. Чтобы использовать NPlayer игратьпотоковое мультимедиа необходимо ввести соответствующие библиотеки классов. Например, играть HLS можно представить hls.js、 shaka hls и другие связанные библиотеки, играйте DASH можно представить dashjs。

import Hls from 'hls'import Player from 'player'const hls = new Hls()const player = new Player()
hls.attachMedia(player.video)

hls.on(Hls.Events.MEDIA_ATTACHED, function () {
  hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')
})

player.mount(document.body)

Выше используется hls.js игратьпотоковое Примеры мультимедиа и прочего Мультимедиа также может воспроизводиться аналогичным образом, просто предоставьте player.video Просто передайте его в соответствующую библиотеку воспроизведения.

Пожалуйста, просмотрите большепотоковое мультимедиа。

Переключатель резкости

NPlayer обладает высокой расширяемостью, помимо встроенных элементов управления можно использовать NPlayer Встроенные компоненты для очень быстрой реализации собственных элементов управления. Например, добавьте Переключатель в плеер резкости Функция。

Пожалуйста, просмотрите полный код Переключатель резкости。

скриншот

Помимо элементов панели управления, описанных выше, также доступно контекстное меню. Затем используйте контекстное меню для доступа к функции скриншота видео.

import Player from 'nplayer'const Screenshot = {  html: 'скриншот',  click(player) {    const canvas = document.createElement('canvas')
    canvas.width = player.video.videoWidth
    canvas.height = player.video.videoHeight
    canvas.getContext('2d').drawImage(player.video, 0, 0, canvas.width, canvas.height)
    canvas.toBlob((blob) => {        let dataURL = URL.createObjectURL(blob)        const link = document.createElement('a')
        link.href = dataURL
        link.download = 'NPlayer.png'
        link.style.display = 'none'
        document.body.appendChild(link)
        link.click()        document.body.removeChild(link)        URL.revokeObjectURL(dataURL)
    })
  }
}const player = new Player({  contextMenus: [Screenshot, 'loop', 'pip', 'version'],
})
player.mount(document.body)

зеркало

Воспользуемся элементами настройки для реализации функции видеозеркала.

const Mirroring = {  type: 'switch',  html: 'Видеозеркало',  checked: false,  init(player) {
    player.video.classList.remove('nplayer_video-mirroring')    // По умолчанию не зеркало.
  },  change(value, player) {
    player.video.classList.toggle('nplayer_video-mirroring', value)    // Удалить, добавив class Посмотрим, зеркало ли видео
  }
}const player = new Player({  settings: [Mirroring, 'speed']
})
player.mount(document.body)

.nplayer_video-mirroring {  transform: scaleX(-1);
}

Vue2 / Vue3 / React

Для использования с Vue и React NPlayer также предоставляет соответствующие компоненты.

import { useEffect, useRef } from "react";import NPlayer from "@nplayer/react";export default function App() {  const player = useRef();  useEffect(() => {    console.log(player.current);
  }, []);  return (    <div>
      <NPlayer
        ref={player}
        options={{ src: "https://v-cdn.zjol.com.cn/280443.mp4" }}
      />
    </div>
  );
}

выше это React Пример: Пожалуйста, просмотрите больше сопутствующих документов.

• Документация по компонентам React
• Документация плагина Vue2/Vue3

Подвести итог

NPlayer Это поддерживаемый движением, легко настраиваемый Заградительный видеоплеер огонь. Никаких сторонних зависимостей времени выполнения, Gzip размер 23.3 КБ. Если у вас есть вопросы, новые функции или выводы BUG Добро пожаловать в создание issue。

• Официальный сайт：https://nplayer.js.org
• Исходный код：https://github.com/woopen/nplayer
• Онлайн редактирование & Предварительный просмотр：https://codesandbox.io/s/nplayer-demo-ujtms?file=/src/index.js