WordPress + HTML5 wideo

Moja nie­na­wiść do Flasha w ogól­no­ści a uży­tego do odtwa­rza­nia mediów w szcze­gól­no­ści jest wielka. Od czasu zana­by­cia zaś net­bo­oka — wprost potężna. Nie cier­pię tej tech­no­lo­gii za sku­teczne zabi­ja­nie całej tej skrom­nej ale mimo wszystko wystar­cza­ją­cej do pracy z Lightroomem 3 „mocy” mojego net­bo­oka, który przy pró­bie odtwo­rze­nia głu­piego fil­miku z YouTube w jakiejś mini­mal­nej jako­ści po pro­stu zatyka się na amen. Flash się do stre­amingu mediów nie nadaje i basta.

W mię­dzy­cza­sie powstały nowe stan­dardy, znacz­nie chyba sym­pa­tycz­niej­sze i pozwa­la­jące na unie­za­leż­nie­nie się od Flasha. Właśnie testuję word­pres­sową wtyczkę, któ­rej zada­nie jest jasne i kla­rowne: poda­wać wideo HTML5 style. I zdaje się, że to działa. Testowałem wtyczkę na róż­nych prze­glą­dar­kach i zdaje się, że jakichś więk­szych błę­dów nie ma. Wtyczka nazywa się Degradable HTML5 audio and video Plugin, ma nie­skom­pli­ko­waną skład­nię do uży­cia we wpi­sie i zado­woli wyznaw­ców zarówno kodeka h.264 jak i Theory. Poniższy tra­ile­rek (zresztą cał­kiem nie­źle zapo­wia­da­ją­cego się thril­lerka z tego co widzę) poda­wany jest w zależ­no­ści od prze­glą­darki albo jako plik m4v, albo jako ogg, albo jako stream via fla­showa wtyczka. Rzecz jest i wygląda bar­dzo pod­sta­wowo ale mnie to w zupeł­no­ści wystar­czy. Prosiłbym bar­dzo o pod­rzu­ca­nie uwag o działaniu/niedziałaniu wtyczki — zbiorę to jakoś do kupy i wyślę auto­rowi plu­gina by miał nad czym pra­co­wać. A facet działa szybko i błędy popra­wia z dnia na dzień, co się ogól­nie chwali. No to co, mały seansik?

