Здравейте, здравейте!
Изключително сме радостни да ви представим първия самостоятелен проект, маркиран с логото на 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! Нищо не се разбира, но е радост за окото. Решили сме да правим рокади на трейлърите с цел свежо съдържание на сайта, така че ще обновяваме с нови, ако се появят достатъчно готини.
[ Официален сайт ] [ Свали FryPlayer ]
Чудесно! Ще го разгледам когато намеря свободно време.
Докато не отстранят различията си между кодеците за уеб, Flash ще печели битката за уеб видеото. Бива ли да има три различни формата за видео? А Internet Explorer ако решат и те да се правят на утрепани?
не съм се ровил за други такива но този определено работи много гладко на пръв поглед...
евала!
Брилянтно! Само едно - две предложения:
Защо не добавите CSS-а към DOM при инициализация на плеъра, вместо да карате потребителя да го прави?
Не знам дали ще работи, но ми се струва добра идея първоначално video елемента да има атрибут controls, който да бъде премахнат от кода на плеъра. Така ако потребителят няма JavaScript, видеото пак ще може да се гледа.
Решихме да изпълним плана за версия 0.1 и да добавяме промените в следващите версии, защото доста неща ни дойдоха на ум, но няма как всичко да се направи от раз. Надяваме се скоро да ви зарадваме с нова версия и нови подобрения. Определено ще включим това за controls, добра идея :)
Не ми се чете статията но видеото заредено в плеъра сече като за световно (главно звука се повтаря потретва) а видео картата ми е HD, и нета е добър не е от връзката, също така на цял екран се зарежда само в браузъра а не на истински цял екран и след като го минимизираш копчетата за звука и за цял екран изчезнаха мистериозно. Браузъра ми е Opera последна версия. Така че поработете още малко и вече ако работи както трябва ще четем каква сте я свършили и тогава ще оценяваме. Успехи
Първо да си кажа, че изобщо не ми допадна наглото ти мнение. Но все пак идеята е да си помагаме, така че ще ти отговоря изчерпателно.
Плейърът е тестван на мощни и слаби машини, на над 10 браузъра и поне две операционни системи - върви отлично. Единственият проблем, който видях до момента е под Firefox - там видеото не върви гладко, както на останалите браузъри, но това е проблем на самия браузър и работата му с OGG файловете. Пробвай още няколко плейъра и направи база за сравнение. Освен това не е лошо да дефинираш какво ще рече "видеокартата ми е HD". Това окончание обикновено го слагат на супер-бюджетните решения, така че може проблема да е именно в нея. Аз съм с топ модел видео и при мен FF също дава заето доста често, но както казах това се случва при абсолютно всички плейъри.
Видеото не е на цял екран заради сикюрити причини, наложени от самите W3. Ако беше прочел статията щеше да знаеш това. И за да не търсиш и да си губиш времето, специално ти подбрах цитата. Надявам се този път да ти се чете:
User agents should not provide a public API to cause videos to be shown full-screen. A script, combined with a carefully crafted video file, could trick the user into thinking a system-modal dialog had been shown, and prompt the user for a password. There is also the danger of "mere" annoyance, with pages launching full-screen videos when links are clicked or pages navigated. Instead, user-agent specific interface features may be provided to easily allow the user to obtain a full-screen playback mode.
Изчезването на контролите в определени ситуации е известен бъг. Опитваме се да го отстраним от доста време, но го прави на случаен принцип и още не сме разбрали точната причина. Проблемът идва оттам, че искахме да направим контролите изключително гъвкави и добре изглеждащи под всяка резолюция. Едновременно с това искахме да запазим ширината на някои, но например лентата за прогреса да се разтяга. Всичко това обаче изисква някои по-сложни изчисления и явно в определена ситуация нещо се случва. Все пак ще го открием!
В момента на писане на този коментар имам Opera отворена пред мен и тествах плейъра с 1 таб и със 100 таба (разбирай абсолютно сломен браузър) - ефектът е същия - върви отлично, дори съм изненадан, че се справя по-добре от Chrome. Иначе ние че ще поработим - ще поработим. Плейърът има бъгове и кусури за оправяне - още нещо, което пише в статията. Ето защо той е поставен под версия 0.1.
И за финал едно малко пояснение. Къде видя, че трябва да се оценява? Ние го създадохме да се ползва, да се развива, но не и да се оценява. Ако имаш несломимата мечта да бъдеш жури, то не е тук мястото. Дали някой дава 1/10 или 10/10 няма значение, защото ние си знаем, че има още много работа и ще се радваме на свежи предложения, като това на Гонзо. Човекът предложи две дребни корекции, които са ни убягнали, но колкото и да са дребни са си на място. Това за мен е едновремено критика и предложение. Факт е, че си е поиграл достатъчно с плейъра и е обърнал внимание на тези пропуски.
Надявам се да прочетеш коментара ми и да не го приемеш, като заяждане - просто връщам същия тон. А и в цялата дандания взех, че открих още 2 бъга, които вече са оправени и ще намерят място в следващата версия.