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.
|
1 2 |
$ ionic start IonicVideoBackground blank $ cd IonicVideoBackground |
Video pozadina
U ovom koraku trebam imati spreman video koji ću koristiti kao pozadinu. Video ću pronaći na stranici http://coverr.co/
Preuzeti video postavljam unutar ./src/assets/ mape.
Iskoristiti ću HomePage komponentu za prezentaciju ovog primjera.
Umjesto postojećeg sadržaja home.html datoteke
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> The world is your oyster. <p> If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide. </p> </ion-content> |
postavljem sljedeće:
|
1 2 3 4 5 6 7 8 9 10 11 |
<ion-content class="homePage"> <div class="fullScreenBg"> <video class="fullScreenBgVideo" autoplay loop muted webkit-playsinline> <source src="assets/Office-Day.mp4" type='video/mp4; codecs="h.264"'> <source src="assets/Office-Day.webm" type="video/webm"> </video> </div> <div class="center"> <h1>Ionic Video Background</h1> </div> </ion-content> |
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:
|
1 |
<preference name="AllowInlineMediaPlayback" value="true" /> |
I uz malo CSS-a:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
page-home { .homePage { color: #fff; text-shadow: 1px 0 0 gray, -1px 0 0 gray, 0 1px 0 gray, 0 -1px 0 gray, 1px 1px gray, -1px -1px 0 gray, 1px -1px 0 gray, -1px 1px 0 gray; } .fullScreenBg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: -100; } .fullScreenBgVideo { position: absolute; top: 0; left: 0; height: 100%; } .center { top: 50%; transform: translateY(-50%); position: absolute !important; text-align: center; width: 100%; } } |
Dobijem sljedeće:
P.S. Više o ovome moguće je saznati u knjizi Ionic Cookbook -Third Edition.
