Както ви споделихме преди няколко седмици, изминалият месец беше доста тежък за нас, но въпреки това успяхме да поддържаме някакво темпо с новото съдържание на FridayCode и същевременно да поработим над FryPlayer. Резултатът е налице - преди няколко дни пуснахме втора версия на плейъра, в която няма кой знае колко промени, но важното е, че е стъпка напред. Промените, както може да разберете от сайта са:
коригиран бъг с Mute On/Off
коригиран бъг при появата на контекстно меню
възможност за поставяне на собствено Logo/Watermark
дребни оптимизации
Накратко, пооправени дребни бъгчета, лека оптимизация и едно нововъведение - възможност за поставяне на watermark. Процесът е уникално улеснен, така че ако имате готова картинка, може да я поставите и позиционирате за броени секунди. Освен това сме оставили и възможност за промяна на нейната прозрачност, така че да не ви се налага да я сейфате сто пъти, докато нацелите правилната стойност. Пътят до самата картинка също може лесно да се променя и по този начин може да имате няколко различни плейъра на една страница и всеки един от тях да бъде с различно лого. Яко, а?
Това обаче не е всичко. Тези промени могат да се причислят към първата част от ъпдейта, който спретнахме. Останалата работа бе по самия сайт! Вече можем да се похвалим с английска версия, но докато се занимавахме с нея, открихме, че системата за коментари и по-точно начинът й на работа не пасва много на изискванията ни. Трябваше и това да се преработи, което допълнително забави нещата. Все пак написахме супер елементарна и лека системка, която вече е активна и от сега нататък ще се грижи за вашите коментари. В сайта добавихме и секция, която да ви информира за последните промени, както и възможност за сваляне на по-стари версии, в случай, че има критичен бъг в новите или просто ако някой го удари носталгията. Накрая решихме да сменим и изгледа на секцията "начин на употреба" и по-точно изобразяването на сорс кода. Старият метод бе направен в бързината и не предлагаше кой знае каква гъвкавост при работа, което ни накара да започнем да използваме популярната системка SyntaxHighlighter.
Като цяло виждате, че всъщност ъпдейта е доста масивен и за това пристигна до вас по-бавно от очакваното. Важното е, че промените са налице и ние сме отперили поглед към версия 0.3, която много вероятно също ще бъде придружена с промени по сайта, макар и не толкова градивни. През това време, ако имате предложения, препоръки или забележки, не забравяйте, че винаги може да оставите коментар или да се свържете с нас по мейл.
Изключително сме радостни да ви представим първия самостоятелен проект, маркиран с логото на FridayCode. Както вече сте разбрали от заглавието, става дума за HTML5 видеоплейър, носещ името FryPlayer. Идеята за него се роди преди около 3 месеца, когато усърдно ровичкахме онлайн медиите за новости в HTML5 и CSS3. Първоначално беше само идея, постепенно се роди статията за HTML5 video или как да създадем видеоплейър, а накрая лека полека започнахме да човъркаме и самия плейър. Честно казано бяхме провокирани и от факта, че все още на хоризонта няма перфектен плейър и спокойно можем да се наместим в Топ 20. Разгледахме голям процент от плейърите, които може да намерите из мрежата и ги анализирахме известно време. Положихме основите на нашия плейър, като се стремяхме да не повтаряме техните грешки. Така започна работата по FryPlayer.
Ако сте чели въпросната статия за това как да си направим видеоплейър, то вероятно ще сте наясно с фактите - всеки браузър има свой собствен дизайн на контролите. Първата цел е те да бъдат уеднаквени, но това не означава просто да смените една картинка, а да пренапишете цялата функционалност. Решихме отново да се възползваме от възможностите на jQuery. В момента на започване на работа по FryPlayer, на сцената имаше само един плейър, който разчиташе на jQuery и по-специално jQuery UI. В момента са няколко и спокойно можем да кажем, че ги превъзхождаме по доста параграфи.
Първоначално ни беше трудно да схванем логиката на определени функционалности и дори в момента изпитваме затруднения с някои, най-вече заради проблемите под различните браузъри (този път войната е FF vs Webkit). Все пак след доста безсънни нощи, версия 0.1 на FryPlayer е факт и наистина сме горди от постигнатото, защото през цялото това време продължихме да пишем уроци и работихме по сайта на самия плейър. Но преди да поговорим за FryPlayer, искаме да кажем няколко думи за сайта му. Целяхме да бъде изключително семпъл, но и малко по-открит, по-отворен. Също така искахме информацията да бъде структурирана смислово и да следва нормалните реакции на всеки потребител. Анимираната навигацията е подобрена версия на този урок. Като цяло ние сме доволни, надяваме се и вие да останете такива.
Сега е време да си поговорим и за самия плейър. Вероятно вече сте разгледали фийчърите му и може би се питате на 100% ли са изпълнени, каква е разликата им с конкурентните плейъри и т.н. Отговорите пристиггат! Като за начало плейърът е изключително лек и това може да проверите, като отворите този линк, пуснат от нашия потребител ReXTaN във форума и направите сравнение с някои от предложенията там. Не сме номер 1, но със сигурност FryPlayer е доста по-бърз дори от някой от най-популярните конкуренти. Лесен за употреба? Разбира се! В описанието на сайта се вижда че са ви необходими само три неща, за да подкарате плейъра при вас - да го свалите и да копирате малко файлове плюс няколко реда код. Останалото са настройки. Следващият голям плюс са скиновете, които поддържа плейъра. Отворете CSS-а и разгледайте как са направени двата скина, които вървят с версия 0.1. Нужно е просто да кръстите и да описвате новия скин с клас, чието име после да заместите при извикването на плейъра. Лесно, а? Друга полезна фунцкия е видеото на цял екран. То не е съвсем на цял екран, както при desktop плейърите, но това е проблем на HTML5. Гъзарията е че, когато сте във full screen mode и рисайзвате прозорецът на браузъра, заедно с него се рисайзва и самият плейър. FryPlayer поддържа и визуализация на буфериране. Тя е в доста ранна фаза, тъй като по принцип не е развита напълно и абсолютно всички плейъри имат проблем с нея. Все пак, очаквайте подобрения в следващата версия. На последно място искам да спомена и интуитивните клавиши - разполагате с ESC за изход от цял екран, SPACE BAR за Play/Pause (засега само във Full Screen Mode), както и двоен клик на мишока за цял екран и изход от него. Планираме още няколко хоткийя, които да ви накарат да си помислите, че това е десктоп приложение. Като цяло това са нещата, с които можем да се похвалим засега и честно казано в момента те правят FryPlayer напълно пълноценен и готов за ползване. Вероятно се питате защо плейърът е с криптиран javascript, след като е напълно свободен за ползване? Причината е, че ние обичаме да докарваме нещата до край (питайте мацките) и обичаме да го правим професионално. Ето защо решихме, че на този етап е по-добре кодът да остане заключен, за да може да го усъвършенстваме и евентуално в някоя от бъдещите версии да пуснем FryPlayer като open-source. Не е ясно това кога ще се случи, тъй като сме си направили списък с фийчъри до версия 0.5 и отделно ще има да чистим бъгове.
FryPlayer се поддържа от актуалните версии (препоръчително) на Firefox, Opera, Chrome и Safari, както и от всички знайни и незнайни HTML5 съвместими браузъри (скоро ще видим IE9 какво ще каже). Поддържаните кодеци са H.264, Theora и VP8 (WebM), като отново за повече информация ще ви препоръчаме да прочетете изчерпателния урок за създаване на HTML5 плейър.
Надяваме се с тази кратка презентация да сме успели да грабнем вниманието ви. Далеч сме от мисълта, че това е най-прекрасният плейър на света, но ще се опитаме да го направим такъв. На този етап вероятно ще има доста бъгове, тъй като си нямаме бета тестери, но точно поради тази причина ще сме ви благодарни, ако оставяте коментари или тук или в сайта на плейъра. Ще се опитаме да ги отстраним колкото се може по-бързо и съответно да извадим версия 0.2 в най-скоро време. В бъдещите версии ще наблегнем и на мобилната поддръжка, въпреки че там е по-голяма манджа и от настолните еквиваленти.
Но предполагам вече започва да ви доскучава и за това ви представям самия FryPlayer в целия си блясък! Междувременно се насладете и на прекрасния трейлър на Sucker Punch! Нищо не се разбира, но е радост за окото. Решили сме да правим рокади на трейлърите с цел свежо съдържание на сайта, така че ще обновяваме с нови, ако се появят достатъчно готини.
В днешно време средностатистическият интернет потребител трудно би си представил мрежата без видео. В голям процент от случаите, търсеният от вас резултат ви предоставя видео, независимо дали го желаете или не. Четете новини? Много вероятно да попаднете на видеорепортаж. Търсите музика? Ще ви се предложи видеоклип. Четете ревю на игра? Сто процента ще видите, както скрийншоти от нея, така и трейлър. Готварство, риболов, туризъм, мода, автомобили... навсякъде имаме видеоматериали, които само чакат да бъдат изгледани. Точно поради тази причина видеото в интернет отдавна се е утвърдило, като незаменима част от него.
Досега представянето на видео ставаше основно по един начин - чрез flash video player (затварям си очите за QuickTime). Доскоро това не пречеше на никой, но напоследък, особено след разгорещилите се страсти между между Apple и Adobe, въпросът започна да се повдига много често. Apple и техните "ай" продукти, ограничават достъпа на потребителите до флаш и по този начин те не могат да се наслаждават на сайтовете, които го използват, а повярвайте те са доста. Това си има разумна причина и може да прочетете страхотните думи на Стийв Джобс тук.
И точно както Камерън и неговият Аватар поставиха началото на нова 3D ера в киното, така и г-н Джобс с iPad/Phone/Pod са на път да ускорят процеса на преминаване към ново поколение видео плейъри. С други думи, този своеобразен монопол наложен от Adobe е на път да се пречупи, тъй като на хоризонта се задава силуетът на друг каубой. Да, познахте - това е HTML5, препускащ на своя жребец. За жалост въпреки устрема му, този галоп ще продължи известно време, така че все още нашият каубой денем ще се лута в пуснията, а нощем ще седи край огъня с консерва боб в ръка.
Разбира се, както казах в някои от предишните статии, това че новите технологии все още не са във финалната си фаза, не означава, че не можем да ги ползваме и по този начин да движим целия процес към успешен завършек. Това е причината да пишем втория урок за HTML5. Ако сте пропуснали Основи на HTML5, в който добре е обяснена логиката на новия стандарти и основните тагове, то може да хвърлите едно бързо око.
Но стига толкова общи приказки, представям на вашето внимание, негово величество <video>! В тази статия ще се опитам да подбера и сортирам не само най-важното и ценното за новия таг, но и за това как да си направим базов видеоплейър с HTML5. Естествено всичко това ще го представя по колкото се може по-разбираем начин.
