Как встроить HTML5-видеоплеер на ваш сайт с помощью адаптивной потоковой передачи HLS и DASH

Adobe’Flash Player уже давно используется в качестве основного видеоплеера в Интернете. Протокол HTML5 долгое время царствовал, но ему на смену приходят протоколы, которые быстрее, эффективнее и упрощают управление файлами. Google Chrome начал блокировать Flash, а вскоре и вовсе прекратит поддержку Adobe Flash. Возможно, потребуется некоторое время, чтобы полностью заменить этот устаревший протокол, но он, безусловно, приносит свои преимущества. Некоторые из новых браузеров имеют встроенную поддержку HLS (HTTP Live Streaming).

HTML5 и HLS — это протоколы с открытым исходным кодом, что означает, что любой может изменить их код и использовать их на своем сайте совершенно бесплатно. Кодирование видео в несколько различных стандартов качества воспроизведения, вложенные титры и оптимизация качества видео в зависимости от пропускной способности канала не требуют особых усилий при потоковой передаче видео в формате HLS. В связи с переходом на HTML <видео> тег, потоковая передача HTML5 входит в код, что упрощает потоковую передачу через HLS и DASH. DASH и HLS разбивают видеопоток на небольшие сегменты, которые могут быть использованы для HTML5-видеоплеера. Они уменьшают время буферизации видео перед началом его воспроизведения и сокращают проблемы с заиканием, с которыми вы можете столкнуться при просмотре потока. Преимущества не только для зрителя, но и для поставщика контента.

Встраивание HTML5 видеоплеера на ваш сайт с помощью JWPlayer

Прежде чем мы начнем, мы предлагаем получить JWPlayer от здесь. С ростом использования HLS и DASH для адаптивной потоковой передачи появилось множество видеоплееров, которые, безусловно, предоставляют пользователям свою долю преимуществ. Одним из таких плееров, который раз за разом выдерживает испытания и используется такими компаниями, как ESPN и Sony Pictures, является JWPlayer. Загрузка контента, встраивание видеоплеера в HTML5, iOS, Android и Fire OS упрощается с помощью JWPlayer’ родного кода, который может быть адаптирован вами для еще лучшего пользовательского опыта. Но сегодня мы сосредоточимся на видеоплеерах HTML5 и на том, как вы можете использовать HLS и DASH для лучшей адаптивной потоковой передачи.

Что предлагает JW Player?

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

JWPlayer упрощает управление контентом на вашем сайте с CMS, позволяя вам легко управлять титрами, миниатюрами, метаданными и т.д. Поэтому использование и преимущества JWPlayer выходят за рамки простого видеоплеера для встраивания ваших HTML5-видео.

Загрузка видео на JWPlayer

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

Когда видео загружено, вы можете начать редактировать раздел метаданных этого видео, просматривать аналитику и следить за трафиком и т.д. или получить исходники для HLS и загрузить закрытые субтитры на вкладке assets.

Настройка видеоплеера HLS и DASH

Прежде чем встраивать видеоплеер, вы должны сначала добавить библиотеку плеера на свой сайт. Существует три способа, с помощью которых вы можете осуществить эту задачу. Самостоятельное размещение, размещение в облаке и размещение в облаке с помощью вызовов API. Разница между облачным хостингом и облачным хостингом с вызовами API заключается просто в основе вызовов API. Разработчикам, которые хотят управлять реализацией своего видеоплеера через вызовы API, рекомендуется использовать это. Для самостоятельных хостеров версия плеера полностью контролируется вами. Важно отметить, что плеер’ не поворачивается автоматически, и при использовании self-host это нужно делать вручную.

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

Как только вы все это сделаете, вы должны загрузить код библиотеки Cloud Hosted Player Library в вашу веб-страницу’ <head> для того, чтобы позволить JWPlayer быть загруженным на ваш сайт.

Встраивание видеоплеера

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

После того, как вы загрузили библиотеку плеера, размещенную на облачном хостинге, на страницу <head> тег вашей веб-страницы, следующим шагом будет загрузка встроенного кода. Сначала создайте <div> тег в <тело> где должен появиться JWPlayer. Вызов setup() со свойством playlist для вызова плеера в таргете <div>. 

Ниже приведен пример setup() код, который предоставляется разработчиками JWPlayer:

jwplayer("myElement").setup({
"playlist": "https://example.com/myVideo.mp4",
"высота": 360,
"width": 640,
"автозапуск": "viewable",
"реклама": {
"client": "vast",
"tag": "http://adserver".com/vastTag.xml"
}
});

Есть несколько различных свойств и расширенных опций, которые могут быть использованы в функции setup() блок может содержать. Они могут быть вложенными, например тип что необходимо, когда URL медиа не содержит правильного расширения.

Вы можете либо вызвать плеер с собственного хостинга и настроить его по своему усмотрению, либо использовать плеер JWPlayer’ и сделать его самостоятельно. Если вы выберете последний вариант, вам просто нужно будет добавить блок кода Cloud Hosted Player Library в разделе <head> тег вашей веб-страницы.

Адаптивная потоковая передача HLS и DASH — это протоколы адаптивного битрейта. Один пользователь может просматривать видео с помощью своего устройства Android или Apple с разрешением FHD, и тот же пользователь может выйти на улицу и легко посмотреть видео с более низким разрешением. Адаптивный характер этих двух протоколов позволяет им иметь свои небольшие различия. Какой бы протокол вы ни выбрали, JWPlayer сделает это возможным.

Вердикт

Встраивание HTML5 видеоплеера с использованием адаптивного потокового вещания HLS и DASH довольно просто с JWPlayer. Это более или менее похоже на встраивание видео на Youtube, однако удивительный и простой в понимании пользовательский интерфейс JWPlayer’ делает это не таким уж сложным даже для начинающих кодеров.