3.12.13, 09:05
0 комментарий
  Уроки / Скрипты / Горячее

Easy Video Background

Easy Video Background дает задний фон с помощью javascript. Скрипт автоматически выбирает наиболее оптимальный формат видео: к примеру с низким качеством видео загружается если используется мобильные устройства. Кроме того, если у пользователя нет поддержки HTML5 тега видео, тогда просмотр будет на JQuery версии: 1.6.



Добавление видео-фона вашего сайта (перевод Google)

Здесь я объясню вам, как добавить видео на фоне вашего сайта, и объяснить вам, какие варианты у вас есть.

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

Easy Video Background


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

Проверьте, если ваш сайт исходный html-тег если это не изменить, чтобы именно такой же, как следующее:

Easy Video Background


Почему? Потому что это говорит пользователь 's, что этот браузер будет html 5. Поэтому он может проверять тег видео.

ШАГ 1 - импорт javascript-библиотек

Итак, первое сделать, чтобы импортировать все, что вам понадобится для выполнения сценария. То, что будет необходимо импортировать:

jquery library - используется в backgroudn_video скрипт
modernizr - используется, чтобы проверить, если клиент, браузер поддерживает работу с видео и какие форматы он поддерживает
swfobject - используется для проверки версии flash, и для создания flash экземпляра объекта
video_background.min - это фактический сценарий, что вы будете звонить, чтобы добавлять и обрабатывать видео

Итак, давайте это делать. Вам придется добавить 4 строки в разделе head:

<script type="text/javascript" src="jquery/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery/modernizr.custom.26584.js"></script>
<script type="text/javascript" src="jquery/swfobject.js"></script>
<script type="text/javascript" src="js/video_background.min.js"></script>


Вы должны добавить следующие строки прямо под тег title, то вы получите то, как:

Easy Video Background


Теперь у вас есть все скрипты, вам необходимо настроить вашу видео фон.

ШАГ 2 - вызов фона видео функция

Теперь вы можете шагом к фактическому созданию видео фон. Для этого вам необходимо вызвать функцию с некоторыми paramteres, что я объясню, как мы идем.

Как и где вы вызовите эту функцию?

Прежде чем объяснить, какие параметры и опции доступны вам я скажу тебе, где и что вы должны поместить вызов скрипта.

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

<script type="text/javascript">
       jQuery(document).ready(function($) {
             $("body").video_background({  /*parameters go here*/   });
       });
</script>


Возвращаясь к нашему примеру, мы имеем:

Easy Video Background


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

У вас много режимов, которые являются контрольными:
autoplay - установить значение "true", если вы хотите видео для автозапуска, как только пользователь попадает на сайт или "false", если не
loop - установить значение "true", если вы хотите видео, чтобы начать снова, когда доходит до конца или "false", если не
muted - установить значение "true", если вы хотите видео для запуска приглушенные или "false", если не

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

Почему я должен включать в себя несколько форматов для одного видео?

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

Какой формат должен быть у меня?

Я рекомендую вам иметь 2-х форматах, mp4 (наиболее часто используемая, и совместимость для большинства систем) и ogg или webm. Обратите внимание, что webm не работать на некоторых linux-серверов, поэтому, если на вашем сервере linux, вы должны рассмотреть ogg вместо webm.

Flash-компонент может использовать только 2 из 4 форматов, mp4 и flv, вам не нужно иметь flv-если вы имеете в формате mp4. Html 5 компонент использует mp4, ogg или webm.


Итак, возвратимся к реализации и предполагая, что у вас уже есть не менее двух форматов для видео вам нужно только определить их параметры, необходимо следующее:

mp4, flv, webm, ogg - Они используются для всех персональных компьютеров, так как они лучше, обработки и скорости Интернета, вы можете иметь несколько лучшего качества, чем в других системах.
mp4Mobile, flvMobile, webmMobile, oggMobile - Они используются для всех мобильных устройств, поскольку они имеют более низкое обработки и скорости Интернета, вы должны иметь более низкого качества видео.
format - Это очень важно для вас, чтобы определить пропорции видео. Это по умолчанию 16:9, как это наиболее часто используемый, но если ты видео имеет другую или вы не уверены, откройте ее с помощью media player на ПК и измерить его размер, давайте предположим, что это имеет 1360x600 вы можете задать формат = "1360:600". Это будет использоваться, чтобы изменить размер видео в соответствии с размер окна.
formatMobile - Так же, как формат, но для мобильного видео (обычно такой же, как format)

Вы должны иметь форматы для мобильных даже если они такие же, как и обычный. Например, если у вас есть mp4 и ogg версии и чувствуете, что вам не нужно или вы хотите, чтобы уменьшить его quailty for mobile вам необходимо установить mp4Mobile тот же путь, что и mp4 же для ogg.


Теперь вам нужно только определить параметры правильно, на моем примере я mp4 и ogg формат с соотношением сторон 16:9, кроме того, я хочу, чтобы это автозапуска, петли и не выключается, initialy, так что я буду иметь:

  $("body").video_background({  format:"16:9",
                               mp4:"videos/sample.mp4" ,
                               ogg:"videos/sample.ogg", 
                               formatMobile:"16:9",
                               mp4Mobile:"videos/mobile/sample.mp4" ,
                               oggMobile:"videos/mobile/sample.ogg",
                               loop:"true",
                               autoplay:"true",
                               muted:"false"
                             });


Так что мой вызов скрипта будет что-то вроде:

Easy Video Background


И у вас есть видео на фоне всех set :)

Функции управления

Существует несколько функций управления, которые можно вызывать с помощью javascript или на кнопку нажмите кнопку, чтобы взаимодействовать с фоновым видео:

background_play() - Воспроизведение видео
background_pause() - Приостанавливает воспроизведение видео
background_toggle_play() - Воспроизведение/пауза видео в зависимости от его состояния
background_mute() - Отключение видео
background_unmute() - Включение видео
background_toggle_sound() - Отключение/Включение видео в зависимости от его состояния
background_hide() - Скрывает видео
background_show() - Показывает видео
background_toggle_hide() - Скрывает/Показывает видео в зависимости от его состояния
background_rewind() - Перематывает видео, чтобы начать


Как я могу вызывать эти функции?

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

Возвращаясь к нашему примеру, имея все настройки из второго раздела мы можем определить некоторые кнопки, как эти:

Easy Video Background


Приятного использования (:

Исходники и документация в архиве.

СКАЧАТЬ

Забрать
с облака

Напишите своё мнение