Share
Har du lyst til å lage din egen Twitch.tv-lignende app for live-streaming ditt arbeid? Hva med ditt eget YouTube-esque-program for å spille av din tidligere innspilte video? Du har kanskje brukt Flash, Java eller Silverlight for rike medier tidligere, men med Chrome 42 som kunngjør at disse plugin-modulene ikke lenger støttes, er det like god tid å gå HTML5 som noen gang.
Før jeg jobbet i Microsoft, var jeg Senior Engineer på Product Development teamet hos Comcast, hvor jeg jobbet på videospillere for en rekke plattformer, inkludert nettet, Xbox One, Xbox 360 og SmartGlass. Det var en enestående utdanning i cutting edge videoteknologi, og jeg er glad for at jeg kan ta min erfaring med meg i denne rollen og lære andre mye av det jeg lærte der.
Dette er den første av en serie artikler om bruk av Azure Media Services for å lage og konsumere HTML5-video. I denne veiledningen vil jeg forklare hvordan du bruker denne skymedieoppløsningen for å få satt opp og begynne å eksperimentere med å levere live eller på forespørsel video.
Det finnes en rekke formater å velge mellom, så la oss gå gjennom noen av de du kan bruke i dag. Først og fremst bør vi forstå hvordan adaptiv damping fungerer, vurderer mange av disse teknologiene som ligger foran, stole på dette.
Adaptive streaming segmenter video til små biter. Den "adaptive" delen av dette er det faktum at video er kodet ved flere bithastigheter og oppløsninger, og skaper biter av flere størrelser. Derfra kan spilleren velge mellom forskjellige bithastigheter / oppløsninger og tilpasse seg større eller mindre biter automatisk ettersom nettverksforholdene endres.
Scott Hanselman beskriver det (vel, jevn streaming i det minste) bra.
"Du snill må se det for å få det, men det er faktisk smart i sin enkelhet. Noen folk freak ut når de tar en, si, 200 meg videofil og kode den for jevn streaming og den resulterende katalogen er si 500 mega. De kan si, det er større! Jeg har ikke den slags båndbredde! Faktisk blir mindre sendt over ledningen enn det finnes på disken. Tanken er at Glatt Streaming skaper "trinn" av bithastigheter. Den koder og lagrer filens flere bithastigheter på disken.
Kilde: Scott HanselmanDette laster ned og caches video på betrakterens datamaskin. Det kreves en kort tidsperiode for å buffere og lagre starten på mediefilen før den begynner å spille. Når videoen er blitt cachet, krever etterfølgende visning ingen buffering. Ved hjelp av standard HTTP-protokollen leveres progressivt nedlastede filer vanligvis via et innholdsleveringsnettverk (CDN). Så spiller videospilleren en direkte HTTP-tilkobling med CDNs (Azure) servere for å hente innholdet.
Nedgangen til å bruke noe som dette er bortkastet båndbredde. Spilleren starter videoavspilling så snart den har nok data til å gjøre det, men det fortsetter å laste ned til det har mottatt hele filen, uansett hvor mye brukeren ser på. Hva skjer når betrakteren går etter ett minutt? Slitt båndbredde.
Videre tillater dette ikke at kvaliteten på videoen endres i midten av nedlastingen, i motsetning til formatene som er oppført nedenfor.
HTTP Live Streaming (HLS) eies av Apple, og arbeider er basert på ideen om adaptiv streaming, vanligvis gjort i ti sekunders biter. I tillegg støtter den både live og on demand video.
Dette ble annonsert i oktober 2008 som en del av Silverlight, og er en funksjon i Internet Services Services (IIS) Media Services, en integrert, HTTP-basert plattform for levering av media.
Glatt Streaming har alle de typiske egenskapene ved adaptiv streaming. Dette leveres over HTTP, segmentert i små biter, og vanligvis er flere bithastigheter kodet slik at spilleren kan se på nettverksforholdene dine for å velge den beste videobithastigheten for å gi en optimal seeropplevelse..
Lav nettbasert infrastrukturkostnader, brannmurkompatibilitet og bithastighetskobling er bare noen av fordelene med adaptiv streaming.
Den store differensiatoren med DASH er at det er en internasjonal standard som nå styres av en standardgruppe - Motion Picture Experts Group (MPEG) - i stedet for å bli kontrollert av Microsoft (Smooth Streaming) eller Apple (HLS). Flere selskaper deltok i etableringen og standardiseringsarbeidet rundt MPEG DASH, inkludert Microsoft, Apple, Netflix, Qualcomm, Ericsson, Samsung og mange flere.
Vi ser MPEG-DASH som den endelige erstatning for alle funksjonene som vi har introdusert og implementert i de siste årene med Glatt Streaming. Over tid vil vi komme ut DASH-støtte for å ha funksjonalitet med Glatt, og introdusere noen enda kjøligere funksjoner som bare er tilgjengelige for oss i en bransjestandard som DASH.
Videotaggen () har vært i HTML5 i flere år nå, og alle de moderne nettleserne støtter den. W3C-skolesiden illustrerer bruken i klare vilkår.
Her er hvor enkelt det er å legge det til på siden din:
Faktisk bruker du sannsynligvis dette hver dag. Netflix pleide å stole på Silverlight som sin videospiller, men kjører nå på HTML5-video. YouTube har tidligere kjørt på Flash, men nå blir mye av innholdet konvertert til HTML5. Du kjenner de videospillerne du ser på Xbox One (YouTube, Xbox Video, Netflix, etc.)? Ja, det er alle HTML5 også.
Det har til og med blitt mye lettere å teste HTML5-video på tvers av nettlesere, spesielt forskjellige versjoner av Internet Explorer og den nye Microsoft Edge. For å gjøre dette kan du få gratis virtuelle maskiner eller teste eksternt på din Mac, iOS, Android eller Windows-enhet.
Det er mange å velge mellom. I denne opplæringen bruker jeg Azure Media Services Player siden det er en god en til å begynne med, for å få en følelse av hvordan media streaming fungerer. Den inneholder en rekke prøvevideoer, og en enkel rullegardinmeny hvor du kan velge de forskjellige formatene og se teknologi- og beskyttelsesnivået bak hver av dem.
Den gir støtte til en rekke formater ut av boksen, inkludert:
Best av alt, du trenger ikke engang å lage din egen spiller eller side for å teste noe av videoinnholdet ditt ut. Enkelt endre URL-adressen til innholdet ditt, og av deg.
Du kan også se på open-source Video.js-rammen. Det ligner på Microsoft-spilleren (under), men tilbyr også en rekke alternativer for å gjøre det enkelt å stillegge. De har også en utmerket huddesigner. Hvis du er mindre kjent med avansert CSS, ville jeg imidlertid vike bort fra dette.
Det er flere spilleramler vi kan bruke, men for enkelhets skyld, la oss bruke HTML5-spilleren fra Microsoft. Du finner dokumentasjonen på den her. Det er også en arbeidsprøve.
Her er noen av fordelene ved å bruke den:
“THans HTML5 Player-rammeverk gir en konsekvent videoopplevelse for nettleseren. Dette oppnås ved å oppdage støtte for forskjellige videospillerteknologier som er tilgjengelige på klienten (for eksempel HTML5-videotag, Silverlight, etc.) og deretter gi samme JavaScript-API og det samme settet av kontroller uansett hvilken teknologi som brukes. Det vil gjenkjennes gjennom en liste over teknologier for tilbakebetaling av videospillere til en støttet teknologi er funnet.
Jeg vil inkludere mer informasjon om dette i mitt neste innlegg.
I mitt neste innlegg vil vi dekke prosessen for å lage din egen videospiller inne i nettleseren. Enda bedre kan vi "pakke" den HTML5-siden og spilleren og lage hybridprogrammer for mobile enheter og Windows med et verktøy som Cordova.
Deretter oppretter vi en Azure-konto og lager vårt første Media Services-innhold, som vi kan spille av på vår nyopprettede videospiller. Hvis du ønsker å komme i gang med en gang, kan du registrere deg for en gratis Azure-prøveversjon og Visual Studio Community (nå en gratis IDE også) eller komme deg til meg for informasjon om hvordan du skaffer en BizSpark-konto med gratis månedlig Azure-kreditt.
Her er noen gode ressurser for å lære mer om dybden på media, Azure, og hvordan du raskt får oppsett:
Eller vårt lags bredere læringsserie på HTML, CSS og JS:
Denne artikkelen er en del av web dev-teknologiserien fra Microsoft. Vi er glade for å dele Microsoft Edge og den nye EdgeHTML rendering motor med deg. Få gratis virtuelle maskiner eller test eksternt på Mac, IOS, Android eller Windows-enheten @ http://dev.modern.ie/.
Accentsconagua