Обзор

Xgplayer — это библиотека компонентов для создания веб-плееров видео. Она основана на принципе модульности и предлагает независимые компоненты пользовательского интерфейса (UI). Более того, Xgplayer не только обеспечивает гибкость в представлении UI, но и предпринимает смелые шаги в функциональности: он стремится устранить зависимость от загрузки, буферизации и поддержки форматов видео. Особенно значительные усилия были направлены на работу с MP4, позволяя ему выполнять сегментированную загрузку, что обеспечивает плавное переключение качества, контроль над загрузкой и экономию трафика видеопотока. Кроме того, библиотека интегрирует поддержку потоковой передачи и прямых трансляций для FLV, HLS и DASH.

Начало работы

1. Установка:

   $ npm install xgplayer
2. Использование:
   • Шаг 1:

     <div id="vs"></div>
   • Шаг 2:

     import Player from 'xgplayer'
     
     let player = new Player({
         id: 'vs',
         url: 'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4'
     })

Это самый простой способ настройки плеера, который позволяет запустить базовые функции. Для использования дополнительных функций рекомендуется обратиться к разделу плагинов или документации.

Плагины Xgplayer предоставляет множество плагинов, которые можно разделить на две категории: автоматически запускаемые и наследующие от основного класса xgplayer. В основном, официальные плагины запускаются автоматически и представляют собой упакованные сторонние библиотеки классов. Некоторые функциональные плагины могут предлагать альтернативные решения при отсутствии поддержки MSE, рекомендуя использовать автоматический запуск. Плеер поддерживает создание пользовательских плагинов.

Для использования автоматически запускаемых плагинов следуйте инструкции:

import Player from 'xgplayer'
import 'xgplayer-mp4'

let player = new Player({
    id: 'video',
    url: '//abc.com/test.mp4'
})

Например, плагин xgplayer-mp4 запускается автоматически. Он самостоятельно загружает и анализирует видеофайлы в формате MP4, реализуя настраиваемые функции загрузки, буферизации и бесшовного переключения. Плагин также автоматически адаптируется для устройств, не поддерживающих MSE.

Разработка Для удобства разработчиков мы предоставляем примеры видеоресурсов. Эти файлы имеют большой размер, и для их полного извлечения рекомендуется использовать команду git clone --recurse-submodules -j8. Если вас интересует только исходный код, вы можете использовать команду git clone.

$ git clone --recurse-submodules -j8 git@github.com:bytedance/xgplayer.git # 或者：git clone git@github.com:bytedance/xgplayer.git
$ cd xgplayer
$ npm install
$ npm run dev

Доступ к http://localhost:9090/examples/index.html

Использование лицензии Мы приглашаем вас использовать решение для аудио- и видеотехнологий, предоставленное командой разработчиков Xgplayer! Пожалуйста, внимательно ознакомьтесь с условиями ниже. Используя Xgplayer, вы соглашаетесь соблюдать все условия, предусмотренные лицензией.

1. Весь код в этом открытом проекте основан на лицензии MIT, и вы принимаете обязательства, предусмотренные этой лицензией.
2. Вы предоставляете нам разрешение на размещение логотипа вашего бизнеса на нашем официальном сайте. Если у вас есть какие-либо вопросы, пожалуйста, свяжитесь с нами.

Присоединяйтесь к нам Приглашаем всех, кто интересуется фронтенд-видеотехнологиями, присоединиться к нашей технической команде!

Место работы: Пекин, Шанхай, Шэньчжэнь и другие города.

Типы должностей: набор персонала, набор студентов, стажировка.

Отправьте резюме: yinguohui@bytedance.com

Формат темы электронного письма: «Резюме» + имя + Frontend Developer Engineer + источник: github xgplayer