Używanie HTML5 do wyświetlania wideo w bieżących przeglądarkach

Hosting własnego wideo HTML 5 kontra Korzystanie z YouTube

YouTube to świetna witryna. Ułatwia osadzanie wideo w strony internetowe szybko i, z kilkoma drobnymi wyjątkami, jest dość płynny w wykonywaniu tych filmów. Jeśli opublikujesz film na YouTube, możesz być pewien, że każdy będzie mógł go obejrzeć.

Ale korzystanie z YouTube do osadzania filmów ma pewne wady

Większość problemów z Youtube są po stronie konsumenta, a nie projektanta, takie rzeczy jak:

• Powolne wyszukiwanie i indeksowanie
• Awarie serwera
• Treści usuwane (pozornie) arbitralnie
• Za dużo złych treści

Istnieją jednak pewne powody, dla których YouTube jest szkodliwy również dla twórców treści, w tym:

• Maksymalna długość 10 minut dla filmów (w przypadku kont bezpłatnych)
• Słaba wydajność przesyłania
• YouTube zyskuje nieograniczone prawa do użytkowania Twojego filmu
• Każdy użytkownik YouTube otrzymuje nieograniczone prawa do użytkowania Twojego filmu

Wideo HTML5 ma pewne zalety w porównaniu z YouTube

Za pomocą HTML5 for video pozwala kontrolować każdy aspekt filmu, kto może go oglądać, jak długo trwa, co zawiera treść, gdzie jest hostowany i jak działa serwer. I HTML5 daje możliwość zakodowania wideo w tylu formatach, ile potrzebujesz, aby mieć pewność, że może go oglądać maksymalna liczba osób. Twoi klienci nie potrzebują wtyczki ani czekania, aż YouTube wyda nowszą wersję.

Oczywiście wideo HTML5 ma pewne wady

Obejmują one:

• Musisz zakodować swój film w co najmniej trzech różnych kodekach.
• Musisz dołączyć JavaScript, aby upewnić się, że przeglądarki nie obsługują HTML5 będzie działać.
• Twój serwer musi być w stanie obsłużyć wymagania dotyczące przepustowości hostingu filmów.

Szybki przegląd obsługi wideo w Internecie

Dodawanie wideo do stron internetowych od dawna jest trudnym procesem. Było tak wiele rzeczy, które mogły pójść nie tak:

• Najpierw używasz use tag, aby umieścić film na swojej stronie. ALE ten tag jest przestarzały na rzecz innego tagu. A niektóre przeglądarki i tak nigdy nie obsługiwały tego dobrze.
• Więc przełączasz się na tagu, ale starsze przeglądarki go nie obsługują, a nowsze przeglądarki nie obsługują go dość pobieżnie.
• Wtedy myślisz Lampa błyskowa! I zakoduj swój film jako plik FLV. Ale Lampa błyskowa nie jest już obsługiwany na urządzeniach z systemem Windows.
• Decydujesz się więc przesłać swój film do witryny osadzającej wideo, takiej jak YouTube, ale masz problemy z YouTube, o których mówiliśmy.
• Wreszcie decydujesz się na HTML5, ale Internet Explorer go nie obsługuje (nie do Internet Explorer 9). A nawet jeśli to zrobisz, są obsługiwane dwa standardy kodeków wideo i tylko jedna przeglądarka, która może korzystać z obu.

Więc co masz zrobić? Rezygnacja z wideo nie jest już opcją dla większości witryn, ponieważ wideo staje się coraz ważniejsze. Wiele witryn pomyślnie przeszło na wideo.

Na kolejnych stronach tego artykułu dowiesz się, jak dodać wideo do swoich stron internetowych, które działają w Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 i 4, iPhone i Android oraz Internet Explorer 7 i 8. Będziesz mieć również klucze potrzebne do dodania obsługi innych starszych przeglądarek, jeśli to konieczne.

Twórz i edytuj swoje wideo

Pierwszą rzeczą, której potrzebujesz, gdy zamierzasz umieścić wideo na stronie internetowej, jest sam plik wideo. Możesz nagrywać w trybie ciągłym i edytować później, aby utworzyć funkcję, lub możesz ją opisać i zaplanować z wyprzedzeniem. Tak czy inaczej działa dobrze, jest to po prostu to, z czym czujesz się komfortowo. Jeśli nie wiesz, jaki rodzaj wideo powinieneś nagrać, zapoznaj się z poniższymi pomysłami w Przewodniku wideo na komputery stacjonarne:

• Rodzinne projekty wideo
• Filmy marketingowe i promocyjne
• Wideo Wirtualne Wycieczki
• Jak oglądać filmy
• Filmy ślubne

Dowiedz się, jak nagrywać wysokiej jakości wideo

Upewnij się, że wiesz, jak nagrywać w pomieszczeniach i na zewnątrz, a także jak nagrywać dźwięk. Bardzo ważne jest również oświetlenie — zbyt jasne ujęcia ranią oczy, a zbyt ciemne wyglądają po prostu na zabłocone i nieprofesjonalne. Nawet jeśli planujesz mieć tylko 30-sekundowy film w swojej witrynie, im wyższa jakość, tym lepiej będzie odzwierciedlić się w Twojej witrynie.

