Průvodce pro programátora

Zde je několik tipů o tom, jak vyladit chování FV Flowplayer (2.1.32+).

• Použití vlastního kódu na vytvoření přehrávače
• WordPress filtre
• Jak na JavaScript
• Určení délky videa

Použití vlastního kódu na vytvoření přehrávače

Důrazně doporučujeme, abyste se tomuto způsobu vyhnuli a dejte nám vědět jaký by byl váš preferovaný způsob vkládání videa pokud se vám nelíbí náš shortcode.

Pokud dáváte přednost používaní vašeho vlastního rozhraní s vlastními poli (post meta), můžete použít například tento PHP kód:

if( function_exists('flowplayer_content_handle') && $meta = get_post_meta(get_the_ID(), 'my-field', true) ) {
  $args = array();
  $args['src'] = $meta;

  if( $splash = get_post_meta(get_the_ID(), 'my-field-for-splash-screen-url', true) ) {
    $args['splash'] = $splash;
  }
  echo flowplayer_content_handle( $args );
}

Dostupné WordPress filtre

Pravděpodobně již víte, jak fungují WordPress filtry. Zde si můžete přečíst referenci filtrů na wordpress.org.

Seznam dostupných filtrů:

• fv_flowplayer_ad_html – umožňuje Vám přizpůsobit to, co se zobrazí reklamě jednou při zahájení přehrávání videa. Můžete použít globální proměnnou $post pro kontrolu jaký příspěvek se poskytuje.
• fv_flowplayer_autobuffer_limit – přizpůsobte si kolik videí se má načíst do vyrovnávací paměti, když je tato možnost zapnuta. Výchozí hodnota je 2.
• fv_flowplayer_amazon_expires – umožňuje Vám přizpůsobit čas vypršení URL adresy v sekundách. Prvním argumentem je doba trvání a druhý je URL souboru
• fv_flowplayer_amazon_secure_exclude – umožňuje Vám vyloučit URL adresu z procesu nebo přidávání přístupových tokenů. URL souborů je argument, vrátí true pro přeskočení soubor.
• fv_flowplayer_attributes – První parametr je pole všech DIV atributů přehrávače, druhý je video URL. Můžete použít globální proměnnou $post abyste zkontrolovali jaký příspěvek se poskytuje. Nejvýznamnější atributy jsou:
  • class – CSS třída prvku
  • data-cuepoints – umožňuje Vám vložit data do cuepoints. Použijte data jako [10, 30, 60, 120]
  • data-embed – nastavte na hodnotu “false” pro vypnutí vkládání videa
  • data-engine – nastavte na hodnotu “flash” pokud chcete použít Flash pro video
  • data-fullscreen – nastavte na hodnotu “false” pro vypnutí možnosti zobrazení na celou obrazovku
  • data-key – licenční klíč
  • data-keyboard – nastavte na hodnotu “false” pro vypnutí klávesovćh zkratek
  • data-logo – cesta k vašemu logu pro přehrávač. Pro použití je třeba mít platný licenční klíč.
  • data-rtmp – nastavení koncového bodu URL pro RTMP
  • style – inline atribut kontejneru pro styl přehrávače. Pro nastavení rozměrů videa.
• fv_flowplayer_inner_html – umožňí Vám vložit jakýkoli HTML element do kontejneru přehrávače, hned po videu a pop-up elementech
  
• fv_flowplayer_popup_html – umožňí Vám přizpůsobit, obsah pop-up okna, který se zobrazí na konci videa. Můžete použít globální proměnnou $post, abyste zjistili jaký příspěvek se bude poskytovat.

Dejte nám vědět, jestli vám chybí nějaký filtr!

Příklad

Přidejte tlačítko přehrávání do ovládacího panelu přehrávače (je to jednoduché nakolik je to jen CSS třída)

add_filter('fv_flowplayer_attributes', 'tweak_fv_flowplayer_attributes', 10, 2);
function tweak_fv_flowplayer_attributes($attrs) {
  $attrs['class'] .= ' play-button';

  return $attrs;
}

Používání JavaScript API Flowplayer-u

Jak přidat Váš kód

Použijte standardní WordPress filtr s názvem wp_footer. Následující ukázka kódu (můžete ji vložiť buď do nového pluginu nebo do souboru functions.php vaší šablony) zkontrolujte meta data příspěvku, a pokud se nájdou tak se vypíše JavaScript, který se spustí při přehrávání videa:

add_action('wp_footer', 'my_fv_flowplayer_scripts', 10, 3);
function my_fv_flowplayer_scripts( $script ) {
  global $post;

  if( get_post_meta($post->ID, 'tweak_player', true) ) {
    $args = func_get_args();
    $script .= "
    jQuery('#$args[1]').bind('ready', function() {
      alert( 'Video just started!' );
    });
    ";
  }

  return $script;
}

Kód může být zlepšen (například) spustit vlastní funkci, která zastavení přehrávání videa po 5 sekundách a ukázat nějaké popup okno. Samozřejmě můžete použít jakékoli spustení událostí z Flowplayer API.

Samozřejmě můžete použít kód podobný výše zmíněnému v jakémkoliv JavaScript souboru, abyste ovlivnily všechny přehrávače. Stejný příklad jako výše, ale tentokrát je ovlivněn pouze první přehrávač na libovolné stránce:

<script>
if( typeof(flowplayer) != "undefined" ) {
  var api = flowplayer(0);

  api.bind('ready', function() {
    alert( 'Video just started!' );
  });

}
</script>

