iBooks audio lejátszási korlátai interaktív EPUB3 formátum esetén – fejlesztői szemmel

Posted by | · · · · · · · · | Cégélet · Webstar Works | 1 hozzászólás a(z) iBooks audio lejátszási korlátai interaktív EPUB3 formátum esetén – fejlesztői szemmel bejegyzéshez

Cégünk 2012 júniusában kiadta első interaktív könyvét iBooks futtatására képes iOS eszközökre. Ezt tovább gondolva ugyanezen év decemberében elkészítettük és kiadtuk a Történetek a gyerekszobából című sorozat első részét magyarul First Colours megérkezik, angolul The Arrival of Erste Farben címmel. A fejlesztés során találkoztunk néhány olyan korláttal, ami az iBooksban előjött, egy mezei WebKit alapú böngészőben viszont nem.

Interaktív EPUB3

Az interaktív EPUB3 formátumú könyv gyakorlatilag sorbaállított HTML5 oldalak összessége, a HTML5 minden eszközével felvértezve. Mi is innen indultunk ki.

A fejlesztés során főként a saját tapasztalatainkra kellett támaszkodtunk, mert a témában kevés dokumentáció érhető el.

Léteznek fejlesztőeszközök, amelyekkel teljes mértékben el lehet készíteni egy interaktív EPUB3 formátumú könyvet, de ezek nekünk nem nyújtottak kellő szabadságot az általunk elképzelt interakciók, animációk megvalósításában, így az alapoktól kellett felépítenünk a saját igényeinknek megfelelő könyveket. Mindezt HTML5, CSS3 és JavaScript segítségével.
Ezek alkalmazása során futottunk bele néhány korlátba, rendellenességbe, hiányosságba, amivel az iBooks küszködik. Az összehasonlítási alapot a WebKit alapú böngészők jelentették, a Safari és a Chrome legfrissebb verziói.

apple_edu_ibooks_video_heading

iBooks vs HTML5 audio

A HTML5 révén az EPUB3 formátumban készült interaktív könyvbe képesek vagyunk audio és video elemeket is használni. Ez eddig teljesen rendben van.

Mi a dinamikusan változó számú hangeffektek lejátszásával kapcsolatban futottunk bele egy teljesítmény szempontjából dühítő dologra.

Akkor minden szép és jó, ha az XHTML-ben a <body> -ba helyezünk egy <audio> tagot és azt próbáljuk meg lejátszani. Ellenben, ha nem tudjuk előre, hogy párhuzamosan hányszor szeretnénk lejátszani az adott hangot, akkor jönnek a gondok.

Hiába illesztjük be a következő módon a kívánt audio fájlt: <audio id=”foo” preload=”auto” src=”audio/foo.m4a”><span>foo</span></audio>, az iBooks úgy gondolja, hogy neki ezt nem kell globálisan gyorsítótárba helyezni. Globális alatt arra gondolok, mint például, ha egy képet betöltetünk a böngészővel a DOM-ba (attól függetlenül, hogy valójában az megjelenik-e), ha új elemet szúrunk be a DOM-ba, azonos URL-el, akkor a képet már gyorsítótárból veszi, így azonnal megjelenik.

Ez tűnne logikus működésnek, ellenben a HTML5 specifikációban ez nem szerepel.

Ebből következik, hogy amikor azt szerettünk volna, hogy a megoldásunkban buborékok pukkasztása során azok hangot adjanak ki, ez iBooks-ban becsődölt.

Chrome/Safari böngészőkben csodálatosan működött, teljesen élvezhető volt, semmi lassulás. iBooks-ban használhatatlan volt, pedig a buborék megjelenésekor adtuk a DOM-hoz az audio elemet, ergo lett volna ideje betölteni a hangot, de lejátszás során mégis megakadt még az animáció is (aminek elvileg külön szálon kellene futnia). A hangot lejátszó kódrészlet alapjául az iTunesConnect-ből szabadon letölthető FixedLayoutExample példában szereplő kódot vettük.

Screen Shot 2013-06-06 at 15.19.16

A végül kidobott megoldást kipróbálhatjátok  ide kattintva böngészőben, és ide kattintva elérhetitek a EPUB3 formátumban.

A tanulság az iBooks-ba való fejlesztéssel és a tapasztalt hibákkal kapcsolatban mindenképpen az, hogy a céleszközön való tesztelés elengedhetetlen, valamint az erőforrásokkal való gazdálkodás létfontosságú a jobb felhasználói élmény elérése végett.


One Comment

Webstar Blog | Mobil HTML5 rázás esemény says:

2013. augusztus 1. at 16:13

[…] is írtam már az interaktív EPUB3 fejlesztésről HTML5/JavaScript/CSS3 alapokon. Az előző bejegyzésemmel ellentétben, most nem egy hibáról, hanem egy megoldásról […]

Reply

Leave a comment