W pierwszym z jego blogów dla PC Pro , twórca stron internetowych Ian Devlin pokazuje, jak osadzić wideo na swojej stronie internetowej za pomocą HTML5
Naprawiono błąd zarządzania pamięcią w systemie Windows 10 windows
Prawdopodobnie największą i najczęściej omawianą funkcją HTML5 jest osadzone wideo. Obecnie jedyną metodą dodawania treści wideo do witryny jest użycie wtyczki innej firmy, takiej jak Flash, QuickTime lub RealPlayer. Wraz z nadejściem HTML5 i elementu wideo wszystko się zmieni, a obsługa wideo będzie obsługiwana przez przeglądarkę internetową, eliminując potrzebę wsparcia stron trzecich.
Kilka przeglądarek internetowych oferuje już obsługę HTML5. Tutaj pokażemy, w jaki sposób możesz osadzić wideo bez wtyczek w swojej witrynie i jakie problemy napotkasz.
Typy plików i kompatybilność przeglądarek
Na początek krótko przyjrzymy się różnym typom plików wideo obsługiwanych w HTML5. Są to Theora OGG i H.264 (.mp4). Różne przeglądarki obsługują różne typy, a niektóre w ogóle nie obsługują. Wskazuje na to poniższa tabela:
| Theora OGG | H.264 (mp4) | |
|---|---|---|
| Firefox 3.5+ | ✓ | x |
| Chrom 3+ | ✓ | ✓ |
| Safari 3+ | x | ✓ |
| Opera 10,5+ | ✓ | x |
| Internet Explorer 8 | x | x |
| Internet Explorer 9 | x | ✓ |
| iPhone | x | ✓ |
| Android | x | ✓ |
Kodeki i inne problemy techniczne
Sam HTML5 nie określa kodeka wideo, którego należy użyć , co doprowadziło do argumentów, który jest najlepiej używać w sieci . Aby objąć wszystkie przeglądarki, musimy obsługiwać oba kodeki.
No i oczywiście Internet Explorer. W tej chwili żadna z wydanych wersji Internet Explorera nie obsługuje elementu wideo, a do odtwarzania wideo nadal wymagana jest wtyczka. Zmieni się to wraz z wydaniem Internet Explorera 9 (prawdopodobnie na początku przyszłego roku), kiedy będzie obsługiwany H.264, wraz z wieloma innymi gadżetami HTML5.
Jeśli zastanawiasz się, jak możesz przekonwertować pliki wideo do formatu OGG (więcej o typie Theora OGG możesz przeczytać na stronie TheoraKsiążka kucharska ) pliki używające Konwerter wideo Miro .
Aby uzyskać więcej szczegółowych informacji na temat elementu wideo i kodeków, przejdź do zanurz się w HTML5: wideo w sieci przez Marka Pilgrima.
Kod HTML5
Teraz przechodzimy do właściwego kodu HTML5 i tego, jak możemy sprawić, by to działało. HTML5 udostępnia nam dwa nowe elementy, których możemy użyć do dodania wideo do naszych stron internetowych: |_+_| element, o którym już wspomnieliśmy, oraz element |_+_| element. Przyjrzyjmy się każdemu z nich po kolei.
Element
Element wideo może mieć następujące atrybuty:
| Atrybut | Opis |
|---|---|
| src | prawidłowy adres URL do samego pliku wideo |
| Automatyczne odtwarzanie | wartość logiczna wskazująca, czy wideo powinno być odtwarzane automatycznie |
| sterownica | wartość logiczna wskazująca, że domyślne kontrolki multimediów powinny być wyświetlane przez przeglądarkę |
| pętla | wartość logiczna wskazująca, czy wideo powinno być odtwarzane wielokrotnie |
| wstępne ładowanie | wskazuje przeglądarce, czy wymagane jest wyprzedzające pobieranie samego filmu, czy też wystarczy tylko metadane. Możliwe wartości to:
|
| plakat | adres URL do pliku obrazu, który ma być wyświetlany, gdy nie są dostępne żadne dane wideo |
| szerokość | szerokość wideo w pikselach CSS |
| wysokość | wysokość wideo w pikselach CSS |
Z tego widać, jak łatwo jest osadzić wideo OGG na swojej stronie internetowej za pomocą samego elementu wideo:
To naprawdę wszystko.
Każda przeglądarka obsługująca format Theora OGG powinna teraz z powodzeniem wyświetlać i odtwarzać wideo bez dalszych ceregieli. Oczywiście nie jest to takie proste, ponieważ jak widzieliśmy z powyższej tabeli, kod działałby tylko w Firefoksie, Chrome i Operze. Potrzebujemy więc również powrotu do H.264. Można to osiągnąć za pomocą |_+_| element, który pozwala nam zdefiniować wiele źródeł multimediów dla elementu wideo.
jak zmienić swój głos w niezgodzie
Element
Element źródłowy ma następujące atrybuty:
| Atrybut | Opis |
|---|---|
| src | prawidłowy adres URL do samego pliku multimedialnego (w tym przypadku wideo) |
| rodzaj | typ pliku multimedialnego, który musi być Typ MIME , np. |_+_| wskazuje, że jest to wideo Theora OGG i można również udostępnić kodek MIME, który pomoże przeglądarce w podjęciu decyzji o sposobie odtwarzania wideo za pomocą |_+_|. |
| pół | podaje zamierzony typ nośnika zasobu multimedialnego i musi być prawidłowy zapytanie o media , np. |_+_| wskazuje, że wideo jest odpowiednie dla urządzeń przenośnych lub |_+_| co oznacza, że wideo jest odpowiednie dla ekranów o rozdzielczości 720 pikseli lub większej. |
Uwaga: element źródłowy jest nieważny i ma tag początkowy, ale nie ma tagu zamykającego
Najbardziej użyteczną rzeczą w elemencie źródłowym jest to, że możemy go używać do układania różnych typów plików, pozwalając przeglądarce na wypróbowanie każdego z nich po kolei, aż znajdzie taki, który może odtworzyć.
Używając i razem
Aby umieścić filmy w różnych typach w elemencie wideo, wpisujemy kod w następujący sposób:
Powyższy kod będzie teraz działał we wszystkich przeglądarkach z wyjątkiem Internet Explorera, który wyświetli wskazany powyżej komunikat.
Możesz to sprawdzić samodzielnie, oglądając stronę Test wideo HTML5 , która zawiera przykładowy film przedstawiający motyla zarówno w formacie Theora OGG, jak i MP4, więc jeśli oglądasz go w przeglądarce Firefox, Chrome, Safari, Opera, na iPhonie lub Telefon z Androidem, powinieneś być w stanie go zobaczyć.
Ostre noże wśród was zauważą teraz, że możemy skorzystać z tego stosu i użyć na dole Flasha (lub innej wtyczki) zamiast wyświetlać przepraszam, że nie widzisz tej wiadomości wideo, używając następującego kodu :
Wniosek
Podobnie jak w przypadku większości elementów HTML5, obsługa przez przeglądarkę elementów źródłowych i wideo jest obecnie niejednolita. W tej chwili toczy się również duża debata na temat tego, czy element źródłowy zabije użycie Flasha jako najpopularniejszej metody dodawania treści wideo do stron internetowych. Nie jestem pewien, czy całkowicie zabije Flasha, ale myślę, że można uczciwie powiedzieć, że zostanie i zapewni programistom internetowym czystsze i łatwiejsze podejście do osadzania wideo.
