Jak zajistit plynulé přehrávání bez přerušení (ukládání do vyrovnávací paměti)

Je jen jedna věc horší než žádný internet:nespolehlivý internet. Frustrace, kterou cítím, když se jedna stránka načítá rychle, pak další velmi pomalu (pokud vůbec) a pak je směs nezvládnutelná. Jako... frustrující házení zařízení přes místnost. Tato pomalost je nejvíce patrná při pokusu o přehrávání médií, konkrétněji videa, kde je to vizuálně trhané a zvuk je přerušovaný a ve vás to kypí vztekem.

Minulý týden jsem psal o doporučených postupech pro videa HTML5 a úžasných nástrojích poskytovaných Cloudinary k umístění optimalizovaných a konfigurovatelných videí na váš web. Cloudinary vám umožňuje přizpůsobit video plakát, ovládací prvky videa a dokonce aplikovat filtry a transformace na samotné video. Když se podíváte hlouběji, můžete dokonce ovládat bitovou rychlost a úrovně kodeků, což umožňuje lepší přizpůsobení zobrazování videa.

Nahrání videa

Video můžete nahrát na web Cloudinary, ale pojďme se trochu pobavit a k nahrání videa použijte Cloudinary Node.js API:

cloudinary.uploader.upload('sample-video.mp4', function(result) {
  // Callback
  console.log('result: ', result);
}, {
  public_id: 'sample-video',
  resource_type: 'video'
});

Cloudinary poskytuje PHP, Python a řadu dalších knihoven API. Jakmile je video nahráno, můžete zavolat následující metodu k načtení optimálního řetězce HTML videa:

cloudinary.video('sample-video');

/*
<video poster='http://res.cloudinary.com/david-wash-blog/video/upload/sample-video.jpg'>
    <source src='http://res.cloudinary.com/david-wash-blog/video/upload/sample-video.webm' type='video/webm'>
    <source src='http://res.cloudinary.com/david-wash-blog/video/upload/sample-video.mp4' type='video/mp4'>
    <source src='http://res.cloudinary.com/david-wash-blog/video/upload/sample-video.ogv' type='video/ogg'>
</video>
*/

Manipulace s kvalitou videa a přenosovou rychlostí

V závislosti na zařízení, prohlížeči, provozním zatížení, délce videa nebo řadě dalších proměnných možná budete chtít upravit kvalitu nebo přenosovou rychlost videa na svém webu. Přestože kvalita a přenosová rychlost jsou dvě samostatné manipulace, pamatujte, že čím vyšší přenosová rychlost, tím vyšší kvalita.

Nejprve nastavíme požadovanou kvalitu:

cloudinary.video('sample-video', { quality: 50 });

Nastavení požadované přenosové rychlosti je stejně snadné:

cloudinary.video('sample-video', { bit_rate: '250k' });

Použití API je tak snadné, žádné překvapení!

Adaptivní datový tok – HLS a MPEG

Streamování s adaptivní bitovou rychlostí je technika doručování videa, která upravuje kvalitu toku videa v reálném čase podle zjištěné šířky pásma a kapacity procesoru. To umožňuje spouštění videí rychleji, s menším počtem přerušení načítání do vyrovnávací paměti a v nejlepší možné kvalitě pro aktuální zařízení a síťové připojení, aby se maximalizoval uživatelský dojem.

Cloudinary dokáže automaticky vygenerovat a doručit všechny tyto soubory z jediného originálního videa, překódovaného do jednoho nebo obou následujících protokolů:

  • Živé streamování HTTP (HLS)
  • Dynamic Adaptive Streaming over HTTP (MPEG-DASH)

Nastavení streamování je vícekrokový (ale snadný) proces – pojďme se podívat, jak toho dosáhnout!

Krok 1: Vyberte profil streamování

Cloudinary poskytuje kolekci předdefinovaných streaming profiles , kde každý profil definuje sadu reprezentací podle doporučených doporučených postupů.

Například 4k profil vytváří 8 různých zobrazení v poměru stran 16*9, od extrémně vysoké kvality po pouze zvuk, zatímco sd profil vytváří pouze 3 reprezentace, všechny v poměru stran 4:3. Mezi další běžně používané profily patří hd a full_hd profily.

Chcete-li zobrazit úplný seznam dostupných předdefinovaných profilů streamování a nastavení pro každou reprezentaci, viz Předdefinované profily streamování.

Krok 2: Nahrajte své video s dychtivou transformací včetně profilu a formátu streamování

Jeden profil streamování se skládá z mnoha odvozených souborů, takže může chvíli trvat, než je Cloudinary vygeneruje všechny. Proto při nahrávání videa (nebo později explicitně) byste měli zahrnout dychtivé asynchronní transformace s požadovaným profilem streamování a formátem videa.

Svá videa můžete dokonce horlivě připravovat pro streamování v obou formátech a můžete zahrnout i další transformace videa. Ujistěte se však, že streaming_profile je poskytován jako samostatná součást řetězených transformací.

Tento příkaz pro nahrávání například zakóduje big_buck_bunny.mp4 video do formátu HLS pomocí full_hd profil streamování:

cloudinary.uploader.upload("big_buck_bunny.mp4", 
        function(result) {console.log(result); }, 
        { resource_type: "video", 
        eager: [
            { streaming_profile: "full_hd", format: "m3u8" }],                                   
        eager_async: true,
        eager_notification_url: "http://mysite/notify_endpoint",
        public_id: "bb_bunny"});

Krok 3: Doručení videa

Po dokončení dychtivé transformace doručte své video pomocí .m3u8 (HLS) nebo .mpd (MPEG-DASH) formát souboru (přípona) a zahrnují streaming_profile (sp_<profilename> ) a další transformace přesně odpovídající těm, které jste uvedli ve své dychtivé transformaci (podle adresy URL, která byla vrácena v odpovědi na nahrávání).

cloudinary.video("bb_bunny.m3u8", {streaming_profile: "hd"})

Možnost měnit přenosovou rychlost a kvalitu za běhu je úžasná schopnost. Jistě, můžete použít své vlastní nástroje ke generování souborů při různých přenosových rychlostech a kvalitách, ale zdá se to jako ztráta času a energie, když to Cloudinary tak usnadňuje. A kdy můžete streamovat i přes Cloudinary? Jaký bonus. Když k tomu přidáte možnost optimalizovat a transformovat snímky, generovat obrázky křivek, odstraňovat pozadí fotografií, označovat obrázky a automatizovat aktualizace obrázků,  používání Cloudinary je snadné rozhodnutí pro víceúčelovou správu médií!