Предисловие

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

Официальное введение выглядит следующим образом:

Большая часть видеобизнеса ByteDance — это короткие видеоролики. video.js Делайте вторичную разработку на основе. Позже мы обнаружили, что многие функции не соответствуют нашим требованиям, например, стоимость настройки пользовательского интерфейса, плавное переключение четкости видео и экономия видеотрафика. Учитывая, что большинство текущих видео по запросу имеют формат mp4, мы сделали смелое предположение: загрузить видео на стороне плеера, проанализировать видео и преобразовать формат, чтобы можно было динамически поддерживать mp4, не поддерживающий сегментированное воспроизведение. так что нет необходимости конвертировать формат исходного видео. На стороне сервера нет других накладных расходов. Руководствуясь этой мотивацией, мы завершили эту задачу по разработке в конце 2017 года и протестировали стабильность и экономические выгоды в начале 2018 года.

В этом контексте мы анализируем hls、flv Ждем видео, чтобы больше не полагаться на сторонние видеобиблиотеки. Только освоив базовую технологию, мы сможем получить возможность оптимизации. Постоянно побеждая hls、flv В контексте разбора,Мы улучшили качество продукта,Такие как интерактивные эффекты, анимация входа и т. д. до недавнего времени,Мы хотим улучшить документацию и открыть исходный код плеера, чтобы дать больше видеопрактиков.,Давайте общаться и учиться вместе,Добивайтесь прогресса вместе.

Официальный адрес сайта

Официальный адрес сайта：
https://v2.h5player.bytedance.com/
адрес гитхаба:
https://github.com/bytedance/xgplayer

характеристика

• Поддерживаемые форматы: MP4, HLS, FLV.
• Легко расширяется: гибкая система плагинов, автоматическое переключение между ПК и мобильными устройствами, безопасный механизм белого списка.
• Богаче: мощное управление MP4, плавное переключение видео по запросу и эффективная экономия трафика.
• Более полная: полный механизм продукта, мониторинг ошибок и отчетность, автоматическая обработка перехода на более раннюю версию.
• Используется более чем 200 продуктами: Baidu, NetEase, Mobile и т. д.

Начинайте быстро

Установить

# npm Способ
npm install xgplayer
# cdn Способ
<script src="//cdn.jsdelivr.net/npm/xgplayer@2.9.6/browser/index.js" type="text/javascript"></script>

Укажите заполнитель DOM на странице.

<div id="mse"></div>

Создать экземпляр

let player = new Player({
  id: 'mse',
  url: '//abc.com/**/*.mp4'
});

Выполните простейшее воспроизведение видео (mp4 по запросу) всего за два шага.,Плеер предлагает больше возможностей богатой конфигурации.,Например, автоматическое воспроизведение, наклейки, регулировка громкости, отключение встроенного управления и т. д.,Дополнительная информация по конфигурации

Эффект операции

Богатая конфигурация

• селектор
• источник видео
• размер
• Гибкий макет
• Адаптивная ширина и высота видеоконтента
• Регулировка громкости
• обложка
• Регулировка скорости
• Предварительный просмотр, полноэкранный режим
• Заградительный огонь
• картинка внутри картинки
• скриншот
• ……

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

Богатые плагины и API

Слишком много конкретного содержимого. При необходимости вы можете перейти на официальный сайт для просмотра соответствующих конфигураций.

музыкальный плеер

Он даже поддерживает воспроизведение музыки...

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

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