Html аудио/видео плеер для сайта на JavaScript

Html аудио/видео плеер для сайта на JavaScript

8235

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

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

Преимущества аудио/видео плеера Plyr

  • Поддерживает основные видео и аудио форматы, а также видео с YouTube и Vimeo.
  • Поддерживает субтитры VTT
  • Поддерживает возможность изменять вид плеера и микроразметку
  • Использует элементы: range - для звука, progress - для прогресса, button - для кнопок
  • Работает с адаптивными размерами экрана
  • Поддерживает потоковое воспроизведение hls.js и dash.js
  • Имеет стандартизированный API воспроизведения, громкости, поиска
  • Имеет полноэкранный режим
  • Поддерживает управление с клавиатуры
  • Режим "картинка в картинке"
  • Атрибут playsinline
  • Переключение нескольких дорожек субтитров
  • Показ эскизов предварительного просмотра
  • Работает без фреймворков, таких как jQuery
  • Возможность управлять скоростью воспроизведения
  • Возможность монетизации видео

Установка видео/аудио плейера Plyr

Скачиваем плеер Plyr:

Скачать архив (версия 3.6.3)

Скачать с GitHub


Аудио плеер для сайта на JS

Dsh
Geni

HTML код аудио плейера

CSS код аудио плейера

Инициализация jQuery:

Видео плеер для сайта на JS

Transformers 3
War of the Worlds

HTML код видео плейера

CSS код видео плейера

Инициализация jQuery:

Помогла ли вам статья?
342 раз уже помогла
Комментарии: (0)

КАТЕГОРИИ