Как скрыть этот уродливый YouTube Preloader

Вот короткая вещь, которая может сэкономить вам время, когда вы работаете над видео в фоновом режиме и используете YouTube в качестве источника мультимедиа.

Если вы когда-либо делали что-то подобное, вы знаете, что если вы просто добавите встроенный проигрыватель YouTube в свой исходный код, он не будет работать очень хорошо в фоновых целях. Это потому, что YT предоставляет его людям, которые хотят использовать его внутри контента сайта, а не обязательно в фоновом режиме.

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

Итак, вот что вы получаете прямо с сайта:

<iframe width = "560" height = "315" src = "https://www.youtube.com/embed/zFwL301vd4A" frameborder = "0" allowfullscreen> </ iframe>

Теперь, чтобы сделать его более подходящим для использования в фоновом режиме, мы хотим немного изменить его, чтобы удалить элементы управления, отключить звук, выполнить автозапуск и зациклить его. Вот как выглядит «обновленный» код для встраивания:

<iframe width = "560" height = "315" src = "https://www.youtube.com/embed/zFwL301vd4A?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=zFwL301vd4A&mute=1" frameborder = allowfullscreen-data-autoplay-keepplaying> </ iframe>

Большинство атрибутов говорят сами за себя, но можно задаться вопросом, зачем нам нужен «плейлист» . Это на самом деле очень важно для зацикливания видео. Без этого вы не сможете зациклить плеер.

Как только вы настроите iframe, просто вставьте его в код своего веб-сайта, задайте стиль контейнера, чтобы он охватывал обозначенную область, будь то весь видовой экран или просто определенный элемент DIV, и все готово.

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

Что если я скажу вам, что есть лучший способ? Ну, есть, и он не только существует, но и не так сложен в реализации. По сути, нам нужно изображение, которое будет покрывать видео, пока оно не начнет воспроизводиться. Итак, нам нужен триггер, который «знает», когда видео закончило буферизацию, и, к сожалению, он недоступен при встраивании iframe. Для решения этой проблемы мы будем использовать YouTube Player API, как описано на портале разработчиков Google:

https://developers.google.com/youtube/iframe_api_reference

Там мы улучшим пример, чтобы он на самом деле содержал оверлейное изображение плюс элемент, который будет содержать игрока. Вот несколько примеров HTML, которые служат этой цели:

<section class = "full-size-page"> <div id = "video-overlay" style = "background-image: url (images / overlay.jpg);"> </ div> <div class = "background- video "> <div class =" foreground-video "> <div id =" player "> </ div> </ div> </ div> </ section>

В приведенном выше примере у нас есть 2 элемента, на которые вы должны обратить внимание: # video-overlay и #player. В ваших стилях убедитесь, что при загрузке страницы видимый div # video-overlay виден и настроен на покрытие элемента .background-video .

Наконец, вместо добавления iframe в элемент #player используйте этот фрагмент JavaScript:

<script type = "text / javascript"> var player; function onYouTubeIframeAPIReady () {player = new YT.Player ('player', {videoId: 'zFwL301vd4A', playerVars: {mute: 1, autoplay: 1, loop: 1, элементы управления: 0, showinfo: 0, autohide: 0, enablejsapi: 1, модестрендинг: 1, список воспроизведения: 'zFwL301vd4A', vq: 'hd1080'}, allowfullscreen: 1, события: {'onStateChange': onPlayerStateChange}}); } function onPlayerStateChange (el) {if (el.data === 1) {jQuery ('# video-overlay'). hide (); }} </ script>

И все готово! Это так просто.

Вместо черного экрана с загрузчиком пользователи увидят видео с самого начала.

Теперь несколько вещей, которые мне не были понятны сразу:

1. Вам не нужно помещать этот JS-код в блок window.onload. Это сделано умно, и, как вы видите из фрагмента, вы можете просто добавить функцию (onYouTubeIframeAPIReady), которая автоматически вызывается библиотекой API, когда она готова к работе.
2. В конструкторе YT.Player (новый YT.Player ('player'), строка 'player' является селектором, а lib предполагала, что это идентификатор элемента. Не нужно вводить его как «#player»
3. Мы не нашли простой способ заглушить видео. В большинстве случаев проще просто загрузить беззвучную версию видео и избавить себя от лишних хлопот.

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

Возможно, вы захотите проверить репозиторий, который мы создали, с примерами обоих подходов. Вот ссылка: https://github.com/nopio/background-video-tutorial

Внутри вы найдете 2 HTML-файла:

• old_way.html - обычная реализация iframe с уродливым загрузчиком
• new_way.html - лучший способ делать вещи.

Похожие

Комментарии