Kód můžete také vložit do patičky Vaši šablony. Pokud používáte Minify plugin je třeba zkontrolovat, zda funguje správně s Vašim kódem.

Důležitý API metody

• disable(flag) – nastavte příznak na hodnotu true pro zakázání přehrávače, false pro znovu povolení přehrávače
• fullscreen() – přepínaní zobrazení na celou obrazovku
• load(video) – video by mělo být uloženo v poli například:
  [{ mpegurl: 'http://meinedomain.com/mein/anderes/video.m3u8'}, {webm: 'http://meinedomain.com/mein/anderes/video.webm'}, {mp4: 'http://meinedomain.com/mein/anderes/video.mp4'}, {ogg: 'http://meinedomain.com/mein/anderes/video.ogv'}]
• next() and prev() – další a předcházející položka playlistu
• pause() – pozastavit video
• play(index) – přehrávání videa, použijte atribut index pro určení polohy v playlistu
• resume() – pokračovat v přehrávání po pauze
• seek(time) – posunout se na časový úsek
• stop() – zastaví přehrávání a vrátí se na začátek videa
• unload() – opuštění okna přehrávače
• volume() – nastavení hlasitosti přehrávače

Použití podobné jako v předchozích příkladech:

api.disable(false);

Důležité API události

• beforeseek – při zahájení procesu vyhledávání, 3. argument je požadovaný čas posunutí
• cuepoint– když je dosažen časový úsek, 3. argument je objekt s časovým úsekem a index.
• error – pokud dojde k chybě, 3. argument je objekt s popisem chyby.
• finish – když se přehrávání skončilo.
• fullscreen a fullscreen-exit – když se spustí/zavře přehrávání na celou obrazovku.
• load – první událost přehrávače před spuštěním přehrávání videa
• mute a volume – událost ztlumení nebo změna hlasitosti
• pause and stop – událost pauzy/zastavení přehrávání
• progress – událost se spouští každých 250ms při přehrávání videa
• ready – když je video načteno
• seek – posouvání bylo dokončeno
• unload – když se přehrávač dostane zpět do úvodního stavu.

Prohlédněte si výše uvedené příklady jak použít propojení s následujícími ukázky

Stručné JavaScript ukázky

Pokaždé vkládejte vaše skripty do wp_footer hooku nebo je zahrnte do footer.php pod wp_footer() volání.

1. Inicializace přehrávače přes JavaScript

Ujistěte se, že prvek má nastaven rozměry nebo je nastavte pomocí JavaScriptu. Ujistěte se, že v elementu není žádný tag, protože ho Flowplayer použije místo:

jQuery('#your-element').flowplayer( {
  playlist: [
    [ { mp4: "http://example.com/videos/file.mp4"} ]
  ]
} );

Pokud pak chcete nahradit video s nějakým jiným, můžete buď jen odstranit prvek a vložit nový s novým přehrávačem, nebo použít nějaké jiné API volání pro nahrazení přehrávání videa.

2. Jak používat výše uvedené API metody

Stačí si vybrat Váš prvek, zavolat flowplayer() a pak zvolenou metodu. Takhle:

jQuery('#your-element').flowplayer().play();

3. Jak sledovat uživatele sledujúci videa až do konce s Ajax-em

Zde je ukázkový kód pro FV Player, který zjišťuje, zda uživatel skutečně sledoval video až do konce (posouvání až do konce nestačí) a potom odešle ID příspěvku pomocí Ajax: https://gist.github.com/foliovision/2c266598333ecbd1f151

Určení délky videa

Jak začít

Nejprve je nutné povolit Integrace -> Zjistuj délku videa. Povolení této možnosti vloží všechny vaše příspěvky s shortcode do fronty a pak cron démon prohledává videa v příspěvcích a uloží délku jednotlivých videí.

Uložení příspěvek také spouští kontrolu.

• Při ukládání příspěvků je přísný časový limit – 2 sekundy. V případě, že video není řádně zkontrolováno do této doby (špatné kódování, pomalé připojení ze serveru), pak je vloženo do cron fronty plánovače úloh. Takže nemusíte hned vidět všechny trvání videa.
• Délka videa se kontroluje pouze jednou pro jednu URL. Pokud změníte své video očekáváme, že změníte také název souboru.
• Ak ji naozaj potrebujete aktualizovat, můžete odstranit _fv_flowplayer_% meta pro ID vašeho příspěvku v wp_postmeta tabulce. Zálohujte vaši databázi před pokračováním, pokud neovládáte dobře SQL. Pak vypnete/zapnete možnosť Integrace -> Zjistuj délku videa pro opětovné spuštění indexování trvání videa.

Jaké videa jsou podporovány?

Video musí být správně kódovano, Moov meta data musí být na začátku souboru. Tato funkce není momentálně podporována pro RTMP nebo HLS proud.

Jak zobrazit trvání videa

Trvání videa je možné nastavit pro:

1. Jednotlivá videa
2. Celý playlist

Doba trvání je skrytá pomocí CSS, aby nevyrušovala uživatelů. Pro zviditelnění je třeba použít následující CSS:

1. Jednotlivá videa – .fvfp_duration { display: block }
2. Celý playlist – .fp-playlist-external .dur { display: inline-block }

Můžete také použít následující PHP pro zobrazení trvání prvního videa v příspěvku ve vašich šablonách:

echo flowplayer::get_duration_post($post_id)

Můžete také použít tento shortcode pro zobrazení trvání předchozího videa v příspěvku. Takže pokud máte více shortcodes v příspěvcích, stačí vložit tento kód za každého z nich a bude se zobrazovat čas.

[fv_time]