Wideo HTML
Element HTML <video>służy do wyświetlania wideo na stronie internetowej.
Element <wideo> HTML
Aby pokazać wideo w HTML, użyj <video>elementu:
Przykład
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Jak to działa
Atrybut dodaje elementy sterujące wideo , controlstakie jak odtwarzanie, pauza i głośność.
Dobrym pomysłem jest zawsze uwzględniać widthi heightatrybuty. Jeśli wysokość i szerokość nie zostaną ustawione, strona może migotać podczas wczytywania wideo.
Element <source>umożliwia określenie alternatywnych plików wideo, z których przeglądarka może wybrać. Przeglądarka użyje pierwszego rozpoznanego formatu.
Tekst między tagami <video>i </video>będzie wyświetlany tylko w przeglądarkach, które nie obsługują tego <video>elementu.
HTML <wideo> Autoodtwarzanie
Aby rozpocząć wideo automatycznie, użyj autoplayatrybutu:
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>
Uwaga: przeglądarki Chromium w większości przypadków nie pozwalają na autoodtwarzanie. Jednak wyciszone autoodtwarzanie jest zawsze dozwolone.
Dodaj mutedpo
autoplay, aby Twój film zaczął się automatycznie odtwarzać (ale wyciszony):
Przykład
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje dany
<video>element.
| Element | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Formaty wideo HTML
Istnieją trzy obsługiwane formaty wideo: MP4, WebM i Ogg. Obsługiwane przez przeglądarkę różne formaty to:
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | YES | YES | YES |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
Wideo HTML — typy mediów
| File Format | Media Type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
Wideo HTML — metody, właściwości i zdarzenia
HTML DOM definiuje metody, właściwości i zdarzenia dla <video>elementu.
Umożliwia to ładowanie, odtwarzanie i wstrzymywanie filmów, a także ustawianie czasu trwania i głośności.
Istnieją również zdarzenia DOM, które mogą powiadamiać Cię, gdy wideo zaczyna się odtwarzać, jest wstrzymane itp.
Aby uzyskać pełne informacje o modelu DOM, przejdź do naszej dokumentacji HTML Audio/Video DOM Reference .
Tagi wideo HTML
| Tag | Description |
|---|---|
| <video> | Defines a video or movie |
| <source> | Defines multiple media resources for media elements, such as <video> and <audio> |
| <track> | Defines text tracks in media players |