Pamiętaj też, że prawa autorskie dotyczą wszelkich dźwięków lub muzyki (a także materiałów filmowych), których możesz chcieć użyć w swoim filmie. Jeśli nie masz dostępu do znajomego, który może dla Ciebie napisać i zagrać piosenkę, musisz znaleźć muzyka bez tantiem grać w tle. Są też miejsca, w których możesz dodać materiał filmowy do swoich filmów.

Edycja wideo

Nie ma znaczenia, jakiego oprogramowania do edycji używasz, o ile je znasz i potrafisz z niego efektywnie korzystać. Gretchen, Przewodnik po filmach na komputery stacjonarne, zawiera kilka profesjonalnych wskazówek dotyczących edycji wideo, które mogą pomóc w edytowaniu filmów tak, aby wyglądały świetnie.

Zapisz swoje wideo do MOV lub AVI (lub MPG, CD, DV)

Przez resztę tego samouczka zakładamy, że masz wideo zapisane w jakimś formacie wysokiej jakości (nieskompresowanym), takim jak AVI lub MOV. Chociaż możesz używać tych plików w takiej postaci, w jakiej są, napotykasz wszystkie problemy z filmem, które już omówiliśmy. Na kolejnych stronach wyjaśniono, jak przekonwertować plik na trzy typy, aby był widoczny dla największej liczby przeglądarek.

Konwertuj wideo na Ogg dla Firefoksa

Pierwszym formatem, do którego dokonamy konwersji, jest Ogg (czasami nazywany Ogg-Theora). Ten format jest dostępny dla wszystkich przeglądarek Firefox 3.5, Opera 10.5 i Chrome 3.

Niestety, chociaż Ogg obsługuje przeglądarki, wiele znanych programów wideo, które można kupić (Adobe Media Encoder, QuickTime itp.) nie oferuje opcji konwersji Ogg. Jedynym sposobem na przekonwertowanie wideo do formatu Ogg jest znalezienie programu do konwersji w Internecie.

Opcje konwersji

Istnieje narzędzie online o nazwie Media-Convert, które twierdzi, że konwertuje różne formaty wideo (i audio) na inne formaty wideo (i audio). Kiedy wypróbowaliśmy go z moim 3-sekundowym filmem testowym, nie mogliśmy go uruchomić na moim Macu. Ale możesz mieć więcej szczęścia. Ta strona ma tę zaletę, że jest darmowa.

Niektóre inne narzędzia, które znaleźliśmy, obejmują:

• Konwerter wideo Miro (Windows Macintosh): Zaletą tego programu jest konwersja zarówno do formatu Ogg, jak i MP4 (H.264) i jest to oprogramowanie typu open source.
• Darmowy konwerter wideo: Uważamy, że ma to zarówno wersję Windows, jak i Macintosh, ale trudno było to stwierdzić na ich stronie
• Prosty koder Theora (Macintosh): To jest ten, którego zwykle używamy.

Po zapisaniu filmu w formacie Ogg zapisz go w lokalizacji w swojej witrynie i przejdź do następnej strony, aby przekonwertować go na inne formaty dla innych przeglądarek.

Konwertuj wideo na MP4 dla Safari i Internet Explorer

Następnym formatem, na który należy przekonwertować wideo, jest MP4 (wideo H.264), aby można je było odtwarzać w przeglądarce Internet Explorer 9 i nowszych, Safari 3 i 4 oraz iPhonie i Androidzie.

Ten format jest łatwiej dostępny w produktach komercyjnych i prawdopodobnie masz już program, który konwertuje do formatu MP4, jeśli masz edytor wideo. Jeśli masz Premiera adobe możesz użyć Adobe Video Encoder lub jeśli masz QuickTime Pro, który również działa. Wiele konwerterów, o których rozmawialiśmy na poprzedniej stronie, konwertuje również filmy na MP4.

• MediaConvert: internetowe narzędzie AWS.
• Konwerter wideo Miro (Windows Macintosh): Zaletą tego programu jest konwersja zarówno do formatu Ogg, jak i MP4 (H.264) i jest to oprogramowanie typu open source.
• WSPANIAŁY (Windows): Konwertuje wiele różnych typów plików na MP4
• Darmowy konwerter wideo: Uważamy, że ma to zarówno wersję Windows, jak i Macintosh, ale trudno było to stwierdzić na ich stronie.

Dodaj element wideo do swojej strony internetowej

1. Utwórz swoją stronę internetową tak, jak zwykle:

2. Wewnątrz ciała umieść
3. Zdecyduj, jakie atrybuty chcesz mieć w swoim filmie: zalecamy użycie elementów sterujących i wstępnego ładowania. Użyj opcji plakatu, jeśli Twój film nie ma dobrej pierwszej sceny.
   autoodtwarzanie - aby rozpocząć zaraz po pobraniu
