Как встроить видеопроигрыватель HTML5 на свой веб-сайт с помощью HLS и DASH Adaptive Streaming

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



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

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

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



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

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



Индивидуальные отчеты



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

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

Загрузить видео

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



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

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

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

Настройка облачного проигрывателя

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

После того, как у вас все это будет, вы должны загрузить код библиотеки Cloud Hosted Player на свою веб-страницу тег, чтобы позволить JWPlayer загружаться на ваш сайт.

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

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

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

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

jwplayer ('myElement'). setup ({'playlist': 'https://example.com/myVideo.mp4