Уявіть собі, що ви перейшли на сайт із величезним зображенням у самому верху. Виглядає круто, чи не так? Великі зображення дійсно дуже ушляхетнюють сайт, але, по суті, вони ніяк не утримують на собі увагу відвідувачів. Якщо ви хочете не тільки привернути увагу, а й утримати її, тоді слід придивитися до фонових відеозаставок.
Дивіться також:
- wordpress: вивчаємо вбудований аудіо- та відеоплеєр
- Flowplayer – огляд адаптивного відео-плеєра для WordPress
- WP Video Robot – зручний плагін для автоматичної публікації відеопостів
- Відеогалерея YouTube та Vimeo на WordPress
- WordPress плагіни для публікації відео на сайті
- Найкращі відео-плагіни для WordPress
Зараз відео, що відтворюються на фоні, — одна з найпопулярніших тенденцій у світі веб-дизайну. Браузери можуть відтворювати фонове відео, використовуючи або HTML5 тегвідео>, або формат H.264. Цей процес запускається автоматично незалежно від інших. Ви можете керувати ним та контролювати його, як і будь-який інший елемент сторінки. Відео фон допоможе вам зробити той сайт, який, напевно, запам'ятається відвідувачам і ефектно виділиться із загальної маси.
Процес створення відео бекграунд зовсім нескладний. У цій статті ми покажемо, наскільки це легко. Виконавши чотири прості кроки, кожен з вас зможе швидко додати відео фон на ваш WordPress сайт.
Крок 1. Виберіть джерело для відео
Ви можете використовувати власні відео, вибирати відео з YouTube і Vimeo або використовувати інші відео-сайти. Більшість інтегрованих відеоплеєрів можуть використовувати будь-який із цих методів.
Нижче наведено кілька ресурсів, де ви могли б знайти відповідне стокове відео:
розчинятися
На Dissolve ви знайдете понад 600,000 стокових відео у 24 різних категоріях, які ви можете використати на своєму сайті. Вони включають як преміум, так і безкоштовні відеоролики. Dissolve навіть допоможе вам знайти необхідне відео на основі монтажного списку, сценарію чи концепції. Ціни починаються від $50 за кліп.
iStock
iStock від Getty Images надає можливість вибрати HD-відео та стокові відео з 21 категорії. Усі відео не вимагають подальших виплат за авторське право, ви можете придбати їх окремо чи оформити передплату. Ціни починаються від $60.
ShutterStock
На ShutterStock ви знайдете майже 3 мільйони відео (також не вимагають подальших виплат за авторське право) у 28 категоріях. Ви можете купити їх окремо чи набором. Ціни починаються з $19.
Крок 2. Конвертуйте відео до потрібного формату та розміру
Вибираючи розмір вашого відео, пам'ятайте, що у багатьох людей інтернет набагато повільніший, особливо це стосується тих, хто мешкає не в міській місцевості. Ви повинні визначити вашу цільову аудиторію та встановити відповідний розмір файлу для неї. Кодуйте відео в бітрейті, який буде нижчим, ніж швидкість з'єднання вашої цільової аудиторії. Ви можете зменшити розмір файлу, зменшивши бітрейт або зменшивши тривалість відео. Відео повинні добре виглядати і гладко відтворюватися. Краще розмістити милий короткий ролик, ніж довге відео, яке не завантажуватиметься.
Крок 3. Виберіть відеоплеєр
Є кілька варіантів відтворення відео. Ви можете кодувати відео на сайті самостійно або скористатися спеціальним плагіном. Вам знадобиться адаптивний програвач, який може надати всі необхідні функції для налаштувань відтворення, яке найкраще підходитиме вашій аудиторії.
HTML5, CSS та JavaScript
Перевага HTML5, CSS і JS полягає в тому, що ви можете налаштувати кожен елемент окремо, оформити його, протестувати як все відображатиметься в браузерах, які не підтримують відтворення відео.
Розмітка
Спочатку створіть контейнер для JavaScript:
<section id="big-video"> <div class="video" data-src="[FALLBACK IMAGE URL]" data-video="[VIDEO URL]" data-placeholder="[PLACEHOLDER IMAGE URL]"></div> </section>
Код включає два зображення: перше — для заповнення (перший кадр з відео) і друге — альтернативне зображення.
Скрипти
Цей код для тестування браузера:
function isIE () {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}
window.isIEOld = isIE() && isIE() < 9; window.isiPad = navigator.userAgent.match(/iPad/i); var img = $('.video').data('placeholder'), video = $('.video').data('video'), noVideo = $('.video').data('src'), el = ''; if($(window).width() > 599 && !isIEOld && !isiPad) {
el += '<video autoplay loop poster="' + img + '">';
el += '<source src="' + video + '" type="video/mp4">';
el += '</video>';
} else {
el = '
<div class="video-element" style="background-image: url(' + noVideo + ')"></div>
';
}
$('.video').prepend(el);
Якщо вимоги до відео будуть виконані, воно виведеться на екран. Інакше відвідувач побачить альтернативне зображення. Ви можете протестувати будь-які параметри: роздільну здатність екрана, відтворення на різних пристроях і т.д.
CSS
Ви можете оформляти розмітку за допомогою CSS. Використовуючи CSS, ви зможете встановити розмір контейнера за допомогою тегівimg> абовідео>. Пропорції зберігаються.
#big-video {
position: relative;
background: #000;
overflow: hidden;
height: 582px;
}
#big-video .video {
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
#big-video video {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#big-video .video-element {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: auto 100%;
}
Плагіни
Інший варіант – використовувати плагіни. Нижче наведено невеликий огляд кількох плагінів, які допоможуть вам у цій ситуації.
Image&Video FullScreen Background ($ 17)
Це преміум плагін, який надає функцію слайдера із фоновим зображенням, фонове відео, мультимедійну галерею та дає можливість виводити це все у повноекранному форматі. Він сумісний із мобільними пристроями (без автозапуску).
Плагін поставляється з двома скінами та двома стилями, можливістю анімованого тексту, двома переходами, дозволяє вставляти посилання у кожен слайд та розміщувати текстуру поверх зображень. Відмінно працює з YouTube та Vimeo. Завдяки йому ви зможете самостійно налаштувати понад 40 параметрів.
Стандартна ліцензія коштує $17, призначена для одного клієнта та для некомерційних проектів. Розширена ліцензія коштує $85, призначена для одного клієнта та може використовуватись для комерційних проектів.
Easy Video Background WP ($ 14)
Це преміум плагін, який працює з усіма браузерами, включаючи Internet Explorer 7 і 8. Він автоматично вибиратиме найбільш оптимальний формат файлу для відображення. Плагін використовує HTML5 і автоматично переходить до Flash, якщо HTML5 не підтримується, і навпаки. На мобільних пристроях він виводитиме зображення.
Розміщує відео на сторінках та постах, використовуючи шорткод. За допомогою плагіна, ви зможете повністю контролювати розмір відео, вибирати абсолютне та фіксоване позиціонування, і до того ж, не потрібно дбати про співвідношення сторін. Існують такі функції, як відтворення, пауза, відключення звуку і т.д.
Стандартна ліцензія коштує $14, призначена для одного клієнта та для некомерційних проектів. Розширена ліцензія коштує $70, яка також призначена для одного клієнта і може використовуватися для комерційних проектів.
Video Player & FullScreen Video Bgd ($ 16)
Це преміум плагін, який відтворює відео як з автономних хостингів, так і з Vimeo чи YouTube. Плагін виводитиме їх у повноекранному режимі або з фіксованою шириною. Ви також можете помістити текстуру поверх відео. Сумісний із мобільними пристроями (без автозапуску). Має більше 30 параметрів, які можна настроїти без особливих зусиль.
Стандартна ліцензія коштує $16, призначена для одного клієнта та для некомерційних проектів. Розширена ліцензія коштує $80, призначена для одного клієнта та може використовуватись для комерційних проектів.
mb.YTPlayer for background videos (безкоштовно)
Цей плагін може використовувати будь-яке відео з YouTube як ваше фонове відео. Він використовує YouTube iframe API та виводить відео за допомогою тега HTML5 VIDEO.
Плагін дуже простий у використанні. Ви передаєте йому URL-адресу відео, вибираєте сторінку, на якій воно відображатиметься, налаштовуєте параметри прозорості та якості, прибираєте рекламу (якщо ви власник відео), вказуєте початок та кінець, встановлюєте музику, настроюєте цикл тощо. Він додає відео на сторінки та пости за допомогою шорткоду, дозволяє вам додавати зображення для мобільних пристроїв.
bgvideo (free)
Цей плеєр також буде розміщувати шорткод на вашій сторінці або пості. Він буде відтворювати MP4, WebM, або OGG відео з URL-адреси, яку ви вводите. Ви можете налаштувати висоту, ширину, фіксоване положення, автозапуск, цикл та параметри звуку. Для налаштування bgvideo знадобиться кілька додаткових дій, про які ви вже встигли прочитати в нашій статті.
Крок 4. Налаштуйте ваше відео
Насправді, налаштувати відео дуже легко.
Тепер, коли у вас є відео відповідного типу та розміру, ваш відеоплеєр налаштований та готовий до роботи, настав час завантажувати відео та підключати плеєр до нього. Якщо ви розберетеся з URL-адресою відео в плагіні, всі інші налаштування будуть ще простіше. Вам потрібно буде прийняти кілька остаточних рішень для роботи відео:
- Авто-відтворення. Це найпопулярніше налаштування. Відео повинне автоматично запускатися після завантаження всіх інших елементів.
- цикл. Чи варто робити цикл з відео та відтворювати його постійно? Якщо відповідь позитивна, то уважно встановлюйте початкову і кінцеву точку, щоб перехід виглядав природним і плавним. Процес повторення не повинен привертати до себе багато уваги.
- Аудіо. Ми не рекомендуємо автоматично відтворювати аудіо. Дозвольте користувачам самостійно, за бажання, вмикати звук. Аудіофайли потребують значних додаткових ресурсів і сильно навантажують браузер. До того ж, ви не можете бути впевнені у музичних уподобаннях ваших відвідувачів.
- Демо зображення. Якщо браузер не сумісний з плеєром, він повинен виводити альтернативне зображення. Це допоможе вам уникнути того, що сайт буде виглядати "зламаним" і порожнім.
Висновок
Фонові відео допоможуть вашому сайту вигідно виділитися та привернути увагу читачів. Додати цю функцію на ваш сайт зовсім не складно і не вимагає багато дій, але при правильно вибраному відео та програвачі ви зможете перетворити сайт з просто гарного на дивовижний!
Ви використовуєте фонове відео? Чи працювали вже з одним із плагінів, які ми перерахували тут? Відповідайте на запитання та ділитесь своїми враженнями у коментарях.
Джерело: wpmudev.org
Коментарі до запису: 1
дякую за цінну інформацію, зараз пробуватиму)