4. sterowanie - pozwól swoim czytelnikom kontrolować wideo (pauza, przewijanie do tyłu, przewijanie do przodu)
5. pętla - rozpocznij wideo od początku po jego zakończeniu
6. preload - wstępnie pobierz film, aby był gotowy szybciej, gdy klient go kliknie
7. plakat - określ obraz, którego chcesz użyć po zatrzymaniu wideo
8. Następnie dodaj pliki źródłowe dla dwóch wersji swojego wideo (MP4 i OGG) w
9. Otwórz stronę w Chrome 1, Firefox 3.5, Opera 10 i/lub Safari 4 i upewnij się, że wyświetla się poprawnie. Powinieneś go przetestować przynajmniej w Firefox 3.5 i Safari 4 - ponieważ każdy z nich używa innego kodeka.

Otóż ​​to. Po umieszczeniu tego kodu otrzymasz film, który działa w przeglądarkach Firefox 3.5, Safari 4, Opera 10 i Chrome 1. Ale co z Internet Explorerem?

Używanie HTML 5 do dodawania wideo do stron internetowych jest bardzo łatwe. Większość nowoczesnych przeglądarek obsługuje wideo HTML 5, chociaż nie wszystkie obsługują je w ten sam sposób. Ale oznacza to, że jeśli zapiszesz wideo zarówno w formacie Ogg, jak i MP4, możesz napisać tylko cztery lub pięć wierszy kodu HTML, aby wyświetlić je w większości nowoczesnych przeglądarek (z wyjątkiem Internet Explorer 8). Oto jak:

Napisz znacznik doctype HTML 5, aby przeglądarki wiedziały, że oczekują HTML 5:

1. Utwórz swoją stronę internetową tak, jak zwykle:

2. Wewnątrz ciała umieść
3. Zdecyduj, jakie atrybuty chcesz mieć w swoim filmie: zalecamy użycie elementów sterujących i wstępnego ładowania. Użyj opcji plakatu, jeśli Twój film nie ma dobrej pierwszej sceny.
   autoodtwarzanie - aby rozpocząć zaraz po pobraniu
4. sterowanie - pozwól swoim czytelnikom kontrolować wideo (pauza, przewijanie do tyłu, przewijanie do przodu)
5. pętla - rozpocznij wideo od początku po jego zakończeniu
6. preload - wstępnie pobierz film, aby był gotowy szybciej, gdy klient go kliknie
7. plakat - określ obraz, którego chcesz użyć po zatrzymaniu wideo
8. Następnie dodaj pliki źródłowe dla dwóch wersji swojego wideo (MP4 i OGG) w
9. Otwórz stronę w Chrome 1, Firefox 3.5, Opera 10 i/lub Safari 4 i upewnij się, że wyświetla się poprawnie. Powinieneś go przetestować przynajmniej w Firefox 3.5 i Safari 4, ponieważ każdy z nich używa innego kodeka.

Otóż ​​to. Po umieszczeniu tego kodu otrzymasz film, który działa w przeglądarkach Firefox 3.5, Safari 4, Opera 10, Internet Explorer 9+ i Chrome 1.

Przetestuj w tylu przeglądarkach, ile możesz

Dla spokoju ducha powinieneś również przetestować w starszych przeglądarkach, aby zobaczyć, co robią, zwłaszcza jeśli wielu czytelników korzysta ze starszych przeglądarek.

Testowanie stron wideo ma kluczowe znaczenie dla pomyślnego uruchomienia. Koniecznie przetestuj swoją stronę w najpopularniejszych przeglądarkach i wersjach dla Twojej witryny.

Odkryliśmy, że chociaż do testowania wideo można używać narzędzi takich jak BrowserLab i AnyBrowser, nie jest to tak niezawodne, jak samodzielne otwieranie strony w przeglądarce. Kiedy to zrobisz, możesz naprawdę zobaczyć, czy to działa, czy nie.

Ponieważ zadałeś sobie trud, aby zakodować swój film w wielu formatach, powinieneś go przetestować, aby upewnić się, że wyświetla się w wielu przeglądarkach. Oznacza to, że przynajmniej powinieneś przetestować go w Firefox, Safari i IE.

Dla spokoju ducha powinieneś również przetestować w starszych przeglądarkach, aby zobaczyć, co robią, zwłaszcza jeśli wielu czytelników korzysta ze starszych przeglądarek.

Uruchamianie wideo w starszych przeglądarkach

Podobnie jak w przypadku każdej strony internetowej, należy najpierw zastanowić się, jak ważne jest, aby te przeglądarki działały. Jeśli 90% Twoich klientów korzysta z Netscape, powinieneś mieć dla nich plan awaryjny. Ale jeśli mniej niż 1% to robi, może to nie mieć większego znaczenia.

Po podjęciu decyzji, jakie przeglądarki zamierzasz obsługiwać, najłatwiejszym sposobem jest po prostu utworzenie alternatywnej strony, w której będą mogli oglądać wideo. Na tej alternatywnej stronie osadziłbyś wideo za pomocą HTML 4. A następnie użyj jakiejś formy wykrywania przeglądarki, aby przekierować ich tam, lub po prostu dodaj link do tej strony na tej.