Co jest HTML5 video?
Specyfikacja HTML5 wprowadzono element wideo na potrzeby gry wideo, częściowo zastępując element obiektu.
HTML5 video jest zamierzone przez jego twórców, aby stać się nowym standardem sposób, aby pokazać film w internecie, zamiast poprzedniego de facto standardem korzystania z zastrzeżonych wtyczki Adobe Flash, choć wczesne przyjęcie było utrudnione przez brak porozumienia co do których Video Coding formatów i formaty kodowania audio powinny być wspierane w przeglądarkach internetowych.
Odtwarzanie plików wideo w formacie HTML
Przed HTML5, nie było standardem dla przedstawiający wideo na stronie internetowej.
Przed HTML5, filmy mogą być odtwarzane tylko z plug-in (like flash) .
HTML5 <video> element określa standardowy sposób, aby umieścić film na stronie internetowej.
Wsparcie przeglądarka
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje <video> element.
| Element | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10,5 |
HTML <video> Element
Aby wyświetlić wideo w HTML, użyj <video> elementu:
Przykład
<video width="320" height="240" controls>
<source src="/html/movie.mp4" type="video/mp4">
<source src="/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> Spróbuj sam " Jak to działa
controls atrybutu dodaje kontroli wideo, takich jak odtwarzanie, pauza, i objętości.
Jest to dobry pomysł, aby zawsze zawierać width i height atrybutów.
Jeśli wysokość i szerokość nie są ustawione, przeglądarka nie zna rozmiaru wideo. Efekt będzie taki, że strona będzie zmienić (or flicker) podczas obciążeń wideo.
Tekst pomiędzy <video> i </video> znaczniki będą wyświetlane tylko w przeglądarkach, które nie obsługują <video> element.
Wiele <source> elementy mogą nie odwołuje się do różnych plików wideo. Przeglądarka użyje pierwszego rozpoznany format.
HTML <video> Autoodtwarzanie
Aby uruchomić film automatycznie użyć autoplay atrybut:
Przykład
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> Spróbuj sam " autoplay atrybut nie działa w urządzeniach mobilnych, takich jak iPad i iPhone.
HTML wideo - Pomoc Browser
Obecnie istnieją 3 obsługiwanych formatów wideo do <video> element: MP4, WebM i Ogg:
| Przeglądarka | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (from Opera 25) | YES | YES |
HTML wideo - Typy mediów
| Format pliku | Typ mediów |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML wideo - metody, właściwości i zdarzenia
HTML5 definiuje metody DOM, właściwości i zdarzenia dla <video> elementu.
To pozwala na załadowanie, odtwarzać i wstrzymywać wideo, a także ustawienie czasu trwania i głośność.
Istnieją również DOM zdarzenia, które mogą informować użytkownika, gdy film zaczyna grać, jest wstrzymane, etc.
Dla pełnego odniesienia DOM, przejdź do naszej HTML5 audio / video DOM .
HTML5 video Tagi
| Etykietka | Opis |
|---|---|
| <video> | Definiuje wideo lub film |
| <source> | Definiuje wielu zasobów multimedialnych dla elementów multimedialnych, takich jak <video> i <audio> |
| <track> | Definiuje utworów tekstowych w odtwarzacze multimedialne |