Flutter SK/CZ – #1.12 – VIDEO prehrávač | Chewie
Úvod
Vitajte v Himdeve development, kde pre Vás pripravujeme tie najlepšie tutoriály, ktoré Vám uľahčia a zefektívnia vývoj mobilných aplikácií.
Cieľ
- Vytvoríme video prehrávač na prehrávanie našich tutoriálov.
- Použijeme knižnicu Chewie, ktorá zabaluje video prehrávač do dizajnu optimalizovaného pre Android ako aj iOS.
- Ukážeme si ako prehrávať videá z internetu ako aj priamo z úložiska aplikácie.
- Ukážeme si taktiež prehrávanie videa z externého úložiska telefónu za použitia FilePicker knižnice na výber súborov
- Spojíme spustenie videa s Hero animáciou a prechodom stránky.
Postup
Najskôr otvoríme našu existujúcu aplikáciu z predchádzajúceho tutoriálu a otvoríme portfolio_tutorials_sub_page.dart súbor. Toto bude náš vstupný súbor pre tento tutoriál.
Zmeníme Tuple2 triedu na Tuple3 triedu a za tretiu položku pridáme url adresu k videu tutoriálu.
Takisto zmeníme Tuple2 triedu na Tuple3 v metóde _buildListItem. A pridáme nový parameter – videoUrl, do metódy _buildRippleEffectNavigation.
Prejdeme teraz do PortfolioTutorialDetailPage triedy a zmením imageUrl parameter na videoUrl.
Stateful Widget
Následne zmeníme Stateless Widget na Stateful Widget. Je to z dôvodu, aby sme mohli uvolnit video prehravac v dispose metóde pri odstraneni daneho widgetu.
iOS Nastavenia
Našim cieľom je prehrávať video tutoriály uložené na nejakom serveri. Z tohto dôvodu musíme mať povolenie načítavať sieťové dáta. Pri vytvoreni projektu pomocou príkazu flutter create sa dané povolenia automaticky vytvoria pre Android. Avšak pre iOS je nutné ich dodefinovať osobitne. Keďže ale sme si v prvom diele tejto série tutoriálov už ukázali ako toto nastavenie implementovať, tak už si len môžeme ukázať miesto, kde sa daný kód nachádza.
Je to v priečinku ios -> Runner -> Info.plist.
Video Player
Plugin video_player, ktorý je vo flutteri v natívnej podpore, poskytuje prístup k prehrávaniu videa na low-level úrovni.
Pre iOS video_player plugin používa na prehrávanie videí AVPlayer. A pre Android používa ExoPlayer.
Pomocou video_player pluginu je možné prehrávať videá uložené na sieti, v aplikácií ako aj priamo v pamäti telefónu.
Chewie
video_player plugin samozrejme obsahuje funkcionalitu pomocou ktorej môžeme vytvoriť vlastný UI dizajn tlačítok na prehrávanie a správu videa, ktorý môžeme špecifikovať zvlásť pre Android a zvlášť pre iOS. To znamená, že Material dizajn ako aj Cupertino dizajn.
Avšak existuje knižnica, ktorá sa volá Chewie a tá zabaluje video_player plugin do user-friendly rozhrania automaticky pre Material ako aj Cupertino dizajn.
Preto danú knižnicu použijeme v našom projekte.
Pubspec.yaml
Do Pubspec.yaml súboru zadefinujeme následovné knižnice:
ChewieController
V súbore portfolio_tutorial_detail_page.dart pre triedu _PortfolioTutorialDetailPageState zadefinujeme ChewieController.
Následne vytvoríme initState metódu, kde inicializujeme ChewieController. ChewieController má niekoľko atribútov, kde najhlavnejším je:
videoPlayerController
Objekt videoPlayerControllera získaného pomocou VideoPlayerController.network konštrutktora, ktorý má url adresu k videu ako parameter, nastavíme do ChewieController atribútu videoPlayerController.
aspectRatio
AspectRatio predstavuje pomer šírky a výšky videa. V našom prípade nastavíme hodnotu na 16 : 9.
autoInitialize
Inicializujte video pri spustení. Týmto sa video pripraví na prehrávanie. Čo znamená, že sa načíta a zobrazí prvý frame videa.
autoPlay
Tento atribút umožní automaticky prehrávať video v momente ako je zobrazené.
looping
Umožnuje prehrávať video stále dookola.
errorBuilder
Umožňuje zobraziť vlastnú chybovú hlášku používateľovi, keď nastane chyba video prehrávania. Momentálne zobrazíme túto hlášku do stredu video prehrávača.
A mnoho ďalších atribútov.
Chewie widget
Upravíme teraz _buildHeroWidgetContent metódu a namiesto CachedNetworkImage tu vrátime Chewie widget, ktorému nastavíme povinný atribút controller.
Dispose
Ako už bolo spomenuté na začiatku, pri zrušení tohto widgetu je potrebné uvoľniť všetky použité zdroje, čiže VideoPlayerController ako aj ChewieController. Môžeme tak urobiť práve v dispose metóde daného widgetu.
HERO
Aby bolo možné vidieť obrázok videa a nie video samotné počas letu Hero widgetu, tak upravíme súbor hero_widget.dart. V prípade, že by ste sa chceli naučiť viac o Hero animácií, môžete si pozrieť predchádzajúci tutoriál.
V build metóde pre Hero, upravíme atribút flightShuttleBuilder.
V prípade, že Hero letí z prvej obrazovky na detail, tak zobrazíme widget získaný pomocou parametra fromContext. V našom prípade to bude obrázok tutoriálu.
V opačnom prípade, keď letí Hero z detailu naspäť na prvú obrazovku, tak použijeme widget získaný pomocou parametra toContext aby sme namiesto videa zobrazili znovu obrázok z prvej obrazovky.
A následne tento letiaci widget nastavíme do child atribútu pre RotationTransition.
Video načítavané z úložiska aplikácie (z asset priečinku)
V prípade, že by sme nechceli načítavať video z internetu, môžeme načítať video priamo z úložiska aplikácie.
V priečinku assets vytvoríme nový priečinok videos a sem môžeme vložiť dané video. V našom prípade sem vložíme video súbor himdeveIntro.mp4.
A do pubspec.yaml súboru nastavíme cestu k danému súboru -> assets/videos/himdeveIntro.mp4
A následne pri vytváraní ChewieControllera, môžeme do atribútu videoPlayerController vložíť konštruktor VideoPlayerController.asset s cestou k danému assetu.
Načítavanie videa z úložiska telefónu
Pri vytváraní ChewieControllera v portfolio_tutorial_detail_page.dart súbore, do atribútu videoPlayerController vložíme VideoPlayerController.file konštruktor s parametrom video súboru. Video súbor parameter získame pomocou konštruktora triedy File s cestou k želateľnému súboru.
FilePicker
Na to aby sme mohli definovať a použiť externý súbor potrebujeme určité povolenia pre aplikáciu. V tomto tutoriále však využijeme knižnicu FilePicker, ktorá umožní užívateľovi vybrať súbor z externého úložiska a zároveň vyžiada potrebné povolenia.
Prejdeme do pubspec.yaml súboru a zadefinujem knižnicu FilePicker.
Následne v portfolio_tutorials_sub_page.dart súbore v metóde _buildRippleEffectNavigation upravíme onTap atribút InkWell widgetu.
Zavoláme FilePicker konštruktor FilePicker.getFile, ktorému nastavíme atribút type na video. Čiže užívateľ si bude môcť vybrať len video súbor. Znovu použijeme async-await mechanizmus obdobne ako v predchádzajúcich tutoriáloch tejto série. A cestu zvolenému súboru získame pomocou volania .path na daný objekt súboru – File. Túto cestu následne vložíme ako hodnotu pre atribút videoUrl použitý na vytvorenie a následne zobrazenie detailu stránky PortfolioTutorialDetailPage.
Záver
A tým je naša dvanásta časť tejto prvej série Flutter SK/CZ Tutoriálov ukončená a kompletný zdrojový kód môžete samozrejme nájsť na githube.