Lynda.com Дизайн веб-HTML фонового відео

• Може 18, 2024

Фонове відео - це чудовий спосіб продавати свій продукт, і в цьому навчальному курсі Lynda.com під назвою Дизайн Інтернету: HTML-відео Відео з Chris Converse ви дізнаєтесь, як додати фонове відео з автоматичним відтворенням на свою веб-сторінку. Ви також дізнаєтесь, як використовувати CSS для розміщення інших елементів дизайну над фоновим відео. А файли вправ безкоштовні навіть для стандартного членства.

Converse починається з html-файлу з голими кістками та будує основний контейнер div для елементів дизайну: текстовий логотип, логотип svg та відео. Він демонструє, як використовувати автовідтворення у відеотезі та як налаштувати два найпоширеніші типи відео, .mp4 та .ogg.

Потім Converse переходить до файлів CSS та CSS для стилізації та розміщення відео та зображення в центрі зображення логотипу. Він продовжує робити те ж саме для тексту мітки. Особливо мені сподобалась його техніка роботи з бордюрами.

Далі Converse обговорює, як зробити цей макет чуйним за допомогою медіа-запитів для середніх та малих екранів та CSS. Знову ж, він встановлює стилі для відео, логотипу та мітки. Він також демонструє, як встановити зображення на заміну для невеликих екранів, які не можуть відтворити відео, і приховати відео.

Переходячи до складніших питань, Converse демонструє, як за допомогою JavaScript додати складніший контроль над дисплеєм для функцій мобільних пристроїв, таких як сенсорні події. Він представляє сторонній веб-сайт під назвою Modernizr, який буде генерувати класи CSS, які можна додати на сторінку через JavaScript на основі функцій поточного пристрою. Він демонструє, як створити код, завантажити та додати його до коду веб-сторінки.

На останньому уроці Converse демонструє, як кодувати позицію та інші стилі для макета, щоб відео охоплювало все вікно браузера.

Цей курс стосувався HTML та CSS, які використовувались для створення та розміщення фонового відео для веб- та мобільних пристроїв. Однак я сподівався, що автор обговорить варіанти хостингу та оптимізації відеофайлу для швидкого завантаження. Крім того, було б непогано знати, як додавати елементи інтерактивного дизайну через фонове відео замість просто статичних елементів.

Кріс Конверс має ступінь графічного дизайну Рочестерського технологічного інституту та 22-річний досвід дизайну та технологій.

//www.lynda.com/HTML-tutorials/Design-Web-HTML-Background-Video/373560-2.html

Розкриття інформації: Ця стаття мені не отримала фінансової компенсації. Думки цілком власні на основі мого досвіду.

Відео Інструкція: Responsive images today (Може 2024).