← Cloudflare Stream / stream / viewing-videos / using-the-stream-player

Stream Player API

Pro další možnosti ovládání a přizpůsobení nabízíme doplňkovou sadu JavaScript SDK, kterou lze použít k ovládání přehrávání videa a naslouchání mediálním událostem.

Chcete-li tuto SDK použít, přidejte další <script> značku na svůj web:

<!-- You can use styles and CSS on this iframe element where the video player will appear -->
<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"
  id="stream-player"
></iframe>

<script src="https://embed.cloudflarestream.com/embed/sdk.latest.js"></script>

<!-- Your JavaScript code below-->
<script>
  const player = Stream(document.getElementById('stream-player'));
  player.addEventListener('play', () => {
    console.log('playing!');
  });
  player.play().catch(() => {
    console.log('playback failed, muting to try again');
    player.muted = true;
    player.play();
  });
</script>

• play() Promise

  • Spustí přehrávání videa.

• pause() null

  • Pozastavte přehrávání videa.

• autoplay boolean

  • Nastavuje nebo vrací, zda byl nastaven atribut autoplay, který umožňuje spustit přehrávání videa ihned po načtení.

• buffered TimeRanges readonly

  • Objekt odpovídající rozhraní TimeRanges. Tento objekt je normalizovaný, což znamená, že rozsahy jsou seřazené, nepřekrývají se, nejsou prázdné a nedotýkají se (sousední rozsahy se sloučí do jednoho většího rozsahu).

• controls boolean

  • Nastavuje nebo vrací, zda se mají u videa zobrazovat ovládací prvky (například přehrát/pozastavit)

• currentTime celé číslo

  • Vrátí aktuální čas přehrávání v sekundách. Nastavením této hodnoty se video přetočí na nový čas.

• 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.

• duration celé číslo, pouze pro čtení

  • Vrátí délku videa v sekundách.

• ended boolean pouze pro čtení

  • Vrátí, zda video skončilo.

• letterboxColor string

  • 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 boolean

  • Nastavuje nebo vrací, zda se má video po dosažení konce přehrát znovu od začátku

• muted boolean

  • Nastavuje nebo vrací, zda se má u videa přehrávat zvuk

• paused boolean pouze pro čtení

  • Vrátí, zda je video pozastaveno

• played TimeRanges readonly

  • Objekt odpovídající rozhraní TimeRanges. Tento objekt je normalizovaný, což znamená, že rozsahy jsou seřazené, nepřekrývají se, nejsou prázdné a nedotýkají se (sousední rozsahy se sloučí do jednoho většího rozsahu).

• preload boolean

  • Nastavuje nebo vrací, zda se má video přednačíst při načtení prvku.

• primaryColor string

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

• volume float

  • Nastavuje nebo vrací hlasitost od 0.0 (ticho) do 1.0 (maximální hodnota)

Podporujeme většinu standardizované události mediálního prvku ↗.

• abort

  • Odešle se při přerušení přehrávání, například když se přehrávané médium restartuje od začátku.

• canplay

  • Odešle se, jakmile je k dispozici dostatek dat pro přehrání média, alespoň pro několik snímků.

• canplaythrough

  • Odešle se, pokud lze celé médium přehrát bez přerušení za předpokladu, že rychlost stahování zůstane alespoň na současné úrovni. Vyvolá se také při přepnutí přehrávání mezi pozastaveným a spuštěným stavem. Poznámka: ruční nastavení hodnoty currentTime nakonec ve Firefoxu vyvolá událost canplaythrough. Jiné prohlížeče tuto událost nemusí vyvolat.

• durationchange

  • Metadata byla načtena nebo se změnila, což signalizuje změnu délky média. K tomu dochází například tehdy, když se médium načte natolik, že je známa jeho délka.

• ended

  • Odešle se po dokončení přehrávání.

• error

  • Odešle se při výskytu chyby (například video ještě nebylo dokódováno, nebo se video nepodařilo načíst kvůli neplatné podepsané URL adrese)

• loadeddata

  • Načtení prvního snímku média bylo dokončeno.

• loadedmetadata

  • Načítání metadat média bylo dokončeno; všechny atributy nyní obsahují tolik užitečných informací, kolik jich mohou obsahovat.

• loadstart

  • Odešle se při zahájení načítání média.

• pause

  • Odešle se při přepnutí stavu přehrávání na pozastaveno (vlastnost paused má hodnotu true).

• play

  • Odešle se, jakmile přehrávání přestane být pozastaveno, ať už v důsledku volání metody play, nebo atributu autoplay.

• playing

  • Odešle se, jakmile má médium dostatek dat pro spuštění přehrávání, tedy po události play, ale i při obnovení po zaseknutí, při restartu opakovaně přehrávaného média a po události seeked, pokud přehrávání probíhalo ještě před posunem.

• progress

  • Odesílá se pravidelně, aby informoval zainteresované strany o průběhu stahování médií. Informace o aktuálním množství staženého média jsou dostupné v atributu buffered daného mediálního prvku.

• ratechange

  • Odešle se při změně rychlosti přehrávání.

• seeked

  • Odešle se po dokončení posunu v přehrávání.

• seeking

  • Odešle se při zahájení posunu v přehrávání.

• stalled

  • Odešle se, když se user agent pokouší načíst data média, ale data neočekávaně nepřicházejí.

• suspend

  • Odešle se, když se načítání média přeruší, ať už proto, že stahování skončilo, nebo bylo z jiného důvodu pozastaveno.

• timeupdate

  • Čas udávaný atributem currentTime elementu se změnil.

• volumechange

  • Odešle se při změně hlasitosti zvuku, tedy jak při nastavení hlasitosti, tak při změně atributu muted.

• waiting

  • Odešle se, když se požadovaná operace (například přehrávání) odloží, protože čeká na dokončení jiné operace (například posunu).

Nestandardní události mají prefix stream- aby se odlišily od standardních událostí.

• stream-adstart

  • Aktivuje se, když ad-url atribut je přítomen a reklama začne přehrávat

• stream-adend

  • Aktivuje se, když ad-url atribut je přítomen a reklama dokončí přehrávání

• stream-adtimeout

  • Aktivuje se, když ad-url atribut je přítomen a načtení reklamy trvalo příliš dlouho.