Flutter SK/CZ – #1.12 – Video prehrávač | Chewie

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ľ

  1. Vytvoríme video prehrávač na prehrávanie našich tutoriálov.
  2. Použijeme knižnicu Chewie, ktorá zabaluje video prehrávač do dizajnu optimalizovaného pre Android ako aj iOS.
  3. Ukážeme si ako prehrávať videá z internetu ako aj priamo z úložiska aplikácie.
  4. 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
  5. 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.

Copy to Clipboard

Takisto zmeníme Tuple2 triedu na Tuple3 v metóde _buildListItem. A pridáme nový parameter – videoUrl, do metódy _buildRippleEffectNavigation.

Copy to Clipboard

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.

Copy to Clipboard

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:

Copy to Clipboard

ChewieController

V súbore portfolio_tutorial_detail_page.dart pre triedu _PortfolioTutorialDetailPageState zadefinujeme ChewieController.

Copy to Clipboard

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.

Copy to Clipboard

aspectRatio

AspectRatio predstavuje pomer šírky a výšky videa. V našom prípade nastavíme hodnotu na 16 : 9.

Copy to Clipboard

autoInitialize

Inicializujte video pri spustení. Týmto sa video pripraví na prehrávanie. Čo znamená, že sa načíta a zobrazí prvý frame videa.

Copy to Clipboard

autoPlay

Tento atribút umožní automaticky prehrávať video v momente ako je zobrazené.

Copy to Clipboard

looping

Umožnuje prehrávať video stále dookola.

Copy to Clipboard

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.

Copy to Clipboard

A mnoho ďalších atribútov.

Copy to Clipboard

Chewie widget

Upravíme teraz _buildHeroWidgetContent metódu a namiesto CachedNetworkImage tu vrátime Chewie widget, ktorému nastavíme povinný atribút controller.

Copy to Clipboard

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.

Copy to Clipboard

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.

Copy to Clipboard

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.

Copy to Clipboard

A následne tento letiaci widget nastavíme do child atribútu pre RotationTransition.

Copy to Clipboard

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

Copy to Clipboard

A následne pri vytváraní ChewieControllera, môžeme do atribútu videoPlayerController vložíť konštruktor VideoPlayerController.asset s cestou k danému assetu.

Copy to Clipboard

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.

Copy to Clipboard

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.

Copy to Clipboard

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.

Copy to Clipboard

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.

Our Himdeve developoment's website uses cookies.