Share
Vrei vreodată să îți creezi propria aplicație Twitch.tv pentru streaming în direct? Ce zici de propriul tău program YouTube pentru a reda videoclipul înregistrat anterior? S-ar fi putut folosi Flash, Java sau Silverlight pentru mass-media bogate în trecut, dar cu Chrome 42 anunțând că aceste plug-in-uri nu mai sunt acceptate, acum este la fel de bun pentru a merge HTML5 ca niciodată.
Înainte de a lucra la Microsoft, am fost senior inginer în echipa de dezvoltare a produselor de la Comcast, unde am lucrat la playere video pentru mai multe platforme, inclusiv pe web, Xbox One, Xbox 360 și SmartGlass. A fost o educație remarcabilă în tehnologia video de ultimă oră și mă bucur că pot să îmi iau experiența în acest rol și să-i învăț pe alții multe din ceea ce am învățat acolo.
Aceasta este prima dintr-o serie de articole despre utilizarea Azure Media Services pentru a crea și a consuma video HTML5. În acest tutorial, vă voi explica cum să utilizați această soluție media cloud pentru a vă înființa și pentru a începe să experimentați difuzarea videoclipurilor în direct sau la cerere.
Există o serie de formate pentru a alege de la, așa că haideți să trecem prin unele dintre cele pe care le puteți utiliza astăzi. În primul rând, ar trebui să înțelegem cum funcționează aburirea adaptivă, având în vedere că multe dintre aceste tehnologii care se află în viitor se bazează pe acest lucru.
Adaptive streaming segmente de video în bucăți mici. Partea "adaptivă" a acestui lucru este faptul că videoclipul este codificat la rate de biți multiple și rezoluții, creând bucăți de dimensiuni multiple. De acolo, jucătorul poate alege între rate de difuzare / rezoluții diferite și se adaptează automat bucăților mai mari sau mai mici, în condițiile schimbării condițiilor de rețea.
Scott Hanselman îl descrie (bine, Smooth Streaming cel puțin) bine.
"Trebuie să o vedeți pentru ao obține, dar este de fapt inteligentă în simplitatea sa. Unii oameni se sperie atunci când iau un fișier video de exemplu 200 meg și îl codifică pentru Smooth Streaming, iar directorul rezultat este, de exemplu, 500 megs. S-ar putea spune, este mai mare! Nu am o astfel de bandă! De fapt, mai puțin este trimis peste fir decât există pe disc. Ideea este că Smooth Streaming creează "pași" de bitrate. Codifică și stochează fișierele multiple pe fișier.
Sursa: Scott HanselmanDescărcările și cache-urile de pe computerul privitorului. O scurtă perioadă de timp este necesară pentru a tampona și a memora cache-ul de la începutul fișierului media înainte de a începe redarea. Odată ce videoclipul a fost stocat în cache, vizualizarea ulterioară nu necesită tamponare. Utilizând protocolul HTTP standard, fișierele descărcate progresiv sunt livrate, în general, printr-o rețea de distribuire a conținutului (CDN). Deci, playerul video creează o conexiune HTTP directă cu serverele (Azure) ale CDN pentru a prelua conținutul.
Pauza de a folosi ceva de genul asta este pierderea de bandă pierdută. Playerul va începe redarea video de îndată ce va avea suficiente date pentru a face acest lucru, dar va continua să se descarce până când va primi întregul fișier, indiferent de cât de mult văd utilizatorul. Ce se întâmplă când privitorul pleacă după un minut? Lățime de bandă pierdută.
În plus, acest lucru nu permite ca calitatea videoclipului să se schimbe la mijlocul descărcării, spre deosebire de formatele enumerate mai jos.
HTTP Live Streaming (HLS) este deținută de Apple și lucrările se bazează pe ideea de streaming adaptiv, de obicei făcut în bucăți de zece secunde. În plus, acesta acceptă atât video cât și video la cerere.
Acest lucru a fost anunțat în octombrie 2008, ca parte a programului Silverlight, și este o caracteristică a serviciului Media Services Services (IIS), o platformă integrată de distribuție media bazată pe HTTP.
Smooth Streaming are toate caracteristicile tipice de streaming adaptiv. Acest lucru este livrat pe HTTP, segmentat în bucăți mici și, de obicei, ratele de biți multiple sunt codificate astfel încât playerul să poată privi condițiile de rețea pentru a alege cea mai bună rată de biți video pentru a oferi o experiență optimă de vizionare.
Costurile scăzute ale infrastructurii bazate pe web, compatibilitatea cu firewall-ul și comutarea ratei de biți sunt doar câteva dintre avantajele fluxului adaptiv.
Marele diferențiator cu DASH este acela că este un standard internațional care este acum controlat de un organism de standardizare - Grupul de experți în filme (MPEG) - în loc să fie controlat de Microsoft (Smooth Streaming) sau de Apple (HLS). Mai multe companii au participat la eforturile de creare și standardizare în jurul MPEG DASH, inclusiv Microsoft, Apple, Netflix, Qualcomm, Ericsson, Samsung și multe altele.
Vedem ca MPEG-DASH este înlocuirea eventuală a tuturor caracteristicilor pe care le-am introdus și le-am implementat în ultimii ani cu Smooth Streaming. De-a lungul timpului vom scoate suportul DASH pentru a avea o paritate de caracteristică cu Smooth și vom introduce câteva funcții chiar mai reci, disponibile doar pentru noi într-un standard industrial precum DASH.
Eticheta video () a fost în HTML5 de mai mulți ani și toate browserele moderne îl susțin. Pagina școlilor W3C ilustrează utilizarea sa în termeni clari.
Iată cât de ușor este să o adăugați la pagina dvs.:
De fapt, probabil că folosiți acest lucru în fiecare zi. Netflix se bazează pe Silverlight ca player video, dar rulează acum pe video HTML5. YouTube a fugit anterior pe Flash, dar acum o mare parte din conținutul său este convertit în HTML5. Cunoașteți acele playere video pe care le vedeți pe Xbox One (YouTube, Xbox Video, Netflix etc.)? Da, toate acestea sunt și HTML5.
Este chiar mai ușor să testați video HTML5 în browsere, în special diferite versiuni ale Internet Explorer și noul Microsoft Edge. Pentru a face acest lucru, puteți obține mașini virtuale gratuite sau puteți testa de la distanță pe dispozitivele Mac, iOS, Android sau Windows.
Sunt mulți de ales. În acest tutorial, folosesc Azure Media Services Player, deoarece este unul bun pentru a începe, pentru a obține un sentiment pentru modul în care funcționează streaming media. Acesta include un număr de eșantioane video și un meniu simplu care vă permite să selectați diferitele formate și să vedeți nivelul tehnic și de protecție din spatele fiecăruia.
Oferă suport pentru o varietate de formate din cutie, incluzând:
Cel mai bun lucru este că nici măcar nu trebuie să creați propriul player sau pagină pentru a testa conținutul video. Schimbați simplu adresa URL în conținutul dvs. și opriți-vă.
De asemenea, puteți să vă uitați la framework-ul Video.js open-source. Acesta este similar cu player-ul Microsoft (de mai jos), dar oferă, de asemenea, o mulțime de opțiuni pentru a facilita stilul. Ei au și un excelent designer de piele. Dacă sunteți mai puțin familiarizat cu CSS avansat, cu toate acestea, m-aș fi dezamăgit de asta.
Există mai multe cadre ale jucătorilor pe care le putem folosi, dar, din simplitate, să folosim playerul HTML5 furnizat de Microsoft. Puteți găsi documentația aici. Există și un eșantion de lucru.
Iată câteva dintre avantajele folosirii acesteia:
„Tframeul HTML5 Player oferă o experiență video consistentă pentru browser. Acest lucru se realizează prin detectarea suportului pentru diferite tehnologii video player disponibile pe client (de exemplu, eticheta video HTML5, Silverlight etc.) și apoi furnizarea aceluiași JavaScript API și același set de controale indiferent de tehnologia utilizată. Se va repeta printr-o listă de tehnologii de rezervă pentru playere video până când nu se găsește o tehnologie acceptată.
Voi include mai multe informații despre acest lucru în următoarea mea postare.
În următorul post, vom acoperi procesul de creare a propriului player video în interiorul browserului. Chiar mai bine, putem "înfășura" acel site și player HTML5 și să creăm aplicații hibride pentru dispozitive mobile și Windows cu un instrument precum Cordova.
După aceea, vom crea un cont Azure și vom crea primul nostru conținut media, pe care îl vom putea reda pe noul player video creat. Dacă doriți să începeți imediat, vă puteți înscrie pentru o încercare gratuită Azure și comunitatea Visual Studio (acum un IDE gratuit) sau contactați-mă pentru informații despre cum să obțineți un cont BizSpark cu un credit gratuit Azure lunar.
Iată câteva resurse excelente pentru a afla mai multe în profunzime despre mass-media, despre Azure și despre cum se poate seta repede:
Sau seria mai largă de învățare a echipei noastre pe HTML, CSS și JS:
Acest articol face parte din seriile de tehnologie web dev din Microsoft. Suntem încântați să împărtășim Microsoft Edge și noul EdgeHTML motor de randare cu tine. Obțineți mașini virtuale gratuite sau testați de la distanță pe dispozitivele Mac, iOS, Android sau Windows @ http://dev.modern.ie/.
Accentsconagua