Redare video pe web: Cele mai bune practici de livrare video (Partea a 2-a)
Publicat: 2022-03-10În postarea mea anterioară, am examinat tendințele video de pe web astăzi, folosind date din Arhiva HTTP. Am descoperit că multe site-uri web oferă același conținut video pe dispozitive mobile și desktop și că multe fluxuri video sunt livrate la rate de biți prea mari pentru a fi redate pe conexiuni de viteză 3G. De asemenea, am descoperit că site-urile web pot descărca automat videoclipuri pe dispozitivele mobile - dăunând planurilor de date ale clienților, durata de viață a bateriei, pentru videoclipuri care ar putea să nu fie redate niciodată.
TL;DR : În această postare, analizăm tehnici pentru a optimiza viteza și livrarea videoclipurilor către clienții dvs. și oferim o listă cu 9 cele mai bune practici pentru a vă ajuta să vă livrați materialele video.
Valori de redare video
Există trei valori principale de redare a videoclipurilor utilizate astăzi:
- Timp de pornire video
- Stalare video
- Calitate video
Deoarece fișierele video sunt mari, optimizarea videoclipului pentru a fi cât mai mic posibil va duce la o livrare mai rapidă a videoclipului, la accelerarea pornirii videoclipului, la scăderea numărului de blocaje și la minimizarea efectului calității videoclipului livrat. Desigur, trebuie să echilibrăm viteza de pornire și blocarea cu a treia măsurătoare de calitate (și videoclipurile de calitate superioară folosesc în general mai multe date).
Pornire video
Când un utilizator apasă pe redare pe un videoclip, se așteaptă să poată viziona rapid videoclipul. Potrivit Conviva (un lider în analiza metricelor video), în primul trimestru al anului 2018, 14% dintre videoclipuri nu au început niciodată să fie redate (adică 2,4 miliarde de redări video) după ce utilizatorul a apăsat pe redare.
2,3% dintre videoclipuri (400 de milioane de solicitări video) nu au putut fi redate după ce utilizatorul a apăsat butonul de redare. 11,54% (2B redări) au fost abandonate de utilizator după ce a apăsat pe play. Să încercăm să defalcăm ceea ce ar putea cauza aceste probleme.
Eșec de redare video
Eșecul redării video a reprezentat 2,3% din toate redările video. Ce ar putea duce la asta? În datele arhivei HTTP, vedem 0,3% din toate solicitările video care au ca rezultat un răspuns HTTP 4xx sau 5xx - așa că un anumit procent nu reușește adrese URL greșite sau configurări greșite ale serverului. O altă problemă potențială (care nu este observată în datele arhivei HTTP) sunt videoclipurile care sunt blocate de geolocalizare (blocate în funcție de locația spectatorului și de licența furnizorului de a afișa videoclipul în acea localitate).
Abandonarea redării video
Raportul Conviva afirmă că 11,5% din toate redările video ar fi redate, dar clientul a abandonat redarea înainte ca videoclipul să înceapă redarea. Problema aici este că videoclipul nu este livrat clientului suficient de repede, iar aceștia renunță. Există multe studii pe web mobil în care întârzierile mari determină abandonarea paginilor web și se pare că același efect apare și în cazul redării video.
Cercetările de la Akamai arată că spectatorii vor aștepta 2 secunde, dar pentru fiecare secundă ulterioară, 5,8% dintre spectatori abandonează videoclipul.
Deci, ce duce la probleme de redare video? În general, descărcarea fișierelor mai mari durează mai mult, așa că va întârzia redarea. Să ne uităm la câteva moduri prin care se poate accelera redarea videoclipurilor. Pentru a reduce numărul de videoclipuri abandonate la pornire, ar trebui să „slăbim” aceste fișiere cât mai bine posibil, astfel încât să se descarce (și să înceapă redarea) rapid.
MP4: Preîncărcare video
Pentru a asigura o redare rapidă pe web, o opțiune este să preîncărcați videoclipul pe dispozitiv în avans. În acest fel, atunci când clientul dvs. face clic pe „redare”, videoclipul este deja descărcat și redarea va fi rapidă. HTML oferă un atribut de preîncărcare cu 3 opțiuni posibile: auto
, metadata
și none
.
preload = auto
Când videoclipul dvs. este livrat cu preload="auto"
, browserul descarcă întregul fișier video și îl stochează local. Acest lucru permite o îmbunătățire mare a performanței la pornirea video, deoarece videoclipul este disponibil local pe dispozitiv și nicio interferență în rețea nu va încetini pornirea.
Cu toate acestea, preload="auto"
ar trebui utilizat numai dacă există o mare probabilitate ca videoclipul să fie vizionat. Dacă videoclipul este pur și simplu rezident pe pagina dvs. web și este descărcat de fiecare dată, acest lucru va adăuga o penalizare mare de date pentru utilizatorii dvs. de telefonie mobilă și va crește costurile serverului/CDN pentru livrarea întregului videoclip tuturor utilizatorilor dvs.
Acest site web are o secțiune intitulată „Galerie video” cu mai multe videoclipuri. Fiecare videoclip din această secțiune are preîncărcarea setată la auto
și putem vizualiza descărcarea lor în cascada WebPageTest sub formă de linii orizontale verzi:
Există o secțiune numită „Galerie video”, iar fișierele pentru această mică secțiune a site-ului reprezintă 14,6 milioane (83%) din descărcarea paginii. Șansele ca unul (din multe) videoclipuri să fie redat este probabil destul de scăzută, așa că utilizarea preload="auto"
generează doar mult trafic de date pentru site.
În acest caz, este puțin probabil ca chiar și unul dintre aceste videoclipuri să fie vizionat, totuși toate sunt descărcate complet, adăugând 14,8MB de conținut pe site-ul mobil (83% din conținutul paginii). Pentru videoclipurile care au o probabilitate mare de redare (poate că >90% din vizualizările de pagină au ca rezultat redarea videoclipului) — preîncărcarea întregului videoclip este o idee foarte bună. Dar pentru videoclipurile care este puțin probabil să fie redate, preload="auto"
va cauza doar un tonaj suplimentar de conținut prin serverele dvs. și pe dispozitivele mobile (și desktop) ale clientului dvs.
preload="metadata"
Când este utilizat atributul preload="metadata"
, se descarcă un segment inițial al videoclipului. Acest lucru permite jucătorului să cunoască dimensiunea ferestrei video și, probabil, să aibă o secundă sau două de videoclipuri descărcate pentru redare imediată. Browserul face pur și simplu o 206 (solicitare parțială) a conținutului video. Prin stocarea unui pic de date video pe dispozitiv, timpul de pornire video este redus, fără un impact mare asupra cantității de date transferate.
Pe Chrome, metadatele sunt opțiunea implicită dacă nu este ales niciun atribut.
Notă : Acest lucru poate duce în continuare la descărcarea unei cantități mari de videoclipuri, dacă videoclipul este mare.
De exemplu, pe un site web mobil cu un videoclip setat la preload="metadata"
, vedem o singură solicitare pentru videoclip:
Și cererea este o descărcare parțială, dar rezultă în continuare 2,7 MB de videoclip de descărcat, deoarece videoclipul complet are 1080p, 150 de secunde și 97 MB (vom vorbi despre optimizarea dimensiunii videoclipului în secțiunile următoare).
Așadar, aș recomanda ca preload="metadata"
să fie folosit în continuare numai atunci când există o probabilitate destul de mare ca videoclipul să fie vizionat de utilizatorii dvs. sau dacă videoclipul este mic.
preload="none"
Cea mai economică opțiune de descărcare pentru videoclipuri, deoarece nu sunt descărcate fișiere video atunci când pagina este încărcată. Acest lucru va adăuga potențial o întârziere în redare, dar va avea ca rezultat o încărcare inițială mai rapidă a paginii. Pentru site-urile cu multe videoclipuri pe o singură pagină, ar putea fi logic să adăugați un poster în fereastra video și să nu descărcați niciun videoclip până nu este solicitate expres de utilizatorul final. Toate videoclipurile YouTube care sunt încorporate pe site-uri web nu descarcă niciodată conținut video până când butonul de redare nu este apăsat, în esență comportându-se ca și cum ar fi preload="none"
.
Cele mai bune practici de preîncărcare : utilizați preload="auto"
numai dacă există o probabilitate mare ca videoclipul să fie vizionat. În general, utilizarea preload="metadata"
oferă un echilibru bun între utilizarea datelor și timpul de pornire, dar ar trebui monitorizată pentru utilizarea excesivă a datelor.
Sfaturi pentru redarea video MP4
Acum că videoclipul a început, cum ne putem asigura că redarea video poate fi optimizată pentru a nu bloca și continua redarea. Din nou, trucul este să vă asigurați că videoclipul este cât mai mic posibil.
Să ne uităm la câteva trucuri pentru a optimiza dimensiunea descărcărilor video. Există mai multe dimensiuni ale videoclipului care pot fi optimizate pentru a reduce dimensiunea videoclipului:
Audio
Fișierele video sunt împărțite în diferite „fluxuri” – cel mai comun fiind fluxul video. Al doilea flux cel mai frecvent este pista audio care se sincronizează cu videoclipul. În unele aplicații de redare video, fluxul audio este livrat separat; acest lucru permite ca diferite limbi să fie livrate într-o manieră fără întreruperi.
Dacă videoclipul dvs. este redat într-un mod silențios (cum ar fi un GIF în buclă sau un videoclip de fundal), eliminarea fluxului audio din videoclip este o modalitate rapidă și ușoară de a reduce dimensiunea fișierului. Într-un exemplu de videoclip de fundal, fișierul complet avea 5,3 MB, dar piesa audio (care nu se aude niciodată) era de aproape 300 KB (5% din fișier). Prin simpla eliminare a sunetului, fișierul va fi livrat rapid, fără a se pierde octeți.
42% dintre fișierele MP4 găsite în arhiva HTTP nu au flux audio.
Cea mai bună practică : eliminați piesele audio din videoclipurile care sunt redate în tăcere.
Codificare video
La codificarea unui videoclip, există opțiuni pentru a reduce calitatea video (număr de pixeli pe cadru sau cadre pe secundă). Reducerea unui videoclip de înaltă calitate pentru a fi potrivit pentru web este ușor de făcut și, în general, nu afectează calitatea oferită utilizatorilor finali. Acest articol nu este suficient de lung pentru o discuție aprofundată a tuturor tehnicilor de compresie disponibile pentru video. În codificatoarele x264
și x265
, există un termen numit actor de viteză constantă ( CRF). Folosirea unui CRF de 23-28 va oferi, în general, un compromis bun compresie/calitate și este un prim început excelent în domeniul compresiei video.
Dimensiunea videoclipului
Dimensiunea videoclipului poate fi afectată de mai multe dimensiuni: lungime, lățime și înălțime (probabil ați putea include și audio aici).
Durata videoclipului
Lungimea videoclipului nu este, în general, o caracteristică pe care un dezvoltator web o poate ajusta. Dacă videoclipul va fi redat timp de trei minute, acesta va fi redat timp de trei minute. În cazurile în care videoclipul este excepțional de lung, instrumente precum preload="none"
sau streamingul video pot permite descărcarea inițială a unei cantități mai mici de date pentru a reduce timpul de încărcare a paginii.
Dimensiuni video
18% din toate videoclipurile găsite în arhiva HTTP sunt identice pe dispozitive mobile și desktop. Cei care au lucrat cu design web receptiv știu cum optimizarea imaginilor pentru diferite ferestre de vizualizare poate reduce drastic timpul de încărcare, deoarece dimensiunea imaginilor este mult mai mică pentru ecranele mai mici.
Același lucru este valabil și pentru video. Un site web cu un videoclip de fundal de 30 MB 2560×1226 va avea greu să descarce videoclipul pe mobil (probabil și pe desktop!). Redimensionarea videoclipului scade drastic dimensiunea fișierelor și poate chiar permite difuzarea a trei sau patru videoclipuri de fundal diferite:
Lăţime | Video (MB) |
---|---|
1226 | 30 |
1080 | 8.1 |
720 | 43 |
608 | 3.3 |
405 | 1,76 |
Acum, din păcate, browserele nu acceptă interogări media pentru videoclipuri în HTML, ceea ce înseamnă că acest lucru pur și simplu nu funcționează:
<video preload="auto" autoplay muted controls source src="large.mp4" </video>
Prin urmare, va trebui să creăm un mic wrapper JS pentru a livra videoclipurile pe care le dorim la diferite dimensiuni de ecran. Dar înainte să mergem acolo...
Descărcarea videoclipului, dar ascunderea acestuia de vizionare
O altă întoarcere la web responsive timpurie este să descărcați imagini la dimensiunea completă, dar să le ascundeți pe dispozitivele mobile. Clienții dvs. primesc toată întârzierea pentru descărcarea imaginilor mari (și accesează planul de date mobile și consumul suplimentar de baterie etc.) și nu beneficiază de niciun beneficiu de a vedea imaginea. Acest lucru se întâmplă destul de frecvent cu videoclipurile de pe mobil. Deci, pe măsură ce ne scriem scenariul, ne putem asigura că ecranele mai mici nu solicită niciodată videoclipul care nu va apărea în primul rând.
Videoclipuri de calitate Retina
Este posibil să aveți videoclipuri diferite pentru diferite densități de ecran ale dispozitivului. Acest lucru poate duce la un timp suplimentar pentru descărcarea videoclipurilor pentru clienții dvs. de telefonie mobilă. Este posibil să doriți să împiedicați videoclipurile retină pe dispozitive cu ecran mai mic sau pe dispozitive cu o lățime de bandă limitată a rețelei, ca urmare a revenirii la videoclipuri de calitate standard pentru aceste dispozitive. Instrumente precum Network Information API vă pot oferi debitul rețelei și vă pot ajuta să decideți ce calitate video doriți să oferiți clientului dvs.
Descărcarea diferitelor tipuri de videoclipuri în funcție de dimensiunea dispozitivului și de calitatea rețelei
Tocmai am acoperit câteva moduri de a optimiza difuzarea filmelor pe ecrane mai mici și am remarcat, de asemenea, incapacitatea etichetei video de a alege între tipurile de videoclipuri, așa că iată un fragment JS rapid care va folosi lățimea ecranului pentru:
- Nu difuzați videoclipuri pe ecrane sub 500px;
- Livrați videoclipuri mici pentru ecrane 500-1400;
- Oferiți un videoclip de dimensiune mai mare tuturor celorlalte dispozitive.
<html><body> <div> </div> <div></div> <script> //get screen width and pixel ratio var width = screen.width; var dpr = window.devicePixelRatio; //initialise 2 videos — //“small” is 960 pixels wide (2.6 MB), large is 1920 pixels wide (10 MB) var smallVideo="https://res.cloudinary.com/dougsillars/video/upload/w_960/v1534228645/30s4kbbb_oblsgc.mp4"; var bigVideo = "https://res.cloudinary.com/dougsillars/video/upload/w_1920/v1534228645/30s4kbbb_oblsgc.mp4"; //TODO add logic on adding retina videos if (width<500){ console.log("this is a very small screen, no video will be requested"); } else if (width< 1400){ console.log("let's call this mobile sized"); var videoTag = "\<video preload=\"auto\" width=\"100%\" autoplay muted controls src=\"" +smallVideo +"\"/\>"; console.log(videoTag); document.getElementById('video').innerHTML = videoTag; document.getElementById('text').innerHTML = "This is a small video."; } else{ var videoTag = "\<video preload=\"auto\" width=\"100%\" autoplay muted controls src=\"" +bigVideo +"\"/\>"; document.getElementById('video').innerHTML = videoTag; document.getElementById('text').innerHTML = "This is a big video."; } </script> </html></body>
Acest script împarte ecranele utilizatorului în trei opțiuni:
- Sub 500 de pixeli, nu este afișat niciun videoclip.
- Între 500 și 1400, avem un videoclip mai mic.
- Pentru ecrane late mai mari de 1400 pixeli, avem un videoclip mai mare.
Pagina noastră are un videoclip responsive cu două dimensiuni diferite: una pentru mobil și alta pentru ecrane de dimensiuni desktop. Utilizatorii de telefonie mobilă obțin o calitate video excelentă, dar fișierul are doar 2,6 MB, în comparație cu videoclipul de 10 MB pentru desktop.
GIF-uri animate
GIF-urile animate sunt fișiere mari. În timp ce atât aGIF-urile, cât și fișierele video comprimă datele prin dimensiunile de lățime și înălțime, numai fișierele video au compresie (pe axa temporală adesea mai mare). aGIF-urile sunt, în esență, „răsfoiește” rapid imagini GIF statice. Această lipsă de compresie adaugă o cantitate semnificativă de date. Din fericire, este posibil să înlocuiți aGIF-urile cu un videoclip în buclă, economisind potențial MB de date pentru fiecare solicitare.
<video loop autoplay muted playsinline src="pseudoGif.mp4">
În Safari, există o abordare și mai sofisticată: puteți plasa un mp4 în buclă în eticheta de imagine, astfel:
<picture> <source type="video/mp4" loop autoplay> <source type="image/webp"> <src="animated.gif"> </picture>
În acest caz, Safari va reda GIF-ul animat, în timp ce Chrome (și alte browsere care acceptă WebP) va reda WebP-ul animat, cu o alternativă la GIF-ul animat. Puteți citi mai multe despre această abordare în marea postare a lui Colin Bendell.
Videoclipuri de la terți
Una dintre cele mai ușoare modalități de a adăuga videoclipuri pe site-ul dvs. este să copiați/lipiți pur și simplu codul dintr-un serviciu de partajare video și să îl puneți pe site-ul dvs. Cu toate acestea, la fel ca adăugarea oricărei terțe părți pe site-ul dvs., trebuie să fiți vigilenți cu privire la tipul de conținut care este adăugat în pagina dvs. și la modul în care acesta va afecta încărcarea paginii. Multe dintre aceste widget-uri „pur și simplu inserați acest lucru în HTML” adaugă 100 de KB de JavaScript. Alții vor descărca întregul film (gândiți-vă la preload="auto"
), iar unii le vor face pe amândouă.
Cea mai bună practică video de la terți : aveți încredere, dar verificați. Examinați cât de mult conținut este adăugat și cât de mult afectează timpul de încărcare a paginii dvs. De asemenea, comportamentul s-ar putea schimba, așa că urmăriți-vă în mod regulat analizele.
Pornire de streaming
Când este solicitat un flux video, serverul furnizează un fișier manifest playerului, listând fiecare flux disponibil (cu informații despre dimensiuni și bitrate). În fluxul HLS, jucătorul alege în general primul flux din listă pentru a începe redarea. Prin urmare, fluxul poziționat primul în fișierul manifest ar trebui să fie optimizat pentru pornirea video atât pe mobil, cât și pe desktop (sau poate că fișierele manifest alternative ar trebui să fie livrate pe mobil vs. desktop).
În cele mai multe cazuri, pornirea este optimizată prin utilizarea unui flux de calitate inferioară pentru a începe redarea. Odată ce jucătorul descarcă câteva segmente, are o idee mai bună despre debitul disponibil și poate selecta un flux de calitate superioară pentru segmentele ulterioare. În calitate de utilizator, probabil că ați văzut acest lucru - unde primele secunde ale unui videoclip arată foarte pixelate, dar după câteva secunde de redare videoclipul se ascuți.
Examinând 1.065 de fișiere manifest livrate către dispozitive mobile din Arhiva HTTP, constatăm că 59% dintre videoclipuri au o rată de biți inițială sub 1,2 MBPS - și este probabil să înceapă transmiterea în flux fără prea multă întârziere la rate de date 3G de 1,6 MBPS. 11% folosesc o rată de biți între 1,2 și 1,6 MBPS - ceea ce poate încetini pornirea pe 3G, iar 30% au o rată de biți de peste 1,6 MBPS - și nu pot reda la această rată de biți pe o conexiune 3G. Pe baza acestor date, se pare că ~41% din toate videoclipurile nu vor putea susține rata de biți inițială pe mobil - adăugând întârziere la pornire și, posibil, creșterea numărului de blocări în timpul redării.
Cele mai bune practici de pornire în flux : asigurați-vă că rata de biți inițială din fișierul manifest este una care va funcționa pentru majoritatea clienților dvs. Dacă playerul trebuie să schimbe fluxurile în timpul pornirii, redarea va fi amânată și veți pierde vizionările video.
Deci, ce se întâmplă atunci când rata de biți a videoclipului este aproape (sau peste) debitul disponibil? După câteva secunde de descărcare fără un segment video finalizat, pregătit pentru redare, playerul oprește descărcarea și alege un videoclip cu o rată de biți de calitate mai scăzută și începe din nou procesul. Acțiunea de descărcare a unui segment video și apoi de abandonare duce la o întârziere suplimentară la pornire, ceea ce va duce la abandonarea videoclipului.
Putem vizualiza acest lucru prin construirea de manifeste video cu rate de biți inițiale diferite. Testăm 3 scenarii diferite: începând cu cel mai mic (215 KBPS), mediu (600 KBPS) și cel mai mare bitrate (2,6 MBPS).
Când începe cu cea mai scăzută calitate video, redarea începe la 11s. După câteva secunde, jucătorul începe să solicite un flux de calitate superioară, iar imaginea se clarifică.
Când începe cu cea mai mare rată de biți (testarea pe o conexiune 3G la 1,6 MBPS), playerul realizează rapid că redarea nu poate avea loc și trece la cel mai mic bitrate video (215 KBPS). Redarea videoclipului începe la 17 secunde. Există o întârziere de 6 secunde, iar calitatea video este aceeași calitate scăzută oferită la primul test.
Folosirea videoclipului de calitate medie permite un pic de compromis, videoclipul începe să fie redat cu 13 secunde (cu 2 secunde mai lent), dar este de înaltă calitate de la început și nu există nicio trecere de la video pixelat la video de calitate superioară.
Cele mai bune practici pentru pornirea videoclipurilor : pentru redarea cea mai rapidă, începeți cu fluxul de cea mai slabă calitate. Pentru videoclipuri mai lungi, ați putea lua în considerare utilizarea unui flux de „calitate medie” la început pentru a oferi videoclipuri clare la pornire (cu o întârziere puțin mai mare).
Rezultate WebPageTest: fluxul video inițial este scăzut, mediu și ridicat (de sus în jos). Videoclipul începe cel mai rapid cu cea mai slabă calitate video. Este important să rețineți că videoclipul de înaltă calitate de pornire la 17 s este de aceeași calitate ca și cel de pornire de calitate scăzută la 11 s.
Streaming: Redare continuă
Când playerul video poate determina fluxul video optim pentru redare și fluxul este mai mic decât viteza de rețea disponibilă, videoclipul va fi redat fără probleme. Există trucuri care vă pot ajuta să vă asigurați că videoclipul se va difuza într-o manieră optimă. Dacă examinăm următoarea înregistrare în manifest:
#EXT-X-STREAM-INF:BANDWIDTH=912912,PROGRAM-ID=1,CODECS="avc1.42c01e,mp4a.40.2",RESOLUTION=640x360,SUBTITLES="subs" video/600k.m3u8
Linia de informații raportează că acest flux are o rată de biți de 913 KBPS și o rezoluție de 640×360. Dacă ne uităm la adresa URL către care indică această linie, vedem că face referire la un videoclip de 600k. Examinarea fișierelor video arată că videoclipul are 600 KBPS, iar manifestul exagerează rata de biți.
Exagerarea ratei de biți video
- PRO
Supraestimarea ratei de biți va asigura că atunci când jucătorul alege un flux, videoclipul se va descărca mai repede decât se aștepta, iar tamponul se va umple mai repede decât se aștepta, reducând posibilitatea unei blocări. - CON
Prin supraestimarea ratei de biți, videoclipul livrat va fi un flux de calitate inferioară. Dacă ne uităm la întreaga listă a ratelor de biți raportate față de cele reale:
Raportat (KBS) | Real | Rezoluţie |
---|---|---|
913 | 600 | 640x360 |
142 | 64 | 320x180 |
297 | 180 | 512x288 |
506 | 320 | 512x288 |
689 | 450 | 412x288 |
1410 | 950 | 853x480 |
2090 | 1500 | 1280x720 |
Pentru utilizatorii cu o conexiune de 1,6 MBPS, playerul va alege rata de biți de 913 KBPS, oferind clientului un videoclip de 600 KBPS. Cu toate acestea, dacă ratele de biți ar fi fost raportate cu acuratețe, ar fi utilizat rata de biți de 950 KBPS și probabil că ar fi transmis fără probleme. În timp ce alegerile de aici previn blocajele, ele reduc și calitatea videoclipului livrat consumatorului.
Cea mai bună practică : O mică exagerare a ratei de biți video poate fi utilă pentru a reduce numărul de blocări în redare. Cu toate acestea, o valoare prea mare poate duce la o calitate redusă a redării.
Testați videoclipul Neilsen în browser și vedeți dacă îl puteți face să sară înainte și înapoi.
Concluzie
În această postare, am trecut printr-o serie de moduri de a optimiza videoclipurile pe care le prezentați pe site-urile dvs. web. Urmând cele mai bune practici ilustrate în această postare:
-
preload="auto"
Utilizați numai dacă există o probabilitate mare ca acest videoclip să fie vizionat de clienții dvs. -
preload="metadata"
Implicit în Chrome, dar poate duce în continuare la descărcări mari de fișiere video. Utilizați cu prudență. - Videoclipuri silențioase (GIF-uri în buclă sau videoclipuri de fundal)
Scoateți canalul audio - Dimensiuni video
Luați în considerare livrarea videoclipurilor de dimensiuni diferite pe dispozitivul mobil de pe desktop. Videoclipurile vor fi mai mici, se vor descărca mai repede și este puțin probabil ca utilizatorii dvs. să vadă diferența (încărcarea serverului dvs. va scădea și!) - Compresie video
Nu uitați să comprimați videoclipurile pentru a vă asigura că sunt livrate - Nu „ascunde” videoclipuri
Dacă videoclipul nu va fi afișat, nu-l descărcați. - Auditează-ți în mod regulat videoclipurile de la terți
- Streaming
Începeți cu un flux de calitate inferioară pentru a asigura o pornire rapidă. (Pentru videoclipuri cu redare mai lungă, luați în considerare un bitrate mediu pentru o calitate mai bună la pornire) - Streaming
Este în regulă să fii conservator în ceea ce privește rata de biți pentru a preveni blocarea, dar mergi prea departe, iar fluxurile vor oferi un videoclip de calitate inferioară.
Veți descoperi că videoclipul de pe pagina dvs. este optimizat pentru o livrare optimă și că clienții dvs. nu numai că se vor bucura de videoclipul pe care îl prezentați, ci și se vor bucura de un timp de încărcare a paginii mai rapid în general.