← Cloudflare Stream / stream / viewing-videos

Použití Stream Player

Cloudflare poskytuje přizpůsobitelný webový přehrávač, který umí přehrávat video na vyžádání i živé vysílání a nevyžaduje žádnou další práci vývojářů.

Chcete-li přidat přehrávač Stream Player na webovou stránku, můžete buď:

• Vygenerujte vkládací kód na Stream stránce v Cloudflare dashboard pro konkrétní video nebo live input.

  Přejděte na Videa ↗

• Použijte níže uvedený ukázkový kód, přičemž nahraďte <VIDEO_UID> s UID videa (nebo podepsaný token) a <CODE> svým jedinečným kódem zákazníka, který najdete v Stream Dashboard.

<iframe
	src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
	style="border: none"
	height="720"
	width="1280"
	allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
	allowfullscreen="true"
></iframe>

Přehrávač Stream je k dispozici také jako React ↗ nebo Angular ↗ komponenta.

• Chrome: verze 88 nebo vyšší
• Firefox: verze 87 nebo vyšší
• Edge: verze 89 nebo novější
• Safari: verze 14 nebo vyšší
• Opera: verze 75 nebo vyšší

• Chrome na Androidu: verze 90
• UC Browser pro Android: verze 12.12 nebo vyšší
• Samsung Internet: verze 13 nebo vyšší
• Safari na iOS: verze 13.4 nebo vyšší (přepínač rychlosti podporován mimo režim celé obrazovky)

Změna height a width atributy na iframe změní rozměry iframe v pixelech zobrazeného na hostitelské stránce.

<iframe
	src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
	style="border: none"
	height="400"
	width="400"
	allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
	allowfullscreen="true"
></iframe>

Aby byl iframe responzivní, potřebuje styly vynucující poměr stran nastavením iframe na position: absolute; a necháte jej vyplnit kontejner, který používá vypočítanou padding-top procent.

<!-- padding-top calculation is height / width (assuming 16:9 aspect ratio) -->
<div style="position: relative; padding-top: 56.25%">
	<iframe
		src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
		style="border: none; position: absolute; top: 0; height: 100%; width: 100%"
		allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
		allowfullscreen="true"
	></iframe>
</div>

Možnosti přehrávače se konfigurují pomocí querystring parametrů v prvku iframe src atribut. Například:

https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe?autoplay=true&muted=true

• autoplay výchozí: false

  • Pokud je jako parametr dotazu uveden příznak autoplay, přehrávač se pokusí video spustit automaticky. Pokud nechcete, aby se video spouštělo automaticky, příznak autoplay vůbec neuvádějte (namísto jeho nastavení na autoplay=false.) Upozorňujeme, že mobilní prohlížeče tento atribut obvykle nepodporují: uživatel musí pro spuštění přehrávání videa klepnout na obrazovku. Před použitím tohoto atributu zvažte uživatele mobilních zařízení nebo uživatele s omezeným datovým paušálem, protože ne všichni mají neomezený přístup k internetu.

• controls výchozí: true

  • Zobrazuje ovládací prvky videa, jako jsou tlačítka pro přehrání/pozastavení a ovládání hlasitosti.

• defaultTextTrack

  • Inicializuje přehrávač se zapnutou textovou stopou pro zadaný jazykový kód. Hodnota by měla odpovídat kódu jazyka BCP-47, který byl použit při nahrát textovou stopu. Pokud pro zadaný jazykový kód nejsou k dispozici žádné titulky, přehrávač se bude chovat, jako by žádný jazykový kód nebyl zadán.

• letterboxColor

  • Jakýkoli platný hodnota barvy CSS ↗ zadaná hodnota se použije na letterboxing/pillarboxing uživatelského rozhraní přehrávače. Lze ji nastavit na transparent aby nedocházelo k černým pruhům (letterboxingu/pillarboxingu), pokud video není v režimu celé obrazovky.

• loop výchozí: false

  • Pokud je tato možnost povolena, přehrávač po dosažení konce videa automaticky přeskočí zpět na začátek.

• muted výchozí: false

  • Pokud je tato možnost nastavena, zvuk bude na začátku ztlumen.

• preload výchozí: none

  • Tato výčtová možnost má prohlížeči napovědět, co podle autora povede k nejlepšímu uživatelskému zážitku. Můžete zadat hodnotu preload="auto" k přednačtení začátku videa. Pokud možnost vynecháte nebo použijete preload="metadata" na vyžádání načte pouze metadata potřebná ke spuštění přehrávání videa.

• poster je ve výchozím nastavení první snímek videa

  • URL adresa obrázku, který se zobrazí před spuštěním videa nebo během jeho stahování. Pokud tento atribut není zadán, zobrazí se náhledový obrázek videa.

• primaryColor

  • Jakýkoli platný hodnota barvy CSS ↗ zadaná hodnota se použije na určité prvky uživatelského rozhraní přehrávače.

• src

  • Zde by mělo být uvedeno ID videa, které jste nahráli do Cloudflare Stream.

• startTime

  • Časové razítko určující okamžik, kdy přehrávání začíná. Pokud se použije obyčejné číslo, například ?startTime=123, bude interpretováno jako 123 sekund. Lze také použít lépe čitelné časové značky, například ?startTime=1h12m27s pro 1 hour, 12 minutes, and 27 seconds.

• ad-url

  • Stream Player podporuje značky VAST Tags pro vkládání reklam, například prerollů. Pokud máte URI značky VAST, můžete jej přehrávači Stream Player předat nastavením ad-url parametr. URI musí být zakódováno pomocí funkce, jako je například JavaScript encodeURIComponent().

Debug menu přehrávače Stream lze zobrazit a skrýt pomocí klávesové zkratky Shift-D během přehrávání videa.

Po skončení živého vysílání se automaticky vygeneruje záznam, který je dostupný do 60 sekund. Aby přehrávání a zobrazení videa proběhlo úspěšně, mějte na paměti následující:

• Pokud živý přenos skončí ve chvíli, kdy ho divák sleduje, měl by počkat 60 sekund a poté přehrávač znovu načíst, aby zhlédl záznam přenosu.
• Po skončení živého vysílání můžete stav záznamu zkontrolovat přes API. Když je stav videa ready, můžete k přehrávání nahraného záznamu použít jednu z manifestových URL adres.

Zatímco se generuje záznam živého vysílání, video se může zobrazovat jako not-found nebo not-started.

Pokud je pro Live Input povolena beta verze Low-Latency HLS, přehrávač Stream automaticky spustí přehrávání v režimu s nízkou latencí, pokud je to možné. Více informací najdete v Spuštění živého vysílání a povolte tuto možnost.