Установка Plyr на свой сайт

Привет! Чтобы выложить видео на сайт и в нём же посмотреть, нужен плеер. Есть 3 варианта:

  • использовать стандартный плеер браузера
  • использовать JS-плеер
  • выложить видео на YouTube или на Vimeo и встроить его на сайт

Сегодня мы рассмотрим JS-плеер. А точнее Plyr. Это плеер с открытым исходным кодом. Как его установить:

Сначала добавим к плееру видео. Это можно сделать вставив вот такой код:

<video id="player" playsinline controls>
  <source src="путь к видео" type="video/mp4" />
  </video>

Если с субтитрами, то вставьте этот код:

<video id="player" playsinline controls data-poster="/path/to/poster.jpg">
  <source src="/path/to/video.mp4" type="video/mp4" />
  <track kind="captions" label="язык субтитров" src="путь к файлу с субтитрами" srclang="en" default />
</video>

Дальше прикрепим JS-файл. Оболочка плеера. Вы можете скачать этот файл с GitHub и положить в корневую папку сайта. Дальше прописываем этот код:

<script src="путь к файлу"></script>
<script>
  const player = new Plyr('#player');
</script>

...или взять этот файл с серверов плеера

<script src="https://cdn.plyr.io/3.6.2/plyr.js"></script>
<script>
  const player = new Plyr('#player');
</script>

Теперь добавим стили CSS:

скачиваем файл с GitHub, кладём в корневую папку и вставляем код в <head>:

<link rel="stylesheet" href="путь к файлу" />

...или с серверов

<link rel="stylesheet" href="https://cdn.plyr.io/3.6.2/plyr.css" />

Чтобы кастомизировать, нужно скачать.

Шрифт плеера в примере на сайте в "комплект" не идёт. Его можно скачать или взять любой другой в Google Fonts, затем встроить в <head> и в CSS, в теге font-family.

В этом же CSS можно поменять также цвет интерфейса и многое другое. Смотрите оригинальную документацию.

Если вы хотите подключить рекламу, включить/отключить функцию, и поднастроить плеер - тоже смотрите документацию

На этом у меня всё - пока!