Tag wideo HTML5 ułatwia dodawanie wideo do stron internetowych. Ale chociaż wydaje się łatwe na powierzchni, istnieje wiele rzeczy, które musisz zrobić, aby uruchomić i uruchomić wideo. Ten samouczek poprowadzi Cię przez kolejne etapy tworzenia strony w HTML5, która uruchomi wideo we wszystkich nowoczesnych przeglądarkach.
- Prowadzenie własnego filmu HTML5 a korzystanie z YouTube
- Szybki przegląd obsługi wideo w Internecie
- Twórz i edytuj swoje wideo
- Konwertuj wideo na Ogg dla przeglądarki Firefox
- Konwertuj wideo na MP4 dla Safari
- Konwertuj wideo na FLV dla Internet Explorera
- Dodaj element wideo do swojej strony internetowej
- Dodaj JavaScript i Flash Player, aby uruchomić program Internet Explorer
- Testuj jak najwięcej przeglądarek
Hostowanie własnego wideo HTML 5 a korzystanie z YouTube
YouTube to świetna witryna. Ułatwia to szybkie umieszczanie wideo na stronach sieci Web, a poza niewielkimi wyjątkami jest dość płynne w wykonaniu tych filmów. Jeśli publikujesz film na YouTube, możesz mieć pewność, że każdy będzie mógł go obejrzeć.
Ale używanie YouTube do osadzania filmów ma pewne wady
Większość problemów związanych z YouTube jest po stronie konsumenta, a nie po stronie projektanta, takich jak:
- Powolne wyszukiwanie i indeksowanie
- Przerwy w działaniu serwera
- Treść usuwana (pozornie) arbitralnie
- Za dużo złej treści
Ale są też powody, dla których YouTube jest zły także dla twórców treści, w tym:
- 10-minutowa maksymalna długość filmów (dla darmowych kont)
- Słaba wydajność przesyłania
- YouTube zyskuje nieograniczone prawa do użytkowania Twojego filmu
- Każdy użytkownik YouTube uzyskuje nieograniczone prawa do użytkowania Twojego filmu
Film HTML5 daje pewne korzyści w YouTube
Używanie HTML5 do filmów pozwoli ci kontrolować każdy aspekt Twojego filmu, od tego, kto może go oglądać, ile to trwa, co zawiera zawartość, gdzie jest hostowany i jak działa serwer. Filmy wideo w formacie HTML5 umożliwiają kodowanie wideo w dowolnej liczbie formatów, aby upewnić się, że maksymalna liczba osób może je wyświetlić. Twoi klienci nie potrzebują wtyczki ani czekać, aż YouTube wyda nowszą wersję.
Oczywiście, film HTML5 oferuje pewne wady
Obejmują one:
- Musisz zakodować swój film w co najmniej trzech różnych kodekach
- Musisz włączyć JavaScript, aby zapewnić działanie przeglądarek, które nie obsługują HTML5
- Twój serwer musi być w stanie obsłużyć wymagania dotyczące przepustowości hostingu wideo
Kontynuuj czytanie poniżej
02 z 10Szybki przegląd obsługi wideo w Internecie
Dodawanie filmów do stron internetowych od dawna było trudnym procesem. Było tak wiele rzeczy, które mogły pójść nie tak:
- Najpierw korzystasz z tag, aby umieścić swój film na swojej stronie. ALE ten tag jest przestarzały na rzecz innego tagu. A niektóre przeglądarki i tak nigdy go nie wspierały.
- Więc przełączasz się na tag, ale starsze przeglądarki go nie obsługują, a nowsze przeglądarki mają w tym swój szkicowy charakter.
- Wtedy myślisz Flash! I zakoduj wideo jako plik FLV. Ale Flash nie jest obsługiwany na wielu urządzeniach mobilnych i wielu ludzi nienawidzi Flasha bez względu na to, jak go używa (25% respondentów w mojej ankiecie pyta o to, co myślisz o Flashie, że nie mogą w żaden sposób znieść Flasha).
- Dlatego zdecydujesz się przesłać swój film wideo do witryny z osadzaniem wideo, takiej jak YouTube, ale wtedy masz problemy z YouTube, o którym rozmawialiśmy.
- Na koniec decydujesz się na HTML5, ale Internet Explorer go nie obsługuje (dopiero w przeglądarce Internet Explorer 9). A nawet jeśli tak, są obsługiwane dwa standardy kodeków wideo i tylko jedna przeglądarka, która może korzystać z obu. Obsługa przeglądarki dla kodeków i kontenerów wideo
Więc co masz robić? Rezygnacja z wideo nie jest już dostępna w większości witryn, ponieważ film staje się coraz ważniejszy. Wiele witryn z powodzeniem przełączyło się na wideo.
Na kolejnych stronach tego artykułu dowiesz się, jak dodać wideo do stron internetowych działających w przeglądarkach Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 i 4, iPhone i Android, Flash oraz Internet Explorer 7 i 8. Będziesz Masz również klucze, które musisz w razie potrzeby dodać do obsługi innych starszych przeglądarek.
Kontynuuj czytanie poniżej
03 z 10Twórz i edytuj swoje wideo
Pierwszą rzeczą, której potrzebujesz, aby umieścić film na stronie internetowej, jest rzeczywiste wideo. Możesz robić zdjęcia seryjne i edytować później, aby utworzyć obiekt, lub możesz go zaprogramować 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ś zrobić, zapoznaj się z tymi pomysłami w Przewodniku wideo na komputery:
- Rodzinne projekty wideo
- Filmy marketingowe i promocyjne
- Wirtualne wycieczki wideo
- Jak filmy
- Filmy ślubne
Dowiedz się, jak rejestrować wysokiej jakości wideo
Upewnij się, że wiesz, jak nagrywać w domu i na zewnątrz, a także jak nagrywać dźwięk. Oświetlenie jest również bardzo ważne - ujęcia, które są zbyt jasne, szkodzą oczom, a zbyt ciemne wyglądają mętnie i nieprofesjonalnie. Nawet jeśli planujesz mieć tylko 30-sekundowy film na swojej stronie, im wyższa jakość, tym lepiej odzwierciedli się w Twojej witrynie.
Pamiętaj też, że prawa autorskie dotyczą dowolnych dźwięków lub muzyki (a także materiału filmowego), które możesz wykorzystać w swoim filmie. Jeśli nie masz dostępu do znajomego, który może napisać i odtworzyć piosenkę dla Ciebie, musisz znaleźć muzykę bez tantiem, aby grać w tle. Istnieją również miejsca, w których można przechowywać materiał filmowy, który można dodać do swoich filmów.
Edytowanie wideo
Nie ma znaczenia, jakiego oprogramowania do edycji używasz, tak długo jak go znasz i możesz z niego efektywnie korzystać. Gretchen, Przewodnik po wideo na komputery stacjonarne, ma kilka profesjonalnych porad dotyczących edycji wideo, które pomogą Ci edytować filmy, aby wyglądały świetnie.
Zapisz swój film na MOV lub AVI (lub MPG, CD, DV)
W dalszej części tego samouczka zakładamy, że Twój film został zapisany w formacie wysokiej jakości (nieskompresowanym), takim jak AVI lub MOV. Mimo że możesz używać tych plików w obecnej postaci, napotkasz wszystkie problemy z filmami, 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.
04 z 10Konwertuj wideo na Ogg dla przeglądarki Firefox
Pierwszy format, który będziemy konwertować to Ogg (czasami nazywany Ogg-Theora). Ten format można przeglądać w przeglądarkach Firefox 3.5, Opera 10.5 i Chrome 3.
Niestety, mimo że Ogg obsługuje przeglądarki, wiele znanych programów wideo, które można kupić (program Adobe Media Encoder, QuickTime itp.), Nie oferuje opcji konwersji Ogg. Jedynym sposobem na konwersję wideo na Ogg jest znalezienie programu do konwersji w Internecie.
Opcje konwersji
Istnieje narzędzie internetowe o nazwie Media-Convert, które twierdzi, że konwertuje różne formaty wideo (i audio) do innych formatów 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ą:
- Miro Video Converter (Windows Macintosh) - Ten program ma tę zaletę, że konwertuje zarówno na Ogg, jak i MP4 (H.264) i jest otwarty.
- Koyote Video Converter (Windows)
- Darmowy konwerter wideo Wydaje nam się, że ma on zarówno wersję systemu Windows, jak i Macintosh, ale trudno było o niej powiedzieć z ich strony
- Prosty koder Theora (Macintosh) - ten właśnie używamy.
Po zapisaniu pliku wideo w formacie Ogg zapisz go w lokalizacji w witrynie i przejdź do następnej strony, aby przekonwertować ją na inne formaty w innych przeglądarkach.
Kontynuuj czytanie poniżej
05 z 10Konwertuj wideo na MP4 dla Safari
Następnym formatem, na który należy skonwertować wideo, jest MP4 (wideo H.264), aby można było go odtwarzać w Safari 3 i 4 oraz na telefonie iPhone i systemie Android. Dodatkowo, filmy H.264 można łatwo przekonwertować na pliki FLV do oglądania w programie Flash.
Ten format jest bardziej dostępny w komercyjnych produktach i prawdopodobnie masz już program, który zostanie przekonwertowany na MP4, jeśli posiadasz edytor wideo. Jeśli masz Adobe Premiere, możesz użyć Adobe Video Encoder lub jeśli masz QuickTime Pro, który również będzie działał. Wiele z konwerterów, o których rozmawialiśmy na poprzedniej stronie, konwertuje także filmy na MP4.
- MediaConvert - internetowe narzędzie AWS.
- Miro Video Converter (Windows Macintosh) - Ten program ma tę zaletę, że konwertuje zarówno na Ogg, jak i MP4 (H.264) i jest otwarty.
- SUPER (Windows) - konwertuje wiele różnych typów plików na MP4 i FLV
- Darmowy konwerter wideo Wydaje nam się, że ma on zarówno wersję systemu Windows, jak i Macintosh, ale trudno było o niej powiedzieć z ich strony.
Zapisz plik MP4 na swojej stronie, a następnie przekonwertuj go na Flash, aby użyć Internet Explorera.
06 z 10Konwertuj wideo na FLV dla Internet Explorera
Najprostszym sposobem na konwersję filmów na FLV jest użycie samej Flash. W ten sposób konwertujemy moje filmy do Flasha. Ale jeśli nie masz Flasha, oto dwa popularne narzędzia do konwersji plików na FLV:
- SUPER (Windows) - konwertuje wiele różnych typów plików na MP4 i FLV
- ffmpegX (Macintosh) - przekonwertuje wiele różnych typów plików na Mp4 i FLV.
Zapisz plik FLV na swojej stronie, a następna strona pokaże Ci, jak napisać kod HTML, abyś mógł odtwarzać swoje filmy.
Kontynuuj czytanie poniżej
07 z 10Dodaj element wideo do swojej strony internetowej
Bardzo łatwo jest używać HTML 5 do dodawania wideo do stron internetowych. 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 swój film zarówno w formatach Ogg, jak i MP4, będziesz mógł napisać tylko cztery lub pięć linii kodu HTML, aby wyświetlić go w większości nowoczesnych przeglądarek (z wyjątkiem Internet Explorera 8). Oto jak:
Napisz znacznik dokumentu HTML 5, aby przeglądarka wiedziała, że oczekuje HTML 5:
- Stwórz swoją stronę internetową tak, jak normalnie ją utworzysz:
- Wewnątrz ciała umieść
- Zdecyduj, jakie atrybuty ma mieć Twój film: zalecamy korzystanie z formantów i wstępne ładowanie. Użyj opcji plakatu, jeśli Twój film nie ma dobrej pierwszej sceny.
- autoplay - aby rozpocząć od razu po pobraniu
- sterowanie - pozwól swoim czytelnikom kontrolować wideo (pauza, przewijanie do tyłu, przewijanie do przodu)
- loop - uruchom wideo od początku po jego zakończeniu
- preload - pobieraj wcześniej wideo, aby było szybciej, gdy klient go kliknie
- poster - zdefiniuj obraz, którego chcesz użyć po zatrzymaniu wideo
- Następnie dodaj pliki źródłowe dla dwóch wersji twojego wideo (MP4 i OGG) wewnątrz
- Otwórz stronę w Chrome 1, Firefox 3.5, Opera 10 i / lub Safari 4 i upewnij się, że wyświetla się poprawnie. Powinieneś przetestować go przynajmniej w Firefoksie 3.5 i Safari 4 - ponieważ każdy z nich używa innego kodeka.
to jest to! Po wprowadzeniu tego kodu będziesz mieć wideo działające w Firefoksie 3.5, Safari 4, Operze 10 i przeglądarce Chrome 1. A co z Internet Explorerem?
Internet Explorer nie lubi HTML 5 lub
W następnym rozdziale Porozmawiamy o tym, co możesz zrobić, aby program IE 8 ładnie odtwarzał tagi HTML HTML i wyświetlał wideo. Musisz użyć Flasha.Dobrą wiadomością jest to, że IE 9 ma obsługiwać HTML 5 i tag wideo.
08 z 10Dodaj JavaScript i Flash Player, aby uruchomić program Internet Explorer
Być może zauważyłeś, że w kodzie HTML poprzedniej strony nie było linii źródłowej dla pliku FLV. A jeśli przetestowałbyś tę stronę w Internet Explorerze, nie działałby. Dzieje się tak dlatego, że Internet Explorer nie rozpoznaje HTML 5 i nie może odtwarzać natywnie filmów OGG ani MP4. Aby program Internet Explorer 7 i 8 działały, musisz go odtworzyć jako Flash. Ale jest więcej kroków, aby to zadziałało, niż tylko dodanie pliku FLV.
Krok 1: Pobierz Flash Video Player na swoją stronę
Zalecamy korzystanie z FlowPlayera, ponieważ jest to odtwarzacz wideo Flash z otwartym kodem źródłowym, który możesz zainstalować na swoim serwerze internetowym i używać go, gdy masz do dyspozycji Flash Video. Darmowa wersja FlowPlayer umieszcza reklamy w Twoich filmach, ale możesz także kupić komercyjne licencje, jeśli ich potrzebujesz.
Postępuj zgodnie z instrukcjami na stronie FlowPlayer, aby zainstalować FlowPlayer na swojej stronie. W skrócie, będziesz instalować 2 pliki SWF i plik JavaScript na swojej stronie. U dołu kodu HTML (przed tag) dodasz linię:
Ale Internet Explorer nadal nie będzie odtwarzać wideo, musisz nauczyć go rozpoznawać znaczniki HTML 5.
Krok 2: Przekonaj Internet Explorera, aby czytał znaczniki HTML 5
Jest przydatny skrypt w Google Code o nazwie "HTML Shiv", który pomoże IE rozpoznać elementy HTML 5. Tak więc w
dokumentu HTML, który chcesz do niego odwołać. Najlepiej zamknąć je w komentarzach warunkowych IE, aby inne przeglądarki nie były zdezorientowane:
Okay, teraz IE rozpozna
