KorniloFF-ScriptS ©

Здравствуйте, Гость!
Путь страницы:   Стартовая > Javascripts > Бесплатные скрипты > Установка видео на сайт
Page
Menu

Установка видео на сайт

Когда я начал выбирать видеоплеер для одного из сайтов, то удивился их нынешнему количеству в интернете. Вот сравнительный анализ далеко не всех из существующих.

Выбор плеера для сайта

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

К сожалению, бОльшая часть пересмотренных плееров этим требованиям совершенно не удовлетворяла. Но один, все же, максимально близко к ним приблизился. О нем я и хочу рассказать подробнее.

Плеер AFTERGLOW

Начнем знакомство с этим плеером по порядку. Кстати, я не нашел в интернете по нему русскоязычной документации, что, согласитесь, странно.

Подключение скрипта плеера

Скрипт плеера желательно подключать внутри тегов head. Ниже я рассматриваю 2 варианта такого подключения.

Вариант подключения плеера со своего хостинга

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

Вариант подключения плеера по технологии CDN

Подключить скрипт записью внутри тегов head:

<script type="text/javascript" src="//cdn.jsdelivr.net/afterglow/latest/afterglow.min.js"></script>

Использование плеера

При использовании плеера с тегами video нужно присваивать им класс class="afterglow"

Подключение своего видеофайла

В этом примере подключим видеофайл, расположенный на нашем хостинге.

Javascript-код:
Подключение ролика с youTube по ссылке

Выложим в сайте видео с Ютуба в своём плеере. В теге video у нас появится новый атрибут data-youtube-id

Javascript-код:

API плеера

Настройки плеера через атрибуты

Добавляем постер
Адаптивный размер
Установка уровня громкости
Добавление видео в другом разрешении
Комментарии к теме (0)

Комментариев пока нет.

Дабавить комментарий