Категории

    Новости

    Тонгкат Али
    http://silverfox.in.ua/product-tag/tongkat-ali/ (англ. Long Jack, Tongkat Ali) – это средство, в основном используемое спортсменами для повышения уровня тестостерона и серьезных силовых нагрузках. Но

    Иван Айвазовский
      этой (Ованес Айвазян, Иван Гайвазовский, Aivazovsky, Ivan. 1817-1900), –   русский живописец, мастер морского пейзажа (маринист). Популярнейшие картины Айвазовского - “Радуга” (1873 г. ), “Чёрное

    Изменение фона в шаблоне Joomla
    6. Сейчас колдуем с CSS так, чтоб было похоже на данный макет. Поехали: Я заключил меню в блочный элемент levoe-menu: Таким макаром, Joomla генерирует последующий код: Основная Сырье Аддитивы Диоксид

    Как быстро перенести сайт на Joomla Часть 2 Восстановление из резервной копии
    Как запустить цикл? У меня на данный момент выводит одну и туже картину либо просто "i" $q ="SELECT vm.`file_url_thumb` FROM `#__virtuemart_medias` vm LEFT JOIN `#__virtuemart_product_medias` vpm ON vpm.`virtuemart_media_id`

    Анализ сайта яндекс
    Продвижение веб-сайта в ТОП Yandex'а и Google (других поисковых машин) - главная цель для хоть какого вебмастера либо оптимизатора. В попытке закрепить собственный ресурс на фаворитных позициях выдачи

    Материнские платы на 2 процессора
    Для тех у кого нет времени, чтоб прочесть всю статью, я сразу даю рекомендуемые модели материнских плат под различные микропроцессоры. На сей день оптимальными по соотношению стоимость/качество являются

    Обозначение смайликов в картинках
    Здрасти, читатели блога Веб-сайт с нуля. Доводилось ли вам думать над тем, что означают смайлы, которые вам прислали, и как на их ответить? Сталкивались ли с необходимостью выразить свои эмоции очень

    Форд мондео ремонт
    На Форд Мондео ремонт силовых агрегатов случается довольно изредка, так как моторы южноамериканского производителя обычно надежны и долговечны. Особенного внимания стоит 2, 5л бензиновый вариант, снаряженный

    Процессоры intel socket 775
    Сокет (socket) микропроцессора - разъем, место на материнской плате компьютера куда вставляется микропроцессор. Микропроцессор, до того как он будет установлен в материнскую плату, должен подходить ей

Полезные материалы

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

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

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

Это потому, что 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 - лучший способ делать вещи.

Com/embed/zFwL301vd4A?
Что если я скажу вам, что есть лучший способ?