Матвей Земсков

Заметки веб-мастера

Вторник, 19 мая 2015 11:46

Plyr - простой и доступный HTML5 плеер

Оцените материал
(1 Голосовать)

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

Plyr имеет большое количество настроек, а также поддерживает субтитры в формате WebVTT (Web Video Text Tracks). Инструмент имеет небольшой размер (в сжатом виде всего 6.4KB ), легко настраивается и поддерживается всеми современными браузерами. Конечно же, в сети можно найти много других медиа плееров, но HTML5 плеер Plyr проще в обращении чем остальные, к тому же использует в своей работе только семантические HTML-элементы (например, <input type="range"> для управления звуком и <progress> для отображения продолжительности ролика). Еще одним несомненным преимуществом этого плеера является то, что он написан на «чистом» javaScript и не требует подключения сторонних библиотек.

Также разработчики обеспечили плееру полную поддержку взаимодействия со средствами для чтения с экрана.

Чтобы разместить HTML5 плеер Plyr у себя на сайте, нам можно воспользоваться следующей разметкой:

HTML

	<section class="example-video">
	   <div class="player">
		  <video poster="https://cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin>
			 <!-- Video files -->
			 <source src="https://cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
			 <source src="https://cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
							
		   <!-- Text track file -->
			 <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/en.vtt" default>
							
			  <!-- Fallback for browsers that don't support the <video> element -->
			  <a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
		   </video>
		</div>
	 <small>Big Buck Bunny. More info can be found at <a href="https://peach.blender.org" target="_blank">peach.blender.org</a>.</small>
	</section>

Кроме того, в разделе <head> страницы нужно подключить файлы стилей плеера. Весь CSS-код плеера хранится в двух файлах: plyr.css и docs.cssdocs.css находятся стили, которые применяются к основным HTML-элементам страницы, где размещен плеер, а в plyr.css описаны классы, которые прикрепляются в элементам интерфейса плеера. Перед закрывающимся тегом </body> подключаются javaScript файлы HTML5 плеера. Их тоже 2: plyr.js и docs.js.

JS-код, который запускает работу плеера, в самом простом виде выглядит так:

HTML

	<script>
		plyr.setup();
	</script>

Как вы можете догадаться, методу setup() можно передавать различные параметры. Как и во всех аналогичных инструментах, здесь параметры можно передать в виде объектного литерала (plyr.setup({...}) ). Список параметров доступен на странице проекта на GitHub. Там же вы сможете скачать HTML5 плеер Plyr.

Помимо описания API плеера на указанной странице можно найти и другую полезную информацию: о поддержке плеера различными браузерами, а также список ссылок на другие ресурсы, посвященные HTML5 плеер Plyr.

Демонстрацию работы плеера Вы сможете посмотреть на его официальной странице или после установки на ваш локальный веб-сервер, открыв файл /docs/index.html из загруженного архива.

Прочитано 14005 раз
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

Наверх