Video pozadina u Ionic aplikaciji

U današnje vrijeme brzog interneta šteta je ne iskoristiti mogućnost korištenja videa kao pozadine na ekranu za prijavu, splash screen ekranu ili kao pozadinu na bilo kojem drugom ekranu. Korisnici dobiju bolje korisničko iskustvo jer im taj video zaokupi pažnju i pitaju se što ih čeka dalje.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju.

Video pozadina

U ovom koraku trebam imati spreman video koji ću koristiti kao pozadinu. Video ću pronaći na stranici http://coverr.co/

Korištenje video pozadine u Ionic aplikaciji

Preuzeti video postavljam unutar ./src/assets/ mape.

Korištenje video pozadine u Ionic aplikaciji

Iskoristiti ću HomePage komponentu za prezentaciju ovog primjera.

Umjesto postojećeg sadržaja home.html datoteke

postavljem sljedeće:

Ono glavno nalazi se unutar video taga za kojeg vjerujem da je web developerima poznat.

Ono što možda na prvu nije poznato je atribut webkit-playsinline koji zapravo znači da želim pokretanje video točno unutar HTML elementa u koji sam ga stavio i to bez kontrola za upravljanje (pokretanje, pauza, zaustavljanje).

Također, kako bi ovo bilo moguće, potrebno je u config.xml datoteku dodati sljedeće:

I uz malo CSS-a:

Dobijem sljedeće:

Video pozadina u Ionic aplikaciji

P.S. Više o ovome moguće je saznati u knjizi Ionic Cookbook -Third Edition.

Objavio

Tomislav Stanković

Web developer. Uz to bavi se i temama vezanim uz online reputaciju. Google+

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *

Ova web-stranica koristi Akismet za zaštitu protiv spama. Saznajte kako se obrađuju podaci komentara.