# 180: Knusing med video på mobil - CSS-triks

Anonim

Rettferdig advarsel: Jeg er ingen ekspert på disse tingene, jeg leker bare med video på nettet og tar opp noen problemer jeg har når jeg viser frem videoklipp i blogginnlegg.

Jeg har en iOS-simulator oppe i denne videoen, og jeg legger en HTML-videokode i et grunnleggende HTML-dokument for en rask video jeg har spilt inn med Kap.

Det er mange ting du bør vurdere med video:

  1. Å gi den kontroller! Som i ,. Merk i videoen det tok meg et øyeblikk å innse at det var grunnen til at videoen ikke dukket opp overalt på mobilen før den gjorde det.
  2. Spille av videoen innebygd, som hindrer den i å gå i fullskjerm på mobilen det øyeblikket du spiller den.
  3. Dimensjonering av den flytende og med sideforhold.
  4. Hvor du skal være vert for det. Er webserveren din bra? Bør det være på et CDN? Skal du bruke en medievert som spesialiserer seg på ting som dette? I videoen plukker jeg den på Droplr som er praktisk, deretter på CodePen Asset Hosting som også er praktisk, og til slutt på Cloudinary fordi det kan gjøre fancy ting som optimalisering og formathåndtering.
  5. Å sørge for at videoen ser ut som en jævla video. På mobil, hvis du bruker , betyr det at en plakat: . Ellers får du et tomt hvitt ingenting. Noen ganger er det alene verdt å bruke en slags hjelper.

Selvfølgelig kan du bare kaste video på YouTube eller hva som helst og få god videohåndtering for ingenting. Men YouTube er ikke alltid riktig for små, små demonstrasjonsvideoer som jeg hadde å gjøre med her. I tillegg er de tunge, så du kan se på lat å laste dem inn.

Til syvende og sist ser vi på studio.cloudinary.com. Det kan gjøre noen pene ting, som å tilby en tilpasset spiller og gjøre adaptiv bitrate streaming, som er fancy fancy og virkelig virker som en viktig ting for best mulig videoytelse.