# 180: Drotárstvo s videom v mobilných zariadeniach Triky CSS

Anonim

Spravodlivé varovanie: Nie som žiadny odborník na tieto veci, iba sa hrám s videom na webe a riešim problémy, ktoré mám pri predvádzaní videoklipov v blogových príspevkoch.

V tomto videu mám simulátor iOS a do základného dokumentu HTML vkladám značku videa HTML pre rýchle video, ktoré som nahral pomocou Kap.

S videom je potrebné vziať do úvahy veľa vecí:

  1. Dať tomu kontrolu! Rovnako ako v . Všimnite si, že vo videu mi trvalo minútu, kým som si uvedomil, prečo sa video na mobile vôbec nezobrazilo, kým sa nezobrazilo.
  2. Inline prehrávanie videa , ktoré zabráni spusteniu celej obrazovky v mobile, keď ho prehráte.
  3. Jeho veľkosť je plynulá a s pomerom strán.
  4. Kde ho hostiť. Je váš webový server v poriadku? Malo by to byť na CDN? Mali by ste použiť mediálneho hostiteľa, ktorý sa špecializuje na podobné veci? Vo videu to vykreslím na Droplr, ktorý je vhodný, potom na CodePen Asset Hosting, ktorý je tiež užitočný, a nakoniec na Cloudinary, pretože dokáže robiť fantastické veci, ako je optimalizácia a manipulácia s formátom.
  5. Zaistite, aby video vyzeralo ako prekliate video. Na mobilný telefón, ak používate , to znamená, že plagát: . V opačnom prípade dostanete prázdne biele nič. Niekedy to stojí za to použiť nejakého pomocníka.

Video môžete samozrejme jednoducho nahrávať na YouTube alebo kdekoľvek inde a získate dobrú prácu s videom za nič. Ale YouTube nie je vždy vhodný pre malé ukážkové videá, s ktorými som sa tu stretol. Navyše sú ťažké, takže sa možno budete pozerať na ich lenivé načítanie.

Nakoniec sa pozrieme na studio.cloudinary.com. Môže robiť niekoľko úhľadných vecí, napríklad ponúkať prispôsobený prehrávač a streamovať adaptívny dátový tok, čo je fantazijné vymyslené a naozaj sa javí ako dôležitá vec pre najlepší možný výkon videa.