ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ V PRAZE Fakulta elektrotechnická Katedra počítačové grafiky a interakce
Bakalářská práce
Komponenta pro prezentaci a střih videozáznamů na webu A widget for web-based annotation of editing of videos Petr Píč
Vedoucí práce: Sporka Adam Ing., Ph.D.
Studijní program: Softwarové technologie a management, Bakalářský Studijní obor: Web a multimedia
2013
iv
Poděkování Chtěl bych poděkovat svému vedoucímu bakalářské práce panu Ing. Adamu Sporkovi za veškerý věnovaný čas, rady a také informace při vypracování této práce. Dále bych chtěl poděkovat své rodině a všem ostatním, kteří mě byli oporou a podpořili mě během celého studia a tvorby této práce.
v
vi
Prohlášení Prohlašuji, že jsem svou bakalářskou práci vypracoval samostatně a použil jsem pouze podklady uvedené v přiloženém seznamu. Nemám závažný důvod proti užití tohoto školního díla ve smyslu §60 Zákona č. 121/2000 Sb., o právu autorském, o právech souvisejících s právem autorským a o změně některých zákonů (autorský zákon). V Praze dne
........................ vii
viii
Abstract This bachelor thesis deals with a creation of web component using the Adobe Flash in a programming language ActionScript3. The Goal of this thesis is the component presenting and editing video on web pages. It’s possible to create and share annotations of videos. The component enables simple video editing, but component only creates prescription for external application. It’s written about general problem, then analysis, design, implementation and testing of application. Application provides space for people to express themselves.
Abstrakt Tato bakalářská práce se zabývá tvorbou webové komponenty v technologii Adobe Flash v programovacím jazyce ActionScript3. Cílem práce je komponenta pro prezentaci a střih videa na uživatelských webových stránkách. Komponenta bude umožňovat vytváření a sdílení anotací videí a bude mít prvky jednoduché střižny, kde komponenta bude vytvářet pouze předpis pro externí aplikace. Nejprve je probrána obecná problematika, pak následuje analýza, návrh, popis implementace a testování aplikace. Aplikace by měla poskytnout lidem prostor se prezentovat.
ANALÝZA A NÁVRH ........................................................................................................ 8 3.1.Uživatelské role .......................................................................................................... 8 3.2.Případy užití ................................................................................................................ 8 3.3.Analytický model tříd ............................................................................................. 15 3.4.Výběr implementačního prostředí ...................................................................... 15 3.4.1.Microsoft Silverlight ............................................................................................ 16 3.4.2.HTML5 .................................................................................................................... 16 3.4.3.Adobe Flash ........................................................................................................... 17 3.4.4.Shrnutí .................................................................................................................... 17 3.5.Návrh uživatelského rozhraní .............................................................................. 17
xi
3.6.Změna vzhledu ......................................................................................................... 18 3.7.Předání anotací komponentě a jejich formát .................................................... 19 3.8.Předpis pro externí aplikace a jeho formát ....................................................... 20 4.
LITERATURA ......................................................................................................................... 36 ZKRATKY ................................................................................................................................ 38 UŽIVATELSKÁ A INSTALAČNÍ PŘÍRUČKA .................................................................... 39 DOTAZNÍKY............................................................................................................................ 43 OBSAH PŘILOŽENÉHO CD ................................................................................................. 45
xii
Seznam obrázků
Obrázek 2.1: Přehrávač Flowplayer .............................................................................................. 3 Obrázek 2.2: Přehrávač JW Player ................................................................................................. 4 Obrázek 2.4: Server YouTube.com ................................................................................................ 6 Obrázek 2.5: YouTube editor videa. Zdroj: [6].......................................................................... 7 Obrázek 3.1: Uživatelské role. ......................................................................................................... 8 Obrázek 3.2: Případy užití pro základní ovládání přehrávače ........................................... 9 Obrázek 3.3: Případy užití pro vytváření a sdílení poznámek......................................... 11 Obrázek 3.4: Případy užití pro střih videa............................................................................... 13 Obrázek 3.5: Diagram tříd.............................................................................................................. 15 Obrázek 3.6: Podpora HTML5 v prohlížečích během posledních let. Zdroj: [7] ....... 16 Obrázek 3.7: Návrh rozložení komponenty ............................................................................ 18
xiii
xiv
Seznam tabulek
Tabulka 5.1: Výsledek testování vložení anotace. ................................................................ 29 Tabulka 5.2: Výsledek testování úpravy anotace. ................................................................ 30 Tabulka 5.3: Výsledek testování smazání anotace. .............................................................. 31 Tabulka 5.4: Výsledek testování střihu videa. ....................................................................... 31 Tabulka 5.5: Vlastnosti vybraných uživatelů ......................................................................... 32
xv
xvi
Úvod Dnes má již spousta lidí přístup k internetu. Nedílnou součástí surfování po internetu se jistě stalo sledování videí. Umožnil to velký nárůst rychlosti připojení k internetu. Průměrná rychlost připojení v České Republice se za posledních pět let vyšplhala z přibližných 4Mbps na 7Mbps.[20] Vyšší rychlost také umožnila sledování videí s větším rozlišením, dokonce i v HD kvalitě. Velké oblíbenosti se těší servery pro sdílení video souborů. Dají se najít videa všech žánrů, od filmových upoutávek přes videoklipy písní až k náhodně natočeným videím. Videa jsou důležitá pro zachycení různých více čí méně důležitých okamžiků. Může jít o mezníky života, sportovní úspěchy či úplně jiné okamžiky. Je potřeba umožnit lidem se prezentovat. Komponenty, které umožňují vkládat videa na uživatelských webových stránkách, často poskytují pouze základní ovládací prvky. Tyto komponenty obsahují tlačítka jako přehrát, pauza a ovládání hlasitosti, ale to nedává veliký prostor lidem se prezentovat nebo vyjádřit se. Cílem je umožnit lidem vyjádřit názor, obdiv nebo radu. Většinou komponenty toho umožňují v omezené formě nebo nic takového neumožňují vůbec. Proto jsem vytvořil komponentu, která toto umožňuje. Komponenta umožňuje vytváření a sdílení anotací videí. Nejedná se však o komentáře pod přehrávačem videa ani o titulky, nýbrž o poznámky zobrazované na ploše videa. Na rozdíl od titulků půjdou poznámky vytvářet, upravovat i také mazat. Dalším cílem je komponenta obsahující rozhraní pro jednoduchý střih videí. Cílem není zabývat se kódováním videí a vytvořením výsledného videozáznamu, ale pouze vytvořením předpisu, podle kterého by externí aplikace vytvořily výsledný videozáznam. V první části práce rozeberu již existující komponenty. Dále se budu zabývat návrhem a implementací vlastní komponenty. V poslední části jsou popsány výsledky testování. V každé části práci se budu věnovat nejprve vytváření anotací, pak střihu.
1
1. Požadavky Komponenta bude realizovaná pomocí dostupných technologií pro prezentaci videa na webu. Komponenta bude umožňovat vkládat videa na uživatelských webových stránkách (embedded player). Komponenta bude mít základní ovládací prvky přehrávače, tj. přehrát, pozastavit, zastavit videozáznam. Dále bude komponenta umožňovat skok na pozici ve videozáznamu, ovládání hlasitosti a nesmí chybět ani zpomalené přehrávání. Je žádoucí, aby ovládání komponenty bylo jednoduché a intuitivní. Měla by se tedy držet jistých standardů v tomto okruhu. Komponenta musí umožňovat změnu vzhledu. Každý by měl být schopen bez obtíží v rámci určitých mezí si vytvořit vlastní vzhled komponenty.
1.1.
Vytváření a sdílení poznámek
Uživatel bude moci v komponentě vytvářet a sdílet anotace videí ve vybraném čase. Anotace půjde vytvořit, upravit a smazat autorem. Anotace nebude mít pevné místo, ale bude možné měnit její pozice. Anotace by měla být nějakým způsobem vyznačena na časové ose.
1.2.
Střih videa
Komponenta bude realizovat uživatelské rozhraní pro jednoduchý střih videí. Komponenta bude vytvářet pouze předpis, podle kterého budou externí aplikace schopny vytvořit výsledný videozáznam. Videa půjdou jednoduše do komponenty přidávat a odebírat. Uživatel by měl mít možnost změnit pořadí přidaných videí v komponentě.
2
2. Existující implementace V této kapitole budou probrány některé existující implementace webových komponent pro prezentaci videa. Komponenty budou probrány z hlediska splnění požadavků na aplikaci. Žádná ze zmíněných komponent nesplňuje veškeré požadavky. Problematický je hodně střih videa. Tento požadavek splňuje pouze jedna jediná komponenta.
2.1.
Flowplayer
Obrázek 2.1: Přehrávač Flowplayer
Flowplayer je webový přehrávač, jehož poslední verze je implementovaná pomocí HTML5 a CSS3 nebo Flashe. Pokud není podporovaná HTML5 video značka, spustí se verze přehrávače ve Flashi. [1] Flowplayer poskytuje běžné ovládání přehrávače jako přehrát, pozastavit, skok na pozici videozáznamu a ovládání hlasitosti. Dokonce poskytuje zpomalené přehrávání přes klávesovou zkratku. Flowplayer
se
chlubí
minimalistickým
designem.
Flowplayer
má
tři
předefinované vzhledy, které se dají upravit. Lze vytvořit i zcela nový vzhled. Změna vzhledu je u Flowplayeru řešena přes kaskádové styly. Flowplayer umí zobrazovat titulky/popisky na ploše videa. Vzhled poznámek je kompletně určován CSS stylem. Flowplayer umí i takzvané „Cuepoints“. Cuepoint umožňuje provádět uživatelské akce během přehrávání v předefinovaný čas. Přehrávač 3
poslouchá „cuepoint“ události a vykoná Váš JavaScritp. Lze vytvořit vytvo vytvoř vizuální „cuepointy“ na časové asové ose, na které se dá kliknout. [2] Dynamicky se však nedají poznámky ani „Cuepoints“ vytvářet. vytvá Ke střihu ihu videí není Flowplayer navržen.
2.2.
JW Player
Obrázek 2.2: Přehrávač řehrávač JW Player
JW Player je HTML5 a Flash video přehrávač.[3] p JW Player má stejně stejn jako Flowplayer základní ovládací prvky, ale chybí mu zpomalené přehrávání, přehrávání, které není vůbec implementováno. Změna vzhledu je v JW Playeru řešeno odlišně od Flowplayeru. Využívá se XML souboru a obrázkůů ve formátu PNG. XML soubor soubor obsahuje nastavení a cestu k jednotlivým obrázkům. ům. Mimo jiné umí tento přehrávač p nahrávat vzhled ze ZIP archivu, ale jen ve verzi přehráva řehrávače pro Flash. Vzhled se dá také vytvořit vytvoř jako SWF vzhled v programu Adobe Flash CS x.x. Tento přístup p se však nedoporučuje. čuje. Vytváření ení anotací JW Player neumí. Sice umí zobrazovat titulky/popisky, ale není zde podpora pro dynamické vytvoření vytvo za běhu. hu. Titulky se zobrazují pouze ve spodní části ásti videa a nelze ani nastavit jejich pozici. Pro střih st ih videa JW Player také není přizpůsoben.
4
2.3.
SoundCloud
Obrázek 2.3: Server SoundCloud.com
SoundCloud je server pro sdílení zvuků. Jedná se o komunitu tvůrců hudby a zvuků. Uživatel složí hudbu či vytvoří nějaký zvuk, nahraje ho na server a sdílí ho. Veřejná tvorba se dá sdílet i na sociálních sítích nebo jiných webových stránkách. [4] Přehrávač na stránkách SoundCloud je opět implementovaný v HTML5 i Flashi. Při sdílení tvorby na jiných webech než SoundCloud si uživatel může vybrat, zda chce vložit HTML5 nebo Flash přehrávač. Jediná možnost změny vzhledu je výběr barvy přehrávače a změna velikosti přehrávače. Pro vývojáře je připraveno několik JavaScript knihoven pro vytvoření vlastního přehrávače. SoundCloud jako jediný umožňuje vkládání anotací. Tyto anotace jsou zobrazeny na časové ose pod obrázky uživatelských účtů. Kliknutím na časovou osu se vyvolá okno pro přidání anotace. Po přidání anotace má autor možnost tuto anotaci odebrat, upravit již nikoli. Anotace se zobrazují v okně na pevném místě podle pozice na časové ose.
5
2.4.
YouTube
Obrázek 2.4: Server YouTube.com
YouTube je světoznámý server pro sdílení videí na internetu. Pro přehrávání videí používá přehrávač implementovaný ve Flashi a také v HTML5, ale preferuje přehrávač ve Flashi. Přehrávač v HTML5 je zkušební verze. Zkušební verze HTML5 se musí aktivovat, aby většina videí byla přehrána v přehrávači HTML5 místo v přehrávače Flash. [5] YouTube přehrávač má jako předchozí přehrávače základní ovládací prvky. Zpomalené přehrávání ale chybí. Dále umí YouTube přehrávač změnu velikosti přehrávače i přehrát video v 3D. Na stránkách YouTube není možnost změny vzhledu přehrávače. Vzhled se nedá upravit ani, když se rozhodnete sdílet veřejné video na jiných stránkách, lze jen nastavit velikost přehrávače. Autor po nahrání videa na server může ve svém profilu nahrát soubor s titulky. Tyto titulky se zobrazují klasicky ve spodní části přehrávače a nelze s nimi manipulovat. YouTube přehrávač umí ale také zobrazovat poznámky. Tyto poznámky vytváří jen autor ve svém profilu a pak je zveřejní. V profilu se dají poznámky vytvářet, upravovat i mazat. Poznámce se nastavuje pozice, čas a délka zobrazení poznámky. Na časové ose nejsou poznámky vyznačeny.
6
Obrázek 2.5: YouTube editor videa. Zdroj: [6]
Pro střih videa má YouTube bezplatný editor videa viz obrázek 2.5. Pomocí editoru videa můžete spojovat videa, oříznout a upravit jejich délku, přidat zvukovou stopu a upravit klipy pomocí speciálních nástrojů a efektů[6]. Videa se přidávají přetažením z nabízených videí. Videa se dají samozřejmě mezi sebou přehazovat. Toto všechno lze po přihlášení. Přihlášený uživatel má přístup k tomuto nástroji ve svém profilu. Takto upravovat videa může uživatel jen svá nahraná videa. Úpravou videí vznikne úplně nové video. Pro zveřejnění upraveného videa je nutné video publikovat.
2.5.
Shrnutí
Většina přehrávačů dnes umožňuje základní ovládání videozáznamu a změnu vzhledu. Často umí zobrazovat i titulky ve videu. SoundCloud umí zobrazování a vytváření anotací, jedná se však o přehrávač hudby. YouTube jako jediné umí zobrazování anotací ve videu, ale vytváření anotace je umožněno pouze osobě, která video na server nahrála. YouTube také jako jediné poskytuje editor videa. Žádný z uvedených přehrávačů však nesplňuje všechny požadavky. Proto vytvořím komponentu, která nabídne všechny požadované funkce.
7
3. Analýza a návrh V této kapitole bude rozebrána analýza a následně návrh komponenty. Postupně budou probrány dílčí podproblémy jako přehrávač, vytváření anotací a editor videa.
3.1.
Uživatelské role
Komponenta sama o sobě neřeší registraci ani přihlašování. Přihlašování a registrace se musí obstarat na stránkách, do kterých bude komponenta vložena. Komponenta přijme pouze uživatelské jméno jako parametr. Když je předán prázdný řetězec
nebo
není
vůbec
předán
parametr
uživatelského
jména,
jedná
se
o nepřihlášeného uživatele. Schéma uživatelských rolí je zobrazeno na obrázku 3.1.
Obrázek 3.1: Uživatelské role.
Nepřihlášený uživatel může obsluhovat pouze základní funkce přehrávače, viz obrázek 3.2. Anotace videí se nepřihlášenému uživateli zobrazují. Přihlášený uživatel má právo oproti nepřihlášenému vytvářet nové anotace, sdílet je a stříhat video. Uživatelská role autora anotace umožňuje upravovat i mazat své anotace videa.
3.2.
Případy užití
Případy užití (Use Case) zachycují funkční požadavky a vytyčují funkce systému a jeho hranice. 8
3.2.1.Ovládání přehrávače
Obrázek 3.2: Případy Př užití pro základní ovládání přehrávače ř če
3.2.1.1. Scénář případů užití • Přehrát video Umožňuje uje spuštění spuště přehrávání. 1.
Uživatel chce spustit přehrávání p ehrávání videa. Uživatel klikne na tlačítko tla přehrát.
2.
Systém spustí přehrávání p videa.
9
• Pozastavit video Umožňuje pozastavení přehrávaného videa. 1.
Uživatel chce pozastavit přehrávání videa. Uživatel klikne na tlačítko pauza.
2.
Systém pozastaví přehrávání.
• Zastavit přehrávání Umožňuje zastavit přehrávání přehrávaného videa. Video se přetočí na začátek. 1.
Uživatel chce zastavit přehrávání videa. Uživatel klikne na tlačítko stop.
2.
Systém zastaví přehrávání a přetočí video na začátek.
• Skok na pozici ve videu Umožňuje přeskakování po časové ose videa. 1.
Uživatel chce přesunout přehrávací hlavu do určité pozice na časové ose. Klikne na časovou osu.
2.
Systém přesune přehrávací hlavu na danou pozici na časové ose.
• Nastavit hlasitost Umožňuje nastavení hlasitosti. 1.
Uživatel chce upravit hlasitost přehrávaného videa. Změní hodnotu.
2.
Systém upraví hlasitost podle nastavené úrovně.
• Zpomaleně přehrát video Umožňuje zpomalené přehrávání videa. 1.
Uživatel chce zpomalit přehrávání videa. Klikne na tlačítko zpomalené přehrávání.
2.
Systém zpomalí přehrávání videa.
10
3.2.2.Vytváření a sdílení poznámek
Obrázek 3.3: Případy užití pro vytváření a sdílení poznámek
3.2.2.1. Scénář případů užití • Zobrazit anotaci Umožňuje zobrazení existující anotace. 1.
Uživatel chce zobrazit anotaci videa. Uživatel klikne na značku anotace na časové ose.
2.
Systém přetočí video na čas anotace.
3.
Systém zobrazí anotaci.
Alternativní scénář: 1.
Uživatel chce zobrazit anotaci videa. Uživatel spustí přehrávání videa.
2.
Systém zobrazí anotaci, když přehrávání dosáhne času anotace.
11
• Nastavit pozici anotace videa Umožňuje změnit pozici anotace na ploše přehrávače. 1.
Autor anotace chce změnit pozici anotace. Autor má zobrazenou anotaci. Autor stiskne levé tlačítko myši nad anotací a přetáhne anotaci na novou pozici.
2.
Systém si zaznamená novou pozici a přesune anotaci na novou pozici.
• Sdílet anotaci videa Umožňuje uložení anotace. 1.
Autor anotace chce uložit anotaci. Má zobrazenou anotaci. Autor klikne na tlačítko uložit.
2.
Systém uloží anotaci.
• Vytvořit anotaci videa Umožňuje vytvoření nové anotace. 1.
Přihlášený uživatel chce vložit novou anotaci. Přesunu se po časové ose tam, kam chce vložit anotaci a stiskne tlačítko vytvořit anotaci.
2.
Systém zobrazí prázdnou anotaci na výchozí pozici.
3.
Uživatel napíše text do prázdné anotace.
4.
INCLUDE(Nastavit pozici anotace videa).
5.
INCLUDE(Sdílet anotaci videa).
• Smazat anotaci videa Umožňuje smazat sdílenou anotaci. 1.
Autor anotace chce smazat svojí anotaci. Má zobrazenou svojí anotaci. Stiskne tlačítko smazat.
2.
Systém se zeptá, jestli opravdu chce smazat anotaci.
3.
Autor potvrdí akci.
4.
Systém odstraní anotaci.
Alternativní scénář: 1.
Autor anotace chce smazat svojí anotaci. Má zobrazenou svojí anotaci. Stiskne tlačítko smazat.
2.
Systém se zeptá, jestli opravdu chce smazat anotaci.
12
3.
Autor zruší akci.
4.
Systém anotaci ponechá a zobrazí zpět anotaci.
• Upravit anotaci Umožňuje upravit existující anotaci. 1.
Autor anotace chce upravit svojí existující anotaci. Má tuto anotaci zobrazenou. Stiskne tlačítko upravit.
2.
Systém umožní úpravu anotace.
3.
Autor upraví text anotace.
4.
INCLUDE(Nastavit pozici anotace).
5.
INCLUDE(Sdílet anotaci).
3.2.3.Střih videa
Obrázek 3.4: Případy užití pro střih videa
13
3.2.3.1. Scénář případů užití • Přidat video Umožňuje přidávat do komponenty videa pro střih. 1.
Přihlášený uživatel chce přidat video do komponenty pro střih. Uživatel stiskne tlačítko přidat video.
2.
Systém zobrazí videa, která může uživatel přidat do komponenty.
3.
Uživatel vybere video a potvrdí výběr.
4.
Systém zobrazí video v komponentě.
• Odebrat video Umožňuje odebrat z komponenty přidané video. 1.
Přihlášený uživatel chce odebrat z komponenty video, které již nechce využít pro střih. Uživatel označí video.
2.
Systém zobrazí možnosti.
3.
Uživatel stiskne tlačítko odebrat video.
4.
Systém odebere video a přerovná zbylé videa.
• Upravit délku videa Umožňuje upravit délku videa. Umožňuje přesunout začátek i konec videa. 1.
Uživatel chce upravit délku videa a má přidané video v komponentě. Změní u videa pozici počátku nebo konce.
2.
Systém přepočítá délku výsledného videa a uloží si pozice.
• Změnit pořadí videí Umožňuje změnit pořadí, ve kterém budou přidaná videa přehrána. 1.
Přihlášený uživatel má přidané alespoň dvě videa. Uživatel chce změnit pořadí, v jakém budou ve výsledném videu přehrána. Uživatel nastaví novou pozici videa v řadě.
2.
Systém přerovná videa.
14
• Odeslat ke zpracování Umožňuje uje uložit dosavadní střih videa, vytvořit předpis edpis a odeslat ke zpracování. 1.
Přihlášený řihlášený uživatel chce vytvořit it výsledné video. Má přidaná p videa a upravená vená podle potřeby. pot Stiskne tlačítko ítko odeslat ke zpracování.
2.
3.3.
Systém uloží dosavadní práci jako předpis, edpis, který odešle ke zpracování.
Analytický model tříd
Model tříd je statický model, který zobrazuje třídy ídy a vztahy mezi nimi. Tento model však může ůže projít změnami zm během hem vývoje aplikace a nemusí se tedy shodovat s konečnými třídami v aplikaci.
Obrázek 3.5: .5: Diagram tříd. t
Na obrázku 3.5 je zachycen diagram tříd, t na kterém je 8 tříd. říd. Nejdůležitější Nejd třídy jsou Player, Annotation tion a Editor. V těchto třídách budou řešeny dílčí dílč problémy, tedy funkce přehrávače, če, e, zobrazování poznámek a editace videa. Komponenta se bude spouštět podle parametru předaného p komponentě buď jako přehrávač ávač s poznámkami nebo editor videa.
3.4.
Výběr implementačního implementa prostředí
Nabízejí se tři ři možnosti implementačního implementa prostředí ředí a to jsou Microsoft Silverlight, Adobe Flash nebo HTML5. Každá tato technologie je různě různě podporována na různých zných platformách a v různých prohlížečích. HTML5 nabízí možnost vložení multimediálního álního obsahu do uživatelských webových stránek bez nutnosti mít nainstalovaný v prohlížeči prohlížeč potřebný plug-in in na rozdíl od Flashe a Silverlightu. 15
3.4.1.Microsoft Silverlight Silverlight je výkonný vývojový nástroj pro vytváření interaktivního uživatelského prostředí pro web a mobilní aplikace. Silverlight je zásuvný modul a je kompatibilní s mnoha prohlížeči prohlížeč a operačními systémy[7]. Zásuvný modul Silverlight má nainstalováno přibližně ř ě 70% všech počítačů[8]. Silverlight aplikace můžou m být vytvořeny eny programovacími jazyky, které podporuje .NET framework( framework(např. Visual Basic, C#, and JavaScript). Nicméně Nicmén Silverlight se hodí spíše pro podnikové aplikace. aplikace
3.4.2.HTML5 HTML5 bude novým standardem pro HTML, stále je tedy ve vývoji. vývoji HTML5 dosud není oficiální standard a žádný žád prohlížeč nemá plnou podporu[9]. podporu Mnoho uživatelů také stále používá starší verze prohlížečů, prohlíže , kde podpora pro HTML5 na nízké úrovni nebo pro HTML5 nepodporují vůbec. v
Obrázek 3.6:: Podpora HTML5 v prohlížečích během hem posledních let. Zdroj: [7]
16
Na obrázku 3.6 je graf zobrazující vývoj podpory HTML5 v prohlížečích během posledních let. Na vertikální ose jsou zachyceny body, kde 500bodů v grafu znamená 100% podporu HTML5 v daném prohlížeči. Nejnižší úroveň implementace má Internet Explorer s 320 body a nejlépe je na tom prohlížeč Google Chrome s 453 body.
3.4.3.Adobe Flash Adobe Flash Player je podobně jako Silverlight zásuvný modul. Adobe Flash, stejně jako předchozí, je nástroj umožňující tvorbu RIA. Flash má na rozdíl od předchozích dlouholetou historii, během které prošel rozšířeními a vylepšeními. Nejprve byl Flash navržen jako nástroj pro tvorbu animací a vytlačil reklamní bannery v GIFu. Během dlouhé historie se zásuvný modul Adobe Flash Player rozšířil na více než 95% počítačů. Pro vývoj interaktivních aplikací má Flash programovací jazyk ActionScript.
3.4.4.Shrnutí Za pomocí zmíněných technologií je možné vytvořit komponentu pro přehrávání videa na webu. Silverlight není příliš rozšířený. HTML5 má hodně slibnou budoucnost, již dnes má solidní podporu, ale ještě ani není oficiálním standardem a prohlížeče ho ještě stoprocentně nepodporují. Drtivá většina přehrávačů na internetu je řešena ve Flashi. Flash je také široce rozšířen, proto jsem se rozhodl pro vývoj komponenty ve Flashi.
3.5.
Návrh uživatelského rozhraní
Uživatelské rozhraní musí být jednoduché a intuitivní. Nejlepším řešením bude vytvořit takové uživatelské rozhraní, které se běžně vyskytuje u přehrávačů videa. Proto prvky uživatelského rozhraní budou umístěny standardně, viz obrázek 3.7. V případě editoru videa by panel s vloženými videi mohl být umístěn pod přehrávačem nebo vedle přehrávače. Pro lepší umocnění dojmu, že videa jsou za sebou seřazena jako na časové ose, bude panel s vloženými videi zobrazován pod přehrávačem jako je tomu na obrázku 3.7.
17
Obrázek 3.7: Návrh rozložení komponenty
Na ploše videa se bude přehrávat video a navíc se zde budou zobrazovat anotace videa. Blok „tlačítka pro ovládání“ je určen pro zobrazení času a pro ovládací prvky: •
Tlačítka přehrát, pozastavit, zastavit
•
Tlačítko zpomaleně přehrát
•
Časová osa videa
•
Tlačítko pro zapnutí/vypnutí zvuku a panel pro změnu hlasitosti
•
Tlačítko pro vytvoření anotace
Rozložení tlačítek v rámci bloku „tlačítka pro ovládání“ nebude pevné. Aby byla zachována volnost při vytváření vlastního vzhledu uživatelského rozhraní, bude možné rozložení tlačítek změnit.
3.6.
Změna vzhledu
Nabízejí se dvě možnosti změny vzhledu. Využít kaskádové styly nebo XML soubor. Rozhodl jsem se pro konfigurační XML soubor. Flash poskytuje dobrou podporu pro práci s XML soubory. Při načítání komponenty se nahraje konfigurační soubor, který bude obsahovat cesty k jednotlivým obrázkům tlačítek a ovládacích prvků. Dále každý prvek bude mít zadanou velikost prvku. Pro zachování volnosti při tvorbě vzhledu se bude nastavovat i souřadnice X a Y. Navíc je možné určit, zda se ovládací prvek má vytvářet 18
a zobrazovat. Jelikož formát obrázku PNG obsahuje průhlednost, doporučuji využít tento formát. Tlačítka mají tři stavy. Každý tento stav bude mít zadanou cestu ke svému obrázku. Jsou to stavy „Up“, „Down“ a „Over“. „Up“ je stav, kdy tlačítko není stisknuto ani nad tlačítkem není kurzor myši. Když je tlačítko stisknuto, je zobrazen stav „Down“. Stav „Over“ nastane, když se vyskytne nad tlačítkem kurzor myši. Ovládání hlasitosti se skládá také ze 3 obrázků. První je maska. Maska určuje vzhled a tvar ukazatele úrovně hlasitosti, proto se zobrazuje ve vrchní vrstvě. Pod maskou je obrázek ukazatele úrovně hlasitosti, který mění velikost podle nastavené úrovně hlasitosti. V nejspodnější vrstvě je pozadí ukazatele hlasitosti. Časová osa se skládá také ze tří vrstev. Nejspodnější je pozadí. Nad ním je ukazatel množství stažených dat. Nejvrchnější vrstva je vlastní časová osa.
3.7.
Předání anotací komponentě a jejich formát
Komponenta se nestará o soubory ani nepracuje s žádnou databází. Komponenta pouze přijme data s anotacemi a tato upravená data předá zpět. Formát dat by měl být takový, aby nebyl potřeba žádný další speciální software pro následnou práci s daty. Nabízí se XML, který je ideální pro výměnu dat mezi aplikacemi. Pro úpravu XML je mnoho nástrojů a práci s XML umožňuje spousta programovacích jazyků. Proto komponenta bude využívat XML jako formát dat pro předávání poznámek. Struktura XML s poznámkami je následující:
19
3.8.
Předpis pro externí aplikace a jeho formát
Editor videa vytváří předpis, podle kterého externí aplikace sestříhají výsledné video. Formát předpisu musí být stejně jako v předchozí podkapitole vhodný pro předávání dat mezi aplikacemi. Pro předpis výsledného sestřihu bude použito XML. Tento předpis bude mít danou pevnou strukturu. Předpis bude zahrnovat cestu k videu a název videa, nesmí chybět údaj o počátečním a koncovém bodu videa. Struktura XML souboru bude takováto: <prescription>
20
4. Implementace Tato kapitola se bude zabývat implementací komponenty a bude zde probráno, jak jsou implementovány jednotlivé podproblémy. Při implementaci se vycházelo z návrhu, viz předchozí kapitola.
4.1.
Použité technologie
4.1.1.Adobe Flash Flash je multimediální platforma používána pro vkládání animací, videa a interaktivity na uživatelské webové stránky. Je to nástroj pro vytváření RIA, jak bylo zmíněno v návrhové části [10]. Flash má objektově orientovaný jazyk zvaný ActionScript. Poslední verze ActionScriptu je 3.0. ActionScript má podobnou syntaxi jako JavaScript. Kód komponenty je napsán v ActionScriptu, který je zkompilován jako soubor ve formátu SWF. SWF soubor se pak vkládá do uživatelských webových stránek do HTML značky
