spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

František Čaník 14.10.2012
Hodnoť článok:
6 0

Hľadáte riešenie pre Vaše multimédiá? Našli ste!

Pre svoj nový magazín, resp. pre jeho webovú verziu, som dlho hľadal video prehrávač, ktorý by bol podporovaný všetkými dostupnými technológiami. Prešiel som veľmi veľa vecí a nakoniec som za zastavil na jedinej - Projekktor.

HTML5 Video Player

pro·jekk·tor (pr-jkk-tr) je open-source HTML5 video prehrávač, ktorý má svoju alternatívu aj vo FLASH podobe. Je napísaný v JavaScripte tak, aby riešil hlavný problém podpory medzi prehliadačmi a teda to, čo riešia (dookola) všetci developeri. Ako sami autori píšu, ich hlavným cieľom je priniesť najlepší HTML5 prehrávač.

Funkcionalita

  • Pre- & Pos- reklamy (VAST plug-in)*
    umožní zobrazovanie reklamy pred, počas (overlay) a po skončení videa
  • skutočný fullscreen
    nejde o vynútenie prostredníctvom flash-u, ale využíva sa fullscreen podpora z prehliadačov
  • zabudovaný playlist s možnosťou streamovania kanálov
    playlisty v JSON-e, prípadne ako vodcasty v xml
  • podpora FLASH-u s RTMP
  • OSMF podpora pre HDS streaming a DVR*
  • jednoduchá integrácia a designovanie
    pomocou jQuery a tagov <video> či <audio> sa automaticky embeduje prehrávač do stránok, rovnako ako pomocou CSS štýlov je možné meniť vzhľad ovládacích prvkov
  • zjednotené JavaScriptové API
    prehrávač má zabudované API aby ste si mohli vytvoriť svoje vlastné ovládacie prvky, prípadne dopĺňať funkcionalitu, ktorá môže ovplyvňovať Vašu webovú stránku
  • strihové body pre synchronizované médiá
    pomocou určenia bodov môžete Vaše video otitulkovať, prípadne pri istých časoch vykonať ľubovoľné akcie, ktoré rovnako môžu meniť napríklad vzhľad Vašich stránok, prípadne posielať informáciu do Vašich štatistík

* platený plugin

Konfigurácia

Inštalácia je veľmi jednoduchá a po tom, ako si stiahnete zdrojové kódy, stačí ich rozbaliť a použiť na správnom mieste. Dôležité sú:

  1. projekktor.min.js
  2. jquery.min.js
  3. jarisplayer.swf
  4. a v neposlednej rade CSS súbory s obrázkami pre konkrétny vzhľad

Aby všetko fungovalo, je nutné, aby Vaša stránka mala jQuery. Ako si ho pridať písať snáď netreba, že? Avšak to, čo je nutné pre projekktor je v nasledovných riadkoch. Do hlavičiek je nutné pridať JavaScript-y + CSS štýl.

<script type="text/javascript" src="js/projekktor.min.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />

Ak chcete spustiť projekktor na všetky HTML5 VIDEO elementy, stačí použiť nasledovný kód:

<script type="text/javascript">
     $(document).ready(function() {
          projekktor('video');
     }
</script>

A následne všetky HTML5 elementy typu VIDEO (príklad v kóde) sa zmenia na prehrávač.

<video id="player_a" class="projekktor" poster="intro.png" title="this is projekktor" width="640" height="360" controls>
     <source src="http://www.projekktor.com/intro.ogv" type="video/ogg" />
     <source src="http://www.projekktor.com/intro.mp4" type="video/mp4" />
</video>

Rozšíriteľnosť

Projekktor je síce open-source, avšak niektoré jeho rozšírenia ako napríklad štatistiky, reklamy či audioslideshow sú ako platené a ich cena sa pohybuje od 15 do 200 USD (reklamný VAST plugin).

Samozrejme medzi rozšíriteľnosť musíme počítať aj možnosť vlastnej úpravy a doriešenia vlastných funkcií pomocou zjednoteného Javascriptového API. Rozpísať úplne všetky funkcie by chcelo asi rovno celý seriál, avšak samotný projekt má veľmi pekne spracovanú dokumentáciu.

Vzhľad a prispôsobovanie

Nakoľko HTML5 verzia prehrávača je vlastne čisto HTML verzia, väčšina prvkov je vygenerovaná javascriptovo a teda ide o HTML, ktoré je možné modifikovať cez CSS štýly. Aj samotná časť o témovaní má svoju dokumentáciu a dokonca aj zopár už predpripravených tém.

A čo záverom?

Samotné fungovanie si môžete odskúšať na niekoľkých článkoch, ktoré som publikoval na stránkach môjho magazínu. Napríklad na ukážku playlistu s reklamou pred videom - Celeste Buckingham, alebo aj ukážka bez reklamy v úvode - Adele a jej song ku Skyfall.

Ak Vás tento projektík zaujal a chceli by ste ho používať, neváhajte a sťahujte - projekktor.

František Čaník František Čaník

Programátor, webdesigner a webdeveloper niekoľkých webových projektov. Má za sebou prácu v reklamnej agentúre, médiách a na rôznych pozíciách v oblasti IT.


Hodnoť článok:
6 0

4 komentáre k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 Matej Víťaz 31.1.2014 02:29:22
Napíšte mi jeden dôvod prečo by som mal prestať používať http://www.videojs.com/ a ja prejdem na projektor.
0 0 Jánoš Martin 24.10.2012 17:57:38
Great job man! budem mať čo študovať
0 0 Peter Payter Gašparík 15.10.2012 18:50:22
kedysi som hľadal HTML5 player, skúšal som ich mnoho, ale žiaden nebol tak dobrý ako Projekktor, tiež odporúčam
0 0 tester 15.10.2012 15:02:36
ked si uz slubil mailchimp serial aj bude pokracovanie ? alebo si skoncil pri registracii konta ;)
Zajtra.sk > Programovanie > CSS/HTML > Hľadáte riešenie pre Vaše multimédiá? Našli ste!


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama