Filmy HTML5 10 rzeczy, które projektanci muszą wiedzieć

Rewolucja HTML5 to ekscytujący projektanci stron internetowych ze wszystkich części świata. Nowe specyfikacje obsługują dziesiątki elementów i atrybutów do tworzenia stron semantycznych. Te nowe funkcje obejmują tagi multimedialne dla formatów audio i wideo.

W ostatnich latach odtwarzacz multimedialny oparty na technologii Flash był więcej niż wystarczający do przesyłania strumieniowego w Internecie, a ta technologia jest nadal niezbędna do obsługi starszych przeglądarek. Ale na szczęście nowoczesne standardy się rozwinęły, a włączenie wideo HTML5 otwiera drzwi dla dziesiątek nowych możliwości.

W tym przewodniku chciałbym przedstawić wprowadzenie do wideo HTML5 w Internecie. Zrozumienie rodzimego odtwarzacza w przeglądarce i wszystkich jego funkcji zajmie trochę czasu. Najlepszym sposobem na poznanie się jest najpierw nurkowanie w głowie!

1. Rodzaje mediów

Podczas pracy z odtwarzaczem wideo flash zbyt często kojarzy się wszystkie formaty wideo w pliku .flv. Chociaż to działa, większość plików flv nie może zachować jakości w pobliżu bardziej zaawansowanych formatów plików / kodeków. Istnieją 3 ważne typy wideo obsługiwane przez HTML5: MP4, WebM i Ogg / Ogv. Typ pliku MPEG-4 jest ogólnie zakodowany w H.264, co pozwala na odtwarzanie w odtwarzaczach Flash innych producentów. Oznacza to, że nie musisz przechowywać kopii wideo .flv, aby obsługiwać metodę awaryjną! WebM i Ogg to dwa znacznie nowsze typy plików związane z wideo HTML5. Ogg używa kodowania Theora opartego na standardowym formacie pliku audio o otwartym kodzie źródłowym. Można je zapisać z rozszerzeniem .ogg lub .ogv.

WebM to projekt opracowany przez Google, który możesz przeczytać więcej na stronie internetowej WebM Project. Format jest już obsługiwany przez Operę, Google Chrome, Firefox 4+, a ostatnio także Internet Explorer 9. Nadal nie jest znany przez większość specjalistów internetowych, ale WebM jest wiodącym formatem multimediów wideo w przyszłości wideo internetowego.

2. Obsługa przeglądarki

Które z tych typów plików potrzebujesz na swojej stronie? Cóż, idealnie wszystkie 3 byłyby świetne, ponieważ zapewniają pełne spektrum wsparcia. Nie jest to jednak realistyczne i w rzeczywistości można objąć wszystkie bazy tylko dwoma. Oto zestawienie tego, co działa dla każdej przeglądarki:

Mozilla Firefox - WebM, Ogg
Google Chrome - WebM, Ogg
Opera - WebM, Ogg
Safari - MP4
Internet Explorer 9 - MP4
Internet Explorer 6-8 - Brak HTML5, tylko Flash!

Jeśli pamiętasz, wcześniej wspomniałem, że większość odtwarzaczy wideo Flash obsługuje pliki MP4, o ile są one kodowane w H.264. W związku z tym każda z tych przeglądarek osadzi MP4 + Flash jako ostateczny ośrodek. Oznacza to, że musisz tylko utworzyć dwa różne formaty wideo obsługujące wszystkie przeglądarki. MP4 dla Safari / IE9 i wybór między WebM lub Ogg dla reszty.

Moim zdaniem bardzo polecam trzymanie się formatu WebM. Ma za sobą kilka wielkich nazwisk (mianowicie Google) i zyskał dużą popularność w społeczności HTML5. Ogg / Ogv będzie wspierany, ale najprawdopodobniej straci popularność na mniejszych rozmiarach plików WebM. Możesz przeczytać pokrewny artykuł na temat przyszłości wideo w Internecie napisany przez Seana Gollihera.

3. Osadzanie prostych filmów HTML5

Przyjrzyjmy się teraz składni wymaganej do osadzenia przykładowego kodu. Wszystko, czego potrzebujemy, to tag wideo HTML5, aby odwołać się do każdego adresu URL filmu.

Zwróć uwagę na sterownica i Automatyczne odtwarzanie atrybuty nie muszą być ustawione z żadnymi wartościami. Ja również włączyłem plakat atrybut, który wczytuje obraz na odtwarzacz wideo przed transmisją strumieniową. Jest to wspólny podgląd wielu graczy internetowych.

Oferujemy zarówno formaty MP4, jak i WebM do elementu wideo. Jeśli żaden z nich nie może zostać załadowany, wyświetlamy błąd, aby użytkownik zaktualizował swoją przeglądarkę.

4. Oferowanie Flash Fallback

Powyższy przykład jest idealny dla wszystkich zgodnych ze standardami przeglądarek internetowych. Jednak musimy również wziąć pod uwagę, że świat nie zawsze jest najnowocześniejszy w technologii. Musimy wspierać użytkowników w starszych wersjach Safari, Mozilla Firefox, a zwłaszcza Internet Explorer.

Najlepszym sposobem osiągnięcia tego celu jest skorzystanie z odtwarzacza awaryjnego Flash. Można je dodać za pomocą osadzać lub obiekt znaczniki do odniesienia do pliku .swf strony trzeciej. JW Player i Flowplayer to dwa bezpłatne rozwiązania open source, które możesz rozważyć. Ale sprawdź także najlepsze odtwarzacze wideo na ActiveDen, które mogą być tak tanie, jak 15- 20 USD.

Teraz poprawmy powyższy kod, aby zawierał awaryjny odtwarzacz Flash obsługujący prawie każdą istniejącą przeglądarkę.

5. Obsługa urządzeń mobilnych

Ten temat jest nadal bardzo dyskutowany, ponieważ branża mobilna jest tak młoda. Firma Apple wyszła z obsługą MP4 na urządzeniach Mac i iOS. Oznacza to, że możesz natywnie przesyłać pliki wideo .mp4 na iPadzie, iPhonie lub iPodzie Touch w standardowym interfejsie wideo. Obejmuje to znaczny udział w rynku.

Ostatnio urządzenia z Androidem miały trudności z uzyskaniem tego samego poziomu wsparcia. Google w końcu przyjął transmisję internetową .mp4, która teraz wykorzystuje niemal wszystkich użytkowników mobilnych. A ponieważ Flash nie jest tutaj opcją, MP4 jest najlepszym dostępnym rozwiązaniem. Dlatego chcesz najpierw osadzić kod .mp4, aby urządzenia z systemem iOS mogły natychmiast rozpoznać plik.

6. Agent użytkownika Safari

Jednym z błędów, o którym należy wspomnieć, jest błąd między odtwarzaczami Flash a rodzimym strumieniowaniem HTML5 .mp4 na Safari. Ponieważ przeglądarka może obsługiwać oba pliki, możesz mieć problem z uzyskaniem strumienia wideo HTML5 zamiast Flash. Jednak dzięki temu świetnemu wpisowi na blogu w TUAW łatwo jest zmienić agenta użytkownika przeglądarki.

Zmusi to twoją stronę internetową do rozpoznania przeglądarki jako działającej na innym urządzeniu. Najprawdopodobniej wybierzesz iPada, który NIE obsługuje żadnego odtwarzania Flash. Jest to jedyny poważny problem, który możesz napotkać podczas testowania natywnych i flashowych metod MP4.

7. Zarządzaj kontrolkami gracza

Wierzcie lub nie, ale są też metody, których można użyć do manipulowania kontrolkami odtwarzacza wideo HTML5. Wszystko to można zrobić w JavaScript, korzystając z zestawu otwartych metod. Jest tu o wiele za dużo, aby je tutaj wymienić, ale spróbuj przejrzeć dokumenty dotyczące elementów multimedialnych W3C, aby uzyskać więcej szczegółów.

Aby dać ci ogólny pomysł, blog Opera Opera opublikował kilka krótkich samouczków, które są idealne dla początkujących. Nawet jeśli nigdy wcześniej nie korzystałeś z JavaScript lub jQuery, nadal możesz łatwo uruchomić ten program. Możesz wywoływać określone atrybuty nośników wideo, takie jak wyciszony lub Obecny czas. Następnie można wykonać działania (przyciemnić tło, reklamy graficzne) na podstawie tych kryteriów, manipulując DOM w jQuery.

Ten sam programista w artykule Opera zapewnia działającą wersję demonstracyjną ich skryptowego odtwarzacza wideo. Możliwość dostosowania własnych kontrolek interfejsu użytkownika jest wyjątkowa. To pokazuje, jak potężne staje się wideo HTML5.

8. Konwersja formatu wideo

Jest to kolejny duży problem, który prawdopodobnie wprowadzi w błąd osoby o mniejszym doświadczeniu technicznym. Chcesz po prostu zwiększyć swoją stronę i przesyłać strumieniowo, a teraz masz do czynienia z konwersją filmów? Właściwie to nie jest takie trudne.

Aby poradzić sobie z MP4, który jest Twoim największym priorytetem, możesz użyć HandBrake, który jest bezpłatnym, otwartym oprogramowaniem, które działa na wszystkich 3 głównych systemach operacyjnych. Będzie obsługiwać H.264 wraz z kilkoma innymi kodekami, co sprawia, że jest to najlepsza opcja dla użytkowników freebie. Jeśli masz pieniądze, aby wydać pieniądze, muszę polecić konwerter Xilisoft, który znajduje się w sklepie Mac App Store za jedyne 40 USD dożywotniej licencji.

Wygląda na to, że trasa WebM ułatwia życie. Miro Video Converter to darmowe narzędzie dla systemu Windows i OS X, które tworzy wspaniałe pliki WebM. Może również tworzyć kodowanie Ogg Theora, które wychodzi z bardzo dobrą jakością.

9. Budowanie odtwarzacza internetowego

Formaty wideo ze specyfikacjami HTML5 są wciąż nowe dla programistów. Istnieją otwarte protokoły, które czekają na odtworzenie, aby umożliwić niestandardowe kontrolki, suwaki, ikony odtwarzania / pauzy itp. Jeśli czujesz się odważny, sprawdź ten samouczek dotyczący tworzenia własnego odtwarzacza HTML5 (opublikowanego na Splashnology).

Kod jest nieco intensywny dla nowicjuszy, ponieważ wymaga zaawansowanego targetowania CSS i trochę formalnego jQuery. Istnieją także inne struktury, na których można już zbudować niestandardowy projekt odtwarzacza. Podobnie ta prezentacja slajdów jest świetnym wstępem do budowania odtwarzacza wideo HTML5.

Budowanie odtwarzacza wideo HTML5

10. Biblioteka VideoJS

VideoJS jest prawdopodobnie moim ulubionym rozwiązaniem dla odtwarzaczy wideo HTML5. Wszystko czego potrzebujesz to ich własny hostowany arkusz stylów JavaScript i CSS umieszczony gdzieś w twoim dokumencie. Następnie piszesz standardowy kod wideo HTML5 z dodatkowymi klasami do skórowania. Dodałem ich przykładowy kod poniżej:

Jeśli zdarzy ci się uruchomić blog WordPress, możesz również wypróbować własną wtyczkę WP. Będzie automatycznie zawierać bibliotekę js / css na stronach, na których wyświetla się wideo HTML5. Możesz to zrobić z dowolnego postu lub edytora stron przy użyciu skrótów (patrz tutaj).

Wniosek

Mam nadzieję, że ten przewodnik wprowadzający może wzbudzić Twoje zainteresowanie przyszłością wideo internetowego. Ponieważ coraz więcej użytkowników zwraca się do urządzeń mobilnych, ważne jest, aby standardy HTML5 zostały przyjęte dla tego typu mediów. Sieć powinna być prostsza, aby programiści mogli szybciej tworzyć w pełni obsługiwane rozwiązania. Chcielibyśmy usłyszeć Twoje pomysły i sugestie dotyczące przyszłości wideo HTML5. Jeśli chcesz się podzielić, możesz zostawić komentarz w obszarze dyskusji na temat postów poniżej.