Lynda.com Zaprojektuj wideo w tle w tle HTML

• Może 2, 2024

Wideo w tle to świetny sposób na reklamę Twojego produktu i na tym szkoleniu wideo Lynda.com zatytułowanym Zaprojektuj sieć: wideo w tle HTML z Chrisem Converse nauczysz się, jak dodać do swojej strony wideo w tle z autoodtwarzaniem. Dowiesz się również, jak używać CSS do umieszczania innych elementów projektu w tle wideo. Pliki ćwiczeń są bezpłatne nawet dla członkostwa standardowego.

Converse zaczyna się od pliku html gołych kości i buduje główny kontener div dla elementów projektu: sloganu tekstowego, logo svg i wideo. Pokazuje, jak używać autoodtwarzania w tagu wideo i jak skonfigurować dwa najpopularniejsze typy wideo, .mp4 i .ogg.

Następnie Converse przechodzi do plików CSS i CSS, aby stylizować i pozycjonować wideo oraz wyśrodkowany obraz logo. Przechodzi, aby zrobić to samo dla tekstu sloganu. Szczególnie podobała mi się jego technika pracy z granicami.

Converse omawia następnie, w jaki sposób uczynić ten układ responsywnym za pomocą zapytań o media dla średnich i małych ekranów oraz CSS. Ponownie ustawia style wideo, logo i sloganu. Pokazuje także, jak ustawić obraz zastępczy dla małych ekranów, na których nie można odtworzyć wideo, i ukryć wideo.

Przechodząc do bardziej skomplikowanych problemów, Converse pokazuje, jak używać JavaScript, aby dodać bardziej złożoną kontrolę nad wyświetlaniem funkcji urządzeń mobilnych, takich jak zdarzenia dotykowe. Wprowadza stronę internetową o nazwie Modernizr, która będzie generować klasy CSS, które można dodać do strony za pomocą JavaScript w oparciu o funkcje bieżącego urządzenia. Pokazuje, jak wygenerować kod, pobrać i dodać go do kodu strony.

W ostatniej lekcji Converse pokazuje, jak kodować pozycję i inne style dla układu, aby wideo obejmowało całe okno przeglądarki.

Ten kurs dotyczył HTML i CSS używanych do stylizacji i pozycjonowania wideo w tle na urządzenia internetowe i mobilne. Miałem jednak nadzieję, że autor omówi opcje hostingu i optymalizacji pliku wideo do szybkiego pobrania. Byłoby również miło wiedzieć, jak dodawać interaktywne elementy projektu do wideo w tle zamiast tylko elementów statycznych.

Chris Converse ma wykształcenie graficzne z Rochester Institute of Technology i 22 lata doświadczenia w projektowaniu i technologii.

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

Ujawnienie: Nie otrzymałem rekompensaty finansowej za ten artykuł. Opinie są całkowicie moje na podstawie moich doświadczeń.

Instrukcje Wideo: 7 tips for better managing your crew | Video production | lynda.com (Może 2024).