[video src=„http://dl.dropbox.com/u/1944692/Trailery-filmy/2010.02.04-The_Crazies-Trailer” poster=„http://dl.dropbox.com/u/1944692/Trailery-filmy/2010.02.04-The_Crazies-Trailer.jpg” width=„410” height=„174” format=„m4v ogg” options=„controls”]

Powinno zadzia­łać. Niestety WPtouch jesz­cze tego plu­gina nie obsłu­guje i strona wyświe­tlana za pomocą WPtouch na iPho­nie pokaże spory obra­zek (a bo można sobie posterki jak naj­bar­dziej defi­nio­wać i przed roz­po­czę­ciem odtwa­rza­nia powinny robić za wypeł­nie­nie miej­sca dla fil­miku), który nieco wygląd roz­wali. Zaraz będę kle­pał do twór­ców WPtouch o obsługę tej wtyczki i ska­lo­wa­nie obraz­ków przez nią poda­wa­nych. Nie powinno być chyba jakichś więk­szych pro­ble­mów z tym ale jeśli ktoś jesz­cze requ­esta pode­śle, to może chło­paki szyb­ciej się tym zajmą.

Anyway, pote­sto­wa­łem sobie i szcze­rze mówiąc podoba mi się to hate­eme­lo­pię­ciowe roz­wią­za­nie bar­dzo. Prosto, jasno i przej­rzy­ście można podać fil­mik (i dźwięk bo wtyka obsłu­guje także audio) applo­fi­lowi, linuk­so­fi­lowi i win­dow­so­fi­lowi. Mam nadzieję, że sieć pój­dzie w tym kie­runku i bez­fla­showe poda­wa­nie wideo tam, gdzie fla­sha się nie obsłu­guje lub nie chce, sta­nie się standardem.

Z góry dzięki za feed­back i testy! Jeśli coś nie działa pro­szę o info o sys­te­mie ope­ra­cyj­nym, uży­wa­nej prze­glą­darce i jej wer­sji. To powinno pomóc przy usu­wa­niu ewen­tu­al­nych błę­dów. Szczególnie o wspar­cie pro­szę użyt­kow­ni­ków IE — na moim wir­tu­al­nym Windowsie IE coś pluje o błę­dach choć w sumie wszystko działa jak trzeba…

, , ,

Kilka słów o CoSTa

Mąż, ojciec i w przyszłosci być może właściciel knajpy, w której będzie serwowana tylko wódka, tylko zimna i tylko na butelki.

Socjal

Jeszcze Ci mało? Śledź nas w sieciach społecznościowych...

23 Komentarzy do “WordPress + HTML5 wideo”

  1. matipl 04/02/2010 do 13:44 # Odpowiedz

    Nie sądzi­łem, że pojawi się do tego plu­gin…
    Wtyczka pierw­sza klasa.
    W prze­glą­dar­kach które już obsłu­gują video-tag śmiga aż miło (Firefox, Safari).
    A w IE i Operze wsta­wia flash. Mała uwaga w IE pasek postępu filmu posiada żółtą obwódkę.

    • CoSTa 04/02/2010 do 13:53 # Odpowiedz

      O, dzięki za info. Jednak co Windows, to inne reak­cje :) — na moim wir­tu­al­nym XP z ostat­nim IE nie mam żół­tej obwódki. Sprawdzę jesz­cze na domo­wym net­bo­oku z XP.

      • matipl 04/02/2010 do 13:57 # Odpowiedz

        dokład­nie to XP SP3 + IE8

        Po kilku krot­nym odświe­że­niu strony obwódki nie ma, a Twój life­stream wygląda okej (wcze­śniej całe tło w twit­te­ro­wym t).
        Może CSS zmieniałeś.…

        • matipl 04/02/2010 do 13:57 #

          Jest obwódka…
          Otwieram stronę, uru­cha­miam jest super… Robię alt+tab do Opery, robię alt+tab do IE..i obwódka się poja­wia :/ dziwne

        • CoSTa 04/02/2010 do 14:06 #

          Cholera, tajem­ni­cza sprawa z tą obwódką :). No nic, spraw­dzę jesz­cze na swo­ich XPekach i zoba­czym co to może być.

          Przy oka­zji — jakiś viściarz lub sió­dem­ko­wiec może ist­nie­nie pro­blemu potwierdzić?

  2. SpeX 04/02/2010 do 13:48 # Odpowiedz

    XP+FF3.5.7
    Filmik idzie bez dzwięku.

    Chromium 4.0.260.0 (33251)
    Wszystko działa poprawnie.

    Jak więk­szym kło­po­tem video w html5 jest ogól­nie dostęp­nego hosting video, który by ser­wo­wał bez­po­śred­nio linki do pli­ków. W porów­na­niu z tym jak łatwo można coś wrzu­cić na YouTuba.

    A jak sobie playe radzi jak mu zapo­damu fla­show­ski fil­mik np link do YouTube?

    • matipl 04/02/2010 do 13:50 # Odpowiedz

      pamię­tajmy, ze YouTube testuje HTML5 (youtube.com/html5)

    • CoSTa 04/02/2010 do 14:00 # Odpowiedz

      Spex, ten brak dźwięku to raczej kwe­stia kodeka (braku lub zbyt sta­rego). W FF 3.6 pod OSX i Win pro­ble­mów nie mam żad­nych — uak­tu­al­nij przeglądarkę :)

      Co do hostingu — Można zawsze wydać te kilka zło­tych i po pro­stu sobie nieco miej­sca na np. Dropboxie kupić. Albo po pro­stu wrzu­cać na YouTube (lub Vimeo), które ostat­nio obsługę ele­mentu video wpro­wa­dziło, za co im chwała. Ja wolę jed­nak trzy­mać swoje jajka przy sobie :)

      • SpeX 04/02/2010 do 14:13 # Odpowiedz

        Może to wina tego iż mam otwarte tro­chę zakła­dek :/ Jak coś się zwolni to prze­te­stuję jesz­cze raz.

  3. Nazgul 04/02/2010 do 15:01 # Odpowiedz

    No wtyczka wygląda ciekawie.

    Ale ja cze­kam na to: http://jilion.com/sublime/video to dopiero będzie „nowa jakość w oglą­da­niu fil­mów ze stron ;)

    • CoSTa 04/02/2010 do 15:46 # Odpowiedz

      Ładny play­erek :). Niech od razu zro­bią z tego plu­gina do WP to wezmę z poca­ło­wa­niem ręki.

    • byte 04/02/2010 do 17:52 # Odpowiedz

      Wow! Świetne.

  4. ;) 04/02/2010 do 15:38 # Odpowiedz

    nie­zly lol

    Obrabiasz rawy /bo do tego sluzy lightroom/ oraz two­rzysz ich zbiory na net­bo­oku i narze­kasz na flasha?

    Na nor­mal­nym lap­to­pie import kil­ku­dzie­sie­ciu pli­kow do ligh­tro­oma i pozniej­sza ich obrobka to nie­zly stres dla calego sys­temu, wla­cze­nie gry czy fil­miku w prze­gla­darce jest przy tym pikusiem.

    Tak wiec jestes dla mnie mistrzem opty­ma­li­za­cji
    powi­nie­nes czym pre­dzej wydac alma­nach jak usta­wic lig­tro­oma by kom­for­towo obra­biac cyfrowe nega­tywy na net­bo­okach — sam kupie za 100 nawet.

    • CoSTa 04/02/2010 do 15:48 # Odpowiedz

      Ależ żaden pro­blem, kilka zaawan­so­wa­nych tip­sów w tema­cie jak sobie umi­lić pracę z LR pod­rzucę. Zaraz po prze­le­wie na moje konto 1200 zło­ci­szy naszych pol­skich. Na tyle sobie moje tipsy wyceniam.

      I tak, wyobraź sobie, narze­kam na Flasha.

  5. zx 04/02/2010 do 23:59 # Odpowiedz

    Na naj­now­szej Operze bez problemów.

  6. PeterCub 05/02/2010 do 17:16 # Odpowiedz

    IE8 WinXP Pro ze wszyst­kimi wtycz­kami aktu­ali­za­cjami itp, błąd: „Wiadomość: ‘J.parentNode’ jest pusty lub nie jest obiek­tem
    Wiersz: 5
    Znak: 1913
    Kod: 0
    Identyfikator URI: http://costa.info.pl/wp-includes/js/swfobject.js?ver=2.1

  7. szuman 07/02/2010 do 00:18 # Odpowiedz

    widać, w swoim podej­ściu do fla­sha nie jestem osa­mot­niony. Ale wąt­pię, by tag video wyparł fla­sha — przy­naj­mniej w naj­bliż­szym czasie.

  8. CoSTa 10/02/2010 do 18:11 # Odpowiedz

    OK, dzięki kochani za feed­back — nieco nam się z Pavlem w ostat­nim cza­sie maile roz­grzały i w mię­dzy­cza­sie wtyczka docze­kała się dwóch popra­wek. Na WPtouch trzeba będzie jesz­cze nieco pocze­kać ale też powinno się dać to jakoś zro­bić. Anyway, kolejne poprawki w dro­dze a Pavel klnie jak szewc na obsługę taga video przez prze­glą­darki. Póki co naj­le­piej robi to zde­cy­do­wa­nie Firefox, reszta to jakaś wypad­kowa dziw­nego prze­strze­ga­nia standardów :)

  9. SpeX 12/04/2010 do 07:55 # Odpowiedz

    Ta wtyczka nie ma żad­nych usta­wień? Ani nie dodaje swo­ich przy­ci­sków do edy­cji postów?

    • CoSTa 12/04/2010 do 09:25 # Odpowiedz

      Wtyczka nie ma żad­nych usta­wień w panelu admi­ni­stra­cyj­nym. Niestety, wtyczka nie dodaje swo­ich przy­ci­sków do edy­cji postu.

      • SpeX 12/04/2010 do 12:06 # Odpowiedz

        Czyli trzeba strze­lać kodami z pamięci :/

        A tak z innej beczki, jak prze­glą­darka nie obsłu­guje html5, to w czym jest wyświe­tlany film/audio?

        Oraz szkoda iż wtyczka sama nie wyciąga linku do mate­riału z popu­lar­nych ser­wi­sów wideo jak YT czy Video.

        • CoSTa 13/04/2010 do 06:09 #

          Ano nie­stety trzeba strze­lać z pamięci.

          Gdy prze­glą­darka nie obsłu­guje tagu video, wtyczka robi fal­l­back do play­era fla­sho­wego i mate­riał jest odtwa­rzany via Flash.

          Co do obsługi YT czy Vimeo — napisz auto­rowi wtyczki suge­stię. Koleś jest pra­co­wity, więc może z cza­sem wszystko co trzeba się we wtyczce pojawi.

Trackbacki/Pingbacki

  1. Już rozumiem, o co chodzi niektórym z tym Flashem. « TransBlog - 23/04/2010

    […] w taki spo­sób zro­zu­mia­łem, czemu nie­któ­rzy tak ocze­kują tagu Video w HTML5. Choć nie rozu­miem, po co ta wojna for­ma­tów (H.264 vs Theora) mię­dzy prze­glą­dar­kami. Czemu po […]

Dodaj komentarz