Видеоплеер Zhihu Griffith с открытым исходным кодом~

Открытый исходный код
Видеоплеер Zhihu Griffith с открытым исходным кодом~

Что такое Гриффит?

Griffith — это видеоплеер на основе React, который в настоящее время используется в сети Zhihu и в мобильной сети, а также с открытым исходным кодом на GitHub.


Адреса и примеры из открытых источников

Адрес гитхаба:https://github.com/zhihu/griffith

Пример CodeSandbox:Код Sandbox.IO/ is/74o Профит 5 в 02...


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

Простой и удобный интерфейс

Griffith предоставляет чистый и простой в использовании пользовательский интерфейс игрока. В настоящее время видеоплеер на веб-странице Zhihu использует Griffith.


Поддержка ярлыков

Ссылка на ГриффитаYouTubeРеализована поддержка горячих клавиш, и в будущем будет добавлено больше горячих клавиш.

  • Пробел: управляет воспроизведением/паузой видео при выборе индикатора выполнения. Может использоваться для нажатия кнопки, если она уже выбрана.
  • K: Пауза/воспроизведение видео в плеере.
  • Выберите стрелку влево/вправо в состоянии индикатора выполнения: быстрая перемотка вперед/назад на 5 секунд.
  • J: Перемотать 10 секунд назад в плеере.
  • L: Перемотка вперед на 10 секунд в плеере.
  • Стрелки вверх/вниз под выбранным индикатором выполнения: увеличение/уменьшение громкости на 5%.
  • Цифры от 1 до 9 на выбранной полосе выполнения (не цифры на цифровой клавиатуре): переход от 10% до 90% прогресса видео.
  • Выбрано число 0 в индикаторе выполнения (не 0 на цифровой клавиатуре): переход к началу видео.
  • F: включить полноэкранный режим. Если полноэкранный режим включен, снова нажмите F или нажмите Esc, чтобы выйти из полноэкранного режима.
  • M: Отключить звук.

React-friendly

Griffith — веб-видеоплеер на основе React. Для приложений React его можно использовать напрямую через вызовы компонентов.

Гриффит используетContext APIОсуществлять управление состоянием. Для приложений React вы можете реализовать пользовательские функции, такие как заградительный огонь, введя контекст Гриффита.


Построить бесплатно

Для приложений, отличных от React, или для тех, кто предпочитает не устанавливать через пакеты npm, Griffith предоставляетstandaloneШаблоны можно использовать прямо в браузере без инструментов сборки.


Богатая система событий

Гриффит определяет богатую систему событий.

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

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

Потоковое

Гриффит используетсяMedia Source ExtensionStm., который поддерживает потоковое видео в форматах mp4 и m3u8.

  • стратегия предварительной загрузки: Гриффит может пройтиMSEДинамически контролируйте процесс загрузки видео, чтобы сэкономить пропускную способность видео CDN.
  • Резкость динамического плавного перехода:Гриффит может пройтиMSEРеализуйте динамическое плавное переключение четкости видео.


как использовать

Реагировать приложение

import Player from 'griffith'

const sources = {
  hd: {
    play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_hd.mp4',
  },
  sd: {
    play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_sd.mp4',
  },
}

render(<Player sources={sources} />)

автономный режим

<div id="player"></div>
<script src="https://unpkg.com/griffith-standalone/dist/index.umd.min.js"></script>
<script>
  const target = document.getElementById('player')

  const sources = {
    hd: {
      play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_hd.mp4',
    } ,
    sd: {
      play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_sd.mp4',
    },
  }

  // 创建播放器
  const player = Griffith.createPlayer(target)

  // 载入视频
  player.render({sources})

  // 销毁视频
  player.dispose()
</script>


Технические подробности

  • использоватьYarn workspaceа такжеLernaУправление несколькими пакетами.
  • использоватьrollup а такжеwebpackупаковать.
  • использоватьnew Context API Осуществлять управление состоянием.
  • использоватьCSS-in-JSСхема для управления стилями.
  • использоватьJestдля написания модульных тестов.
  • использоватьPrettierУнифицируйте формат кода.
  • использоватьhlsjsДля потокового воспроизведения видео формата m3u8.
  • использоватьgriffith-mp4Конвертируйте mp4 в формат fmp4 и транслируйте через MSE.


Эпилог

Вся работа Гриффита происходит на GitHub (тот же репозиторий используется внутри Zhihu). Если у вас есть какие-либо связанные вопросы и ошибки, отправьте вопросы и PR на GitHub, чтобы помочь Griffith стать лучше.


Категории