- Крок 1. Виберіть ваш джерело для відео
- Dissolve
- iStock
- ShutterStock
- Крок 2. Конвертуйте відео до потрібного формату і розміру
- Крок 3. Виберіть відеоплеєр
- HTML5, CSS і JavaScript
- Модулі
- Image & Video FullScreen Background ($ 17)
- Easy Video Background WP ($ 14)
- Video Player & FullScreen Video Bgd ($ 16)
- mb.YTPlayer for background videos (free)
- bgvideo (free)
- Крок 4. Налаштуйте ваше відео
- висновок
- джерело: wpmudev.org
Уявіть собі, що ви перейшли на сайт з величезним зображенням в самому верху. Виглядає круто, чи не так? Великі зображення дійсно дуже облагороджують сайт, але, по суті, вони ніяк не утримують на собі увагу відвідувачів. Якщо ви хочете не тільки привернути увагу, а й утримати його, тоді слід придивитися до фоновим відео заставок.
Дивіться також:
Зараз відео, які відтворюються на тлі - одна з найбільш популярних тенденцій в світі веб-дизайну. Браузери можуть відтворювати фонове відео, використовуючи або HTML5 тег <video>, або формат H.264. Цей процес запускається автоматично, незалежно від інших. Ви можете керувати ним і контролювати його, як і будь-який інший елемент сторінки. Відео фон допоможе вам зробити той сайт, який напевно запам'ятається відвідувачам і ефектно виділиться із загальної маси.
Процес створення відео бекграунду зовсім нескладний. У цій статті ми покажемо, наскільки це легко. Виконавши чотири простих кроки, кожен з вас зможе швидко додати відео фон на ваш WordPress сайт.
Крок 1. Виберіть ваш джерело для відео
Ви можете використовувати ваші власні відео, вибирати відео з YouTube і Vimeo або використовувати інші відео-сайти. Більшість інтегрованих відеоплеєрів можуть використовувати будь-який з цих методів.
Нижче представлено кілька ресурсів, де б ви могли знайти підходяще стічне відео:
Dissolve
На 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:
& Lt; section id = "big-video" & gt; & Lt; div class = "video" src = "[FALLBACK IMAGE URL]" data-video = "[VIDEO URL]" data-placeholder = "[PLACEHOLDER IMAGE URL]" & gt; & lt; / div & gt; & Lt; / section & gt;
Код включає в себе два зображення: перше - для заповнення (перший кадр з відео) і друге - альтернативне зображення.
скрипти
Цей код для тесту браузера:
function isIE () {var myNav = navigator.userAgent.toLowerCase (); return (myNav.indexOf ( 'msie')! = -1)? parseInt (myNav.split ( 'msie') [1]): false; } Window.isIEOld = isIE () & amp; & amp; isIE () & lt; 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 () & gt; 599 & amp; & amp;! isIEOld & amp; & amp;! isiPad) {el + = '& lt; video autoplay loop poster = "' + img + '" & gt;'; el + = '& lt; source src = "' + video + '" type = "video / mp4" & gt;'; el + = '& lt; / video & gt;'; } Else {el = '& lt; div class = "video-element" style = "background-image: url (' + noVideo + ')" & gt; & lt; / div & gt; '; } $ ( '. Video'). Prepend (el);
Якщо вимоги до відео будуть виконані, то воно виведеться на екран. В іншому випадку, відвідувач побачить альтернативне зображення. Ви можете протестувати будь-які параметри: дозвіл екрана, відтворення на різних пристроях і т.д.
CSS
Ви можете оформляти розмітку за допомогою CSS. Використовуючи CSS, ви зможете встановити розмір контейнера за допомогою тегів <img> або <video>. Пропорції при цьому зберігаються.
# 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 (free)
Даний плагін може використовувати будь-яке відео з YouTube в якості вашого фонового відео. Він використовує YouTube iframe API і виводить відео за допомогою тега HTML5 VIDEO.
Плагін дуже простий у використанні. Ви передаєте йому URL-адресу відео, вибираєте сторінку, на якій воно буде відображатися, налаштовуєте параметри прозорості та якості, прибираєте рекламу (якщо ви власник відео), вказуєте початок і кінець, встановлюєте музику, налаштовуєте цикл і т.д. Він додає відео на сторінки і пости за допомогою шорткода, дозволяє вам додавати зображення для мобільних пристроїв.
bgvideo (free)
Цей плеєр буде також розміщувати шорткод на вашій сторінці або пості. Він буде відтворювати MP4, WebM, або OGG відео з URL-адреси, який ви вводите. Ви можете налаштовувати висоту, ширину, фіксоване положення, автозапуск, цикл і параметри звуку. Для настройки bgvideo потрібно зробити кілька додаткових дій, про які ви вже встигли прочитати в нашій статті.
Крок 4. Налаштуйте ваше відео
Насправді, налаштувати ваше відео дуже легко.
Тепер, коли у вас є відео відповідного типу і розміру, ваш відеоплеєр налаштований і готовий до роботи, настав час завантажувати відео і підключати плеєр до нього. Якщо ви розберетеся з URL-адресою відео в плагіні, то всі інші настройки будуть ще простіше. Вам потрібно буде прийняти кілька остаточних рішень для роботи відео:
- Авто-відтворення. Це найпопулярніша настройка. Відео має автоматично запускатися після того, як завантажилися всі інші елементи.
- Цикл. Чи варто робити цикл з відео і відтворювати його постійно? Якщо відповідь позитивна, то уважно встановлюйте початкову і кінцеву точку, щоб перехід виглядав природним і плавними. Процес повторення не повинен звертати на себе багато уваги.
- Аудіо. Ми не рекомендуємо автоматично відтворювати аудіо. Дозвольте користувачам самостійно, при бажанні, включати звук. Аудіофайли вимагає значних додаткових ресурсів і сильно навантажують браузер. До того ж, ви не можете бути впевнені в музичних уподобаннях ваших відвідувачів.
- Демо зображення. Якщо браузер не сумісний з плеєром, то він повинен виводити альтернативне зображення. Це допоможе вам уникнути того, що сайт буде виглядати "поламаним" і порожнім.
висновок
Фонові відео допоможуть вашому сайту вигідно виділитися і привернути увагу читачів. Додати цю функцію на ваш сайт дуже легко і не вимагає багато дій, але при правильно обраному відео і програвачі ви зможете перетворити сайт з просто хорошого в дивовижний!
Чи використовуєте ви фонове відео? Чи працювали вже з один з плагінів, які ми перерахували тут? Відповідайте на питання і діліться своїми враженнями в коментарях.
джерело: wpmudev.org
Наскільки корисним був цей пост?
Натисніть на зірку, щоб оцінити цей пост!
Надіслати рейтинг
Середній рейтинг: 4.8 / 5. Кількість голосів: 6
Дивіться також:
Виглядає круто, чи не так?Чи варто робити цикл з відео і відтворювати його постійно?
Чи використовуєте ви фонове відео?
Чи працювали вже з один з плагінів, які ми перерахували тут?