Autor publikacji
Virtual Patriot - Administrator

video

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu video

Element video reprezentuje zasób internetowy w postaci pliku wideo (np. typu .mp4) lub w postaci pliku dźwiękowego (np. typu .mp3 lub .mp4).

Dodatkowe artykuły związane z elementem video

Informacje techniczne o elemencie video

kategoria ogólna
kontekst zewnętrzny

element HTML, który tworzy wewnętrzny kontekst wbudowany

Przykładowy Kod HTML

<figure>
  <figcaption>Przykładowe wideo</figcaption>

  <video src="wideo-01.mp4" controls>
    <p>
      Twoja przeglądarka internetowa nie obsługuje elementu "video".
    </p>
  </video>
</figure>

Kontekstem zewnętrznym przykładowego elementu "video" jest element "figure". Wspomniany element "figure" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst wbudowany, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "figure", jest prawidłowym kontekstem zewnętrznym dla elementu "video".

kontekst wewnętrzny

  • gdy dany element video posiada atrybut src, wtedy kontekstem wewnętrznym takiego elementu video może być zero lub więcej elementów track, a następnie ewentualnie kontekst wewnętrzny elementu rodzica, lecz nie elementy media jako elementy potomkowie

    Przykładowy Kod HTML

    <figure>
  <figcaption>Przykładowe wideo</figcaption>

  <video src="wideo-01.mp4" controls>
    <track src="polskie-napisy-01.vtt" kind="subtitles" srclang="pl" label="napisy w języku polskim" default>
  </video>
</figure>

    Kontekstem wewnętrznym przykładowego elementu "video", który posiada atrybut "src" jest wyłącznie element "track". Ponadto elementami potomkami wspomnianego elementu "video" nie są elementy HTML, które są zakazanymi elementami potomkami elementu "video", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "track", jest prawidłowym kontekstem wewnętrznym dla elementu "video".

    Przykładowy Kod HTML

    <figure>
  <figcaption>Przykładowe wideo</figcaption>

  <video src="wideo-01.mp4" controls>
    <p>
      Twoja przeglądarka internetowa nie obsługuje elementu "video".
    </p>
  </video>
</figure>

    Kontekstem wewnętrznym przykładowego elementu "video", który posiada atrybut "src" jest wyłącznie element HTML, który jest prawidłowym kontekstem wewnętrznym dla elementu rodzica wspomnianego elementu "video", którym to elementem rodzicem w tym wypadku jest element "figure". Ponadto elementami potomkami wspomnianego elementu "video" nie są elementy HTML, które są zakazanymi elementami potomkami elementu "video", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "p", jest prawidłowym kontekstem wewnętrznym dla elementu "video".

    Przykładowy Kod HTML

    <figure>
  <figcaption>Przykładowe wideo</figcaption>

  <video src="wideo-01.mp4" controls>
    <track src="polskie-napisy-01.vtt" kind="subtitles" srclang="pl" label="napisy w języku polskim" default>

    <p>
      Twoja przeglądarka internetowa nie obsługuje elementu "video".
    </p>
  </video>
</figure>

    Kontekstem wewnętrznym przykładowego elementu "video", który posiada atrybut "src" jest wyłącznie element "track", po którym znajduje się element HTML, który jest prawidłowym kontekstem wewnętrznym dla elementu rodzica wspomnianego elementu "video", którym to elementem rodzicem w tym wypadku jest element "figure". Ponadto elementami potomkami wspomnianego elementu "video" nie są elementy HTML, które są zakazanymi elementami potomkami elementu "video", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "track" oraz element "p", jest prawidłowym kontekstem wewnętrznym dla elementu "video".

  • gdy dany element video nie posiada atrybutu src, wtedy kontekstem wewnętrznym takiego elementu video może być zero lub więcej elementów source, następnie zero lub więcej elementów track, następnie ewentualnie kontekst wewnętrzny elementu rodzica, lecz nie elementy media jako elementy potomkowie

    Przykładowy Kod HTML

    <figure>
  <figcaption>Przykładowe wideo</figcaption>

  <video controls>
    <source src="wideo-01.mp4">
    <source src="wideo-01.ogg">
  </video>
</figure>

    Kontekstem wewnętrznym przykładowego elementu "video", który nie posiada atrybutu "src" są wyłącznie elementy "source". Ponadto elementami potomkami wspomnianego elementu "video" nie są elementy HTML, które są zakazanymi elementami potomkami elementu "video", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "source" oraz element "source", jest prawidłowym kontekstem wewnętrznym dla elementu "video".

    Przykładowy Kod HTML

    <figure>
  <figcaption>Przykładowe wideo</figcaption>

  <video controls>
    <source src="wideo-01.mp4">
    <source src="wideo-01.ogg">
    <track src="polskie-napisy-01.vtt" kind="subtitles" srclang="pl" label="napisy w języku polskim" default>
  </video>
</figure>

    Kontekstem wewnętrznym przykładowego elementu "video", który nie posiada atrybutu "src" są wyłącznie elementy "source", po których występuje element "track". Ponadto elementami potomkami wspomnianego elementu "video" nie są elementy HTML, które są zakazanymi elementami potomkami elementu "video", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "source", element "source" oraz element "track", jest prawidłowym kontekstem wewnętrznym dla elementu "video".

    Przykładowy Kod HTML

    <figure>
  <figcaption>Przykładowe wideo</figcaption>

  <video controls>
    <source src="wideo-01.mp4">
    <source src="wideo-01.ogg">

    <p>
      Twoja przeglądarka internetowa nie obsługuje elementu "video".
    </p>
  </video>
</figure>

    Kontekstem wewnętrznym przykładowego elementu "video", który nie posiada atrybutu "src" są wyłącznie elementy "source", po których występuje element HTML, który jest prawidłowym kontekstem wewnętrznym dla elementu rodzica wspomnianego elementu "video", którym to elementem rodzicem w tym wypadku jest element "figure". Ponadto elementami potomkami wspomnianego elementu "video" nie są elementy HTML, które są zakazanymi elementami potomkami elementu "video", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "source", element "source" oraz element "p", jest prawidłowym kontekstem wewnętrznym dla elementu "video".

    Przykładowy Kod HTML

    <figure>
  <figcaption>Przykładowe wideo</figcaption>

  <video controls>
    <source src="wideo-01.mp4">
    <source src="wideo-01.ogg">
    <track src="polskie-napisy-01.vtt" kind="subtitles" srclang="pl" label="napisy w języku polskim" default>

    <p>
      Twoja przeglądarka internetowa nie obsługuje elementu "video".
    </p>
  </video>
</figure>

    Kontekstem wewnętrznym przykładowego elementu "video", który nie posiada atrybutu "src" są wyłącznie elementy "source", po których występuje element "track", po którym znajduje się element HTML, który jest prawidłowym kontekstem wewnętrznym dla elementu rodzica wspomnianego elementu "video", którym to elementem rodzicem w tym wypadku jest element "figure". Ponadto elementami potomkami wspomnianego elementu "video" nie są elementy HTML, które są zakazanymi elementami potomkami elementu "video", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "source", element "source", element "track" oraz element "p", jest prawidłowym kontekstem wewnętrznym dla elementu "video".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

zdolność fallback

Element video posiada zdolność fallback. Zdolność fallback elementu video uaktywnia się w momencie gdy przeglądarka internetowa nie interpretuje elementu video.

składnia HTML

<video> ... </video>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

  • inline-block (jeżeli przeglądarka internetowa interpretuje element video)

  • inline (jeżeli przeglądarka internetowa nie interpretuje elementu video)

Przypuszczalnie domyślne reguły CSS elementu video

/* wszystkie reguły CSS, jeżeli przeglądarka internetowa interpretuje element "video" */

video {
  display:inline-block;
  width:300px;
  height:150px;
}

video:focus {
  outline-width:1px;
  outline-style:dotted;
}

Interpretacja elementu video

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Interpretuje atrybut crossorigin, lecz od wersji "11".

Edge

tak

Zobacz więcej informacji o interpretacji elementu .

Opis atrybutów elementu video

Atrybut Lokalny

autoplay

Przeznaczenie atrybutu autoplay

Atrybut autoplay wykorzystany wraz z elementem video pozwala nam określić czy odtwarzanie przez przeglądarkę internetową zasobu internetowego reprezentowanego przez dany element video powinno rozpocząć się automatycznie.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu autoplay

autoplay

Atrybut autoplay jest atrybutem logicznym elementu video.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <video src="https://webkod.pl/files/html/film-01.mp4" controls autoplay></video>

  </body>
</html>

Rezultat

Odtwarzanie przez przeglądarkę internetową zasobu internetowego "film-01.mp4" reprezentowanego przez przykładowy element "video" rozpocznie się automatycznie, ponieważ do wspomnianego elementu "video" został dodany atrybut "autoplay".

Atrybut Lokalny

controls

Przeznaczenie atrybutu controls

Atrybut controls wykorzystany wraz z elementem video pozwala nam określić czy dany element video powinien posiadać przyciski interfejsu użytkownika służące do kontrolowania odtwarzania zasobu internetowego reprezentowanego przez dany element video.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu controls

controls

Atrybut controls jest atrybutem logicznym elementu video.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <video src="https://webkod.pl/files/html/film-01.mp4" controls></video>

  </body>
</html>

Rezultat

Przykładowy element "video" reprezentujący zasób internetowy "film-01.mp4" posiada przyciski interfejsu użytkownika służące do kontrolowania odtwarzania zasobu internetowego "film-01.mp4", ponieważ do wspomnianego elementu "video" został dodany atrybut "controls".

Atrybut Lokalny

crossorigin

Przeznaczenie atrybutu crossorigin

Atrybut crossorigin wykorzystany wraz z elementem video pozwala nam określić, w jaki sposób dany element video reprezentujący zasób internetowy ma reagować na mechanizm umożliwiający wymienianie się zasobami internetowymi pomiędzy serwerami znajdującymi się w różnych domenach (tzw. CORS, czyli Cross-Origin Resource Sharing).

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

anonymous (gdy nie podaliśmy wartości)

anonymous (gdy podaliśmy wartość nieprawidłową)

Wartości atrybutu crossorigin

anonymous

Wartość anonymous oznacza, że nie jest wymagane potwierdzenie tożsamości użytkownika.

use-credentials

Wartość use-credentials oznacza, że jest wymagane potwierdzenie tożsamości użytkownika, np. za pomocą COOKIES (tzw. ciasteczka), za pomocą certyfikatu SSL po stronie klienta lub za pomocą uwierzytelnienia HTTP.

Atrybut Lokalny

height

Przeznaczenie atrybutu height

Atrybut height wykorzystany wraz z elementem video pozwala nam określić wartość wysokości, jaką powinien posiadać dany element video.

Wartość domyślna

BRAK (w każdej sytuacji) lub 150 w niektórych przeglądarkach internetowych

Wartości atrybutu height

liczba

Należy podać nieujemną liczbę całkowitą.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <video src="https://webkod.pl/files/html/film-01.mp4" height="180" controls></video>

  </body>
</html>

Rezultat

Wartość wysokości przykładowego elementu "video" wynosi "180" pikseli, ponieważ do wspomnianego elementu "video" został dodany atrybut "height" wraz z wartością "180".

Atrybut Lokalny

loop

Przeznaczenie atrybutu loop

Atrybut loop wykorzystany wraz z elementem video pozwala nam określić czy odtwarzanie przez przeglądarkę internetową zasobu internetowego reprezentowanego przez dany element video powinno powtarzać się w nieskończoność.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu loop

loop

Atrybut loop jest atrybutem logicznym elementu video.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <video src="https://webkod.pl/files/html/film-01.mp4" controls loop></video>

  </body>
</html>

Rezultat

Odtwarzanie przez przeglądarkę internetową zasobu internetowego "film-01.mp4" reprezentowanego przez przykładowy element "video" będzie powtarzane w nieskończoność, ponieważ do wspomnianego elementu "video" został dodany atrybut "loop".

Atrybut Lokalny

muted

Przeznaczenie atrybutu muted

Atrybut muted wykorzystany wraz z elementem video pozwala nam określić czy zasób internetowy reprezentowany przez dany element video powinien być wyciszony podczas odtwarzania.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu muted

muted

Atrybut muted jest atrybutem logicznym elementu video.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <video src="https://webkod.pl/files/html/film-01.mp4" muted controls></video>

  </body>
</html>

Rezultat

Zasób internetowy "film-01.mp4" reprezentowany przez przykładowy element "video" jest wyciszony podczas odtwarzania przez przeglądarkę internetową, ponieważ do wspomnianego elementu "video" został dodany atrybut "muted".

Atrybut Lokalny

poster

Przeznaczenie atrybutu poster

Atrybut poster wykorzystany wraz z elementem video pozwala nam określić adres zasobu internetowego, którym powinien być obrazek, jaki chcemy, aby znajdował się w widocznym obszarze danego elementu video, aż do momentu rozpoczęcia odtwarzania zasobu internetowego reprezentowanego przez dany element video.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu poster

URL

Należy podać niepusty ciąg znaków w formie adresu URL.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <video src="https://webkod.pl/files/html/film-01.mp4" poster="https://webkod.pl/files/html/okladka-01.png" controls></video>

  </body>
</html>

Rezultat

Do momentu gdy użytkownik nie zdecyduje się na naciśnięcie przycisku rozpoczynającego odtwarzanie zasobu internetowego "film-01.mp4" reprezentowanego przez przykładowy element "video", w widocznym obszarze przykładowego elementu "video" będzie widoczny obrazek "okladka-01.png" znajdujący się pod adresem "https://webkod.pl/files/html/okladka-01.png", ponieważ do wspomnianego elementu "video" został dodany atrybut "poster" wraz z wartością "https://webkod.pl/files/html/okladka-01.png".

Atrybut Lokalny

preload

Przeznaczenie atrybutu preload

Atrybut preload wykorzystany wraz z elementem video pozwala nam określić informację o tym, w jaki sposób do okna przeglądarki internetowej powinien zostać wczytany zasób internetowy reprezentowany przez dany element video.

Gdy dany element "video" posiada atrybut autoplay, wtedy atrybut "preload" traci swoje działanie.

Wartość domyślna

wartość ustalona przez przeglądarkę internetową (gdy pominęliśmy atrybut), sugerowaną wartością jest wartość metadata

auto (gdy nie podaliśmy wartości)

wartość ustalona przez przeglądarkę internetową (gdy podaliśmy wartość nieprawidłową), sugerowaną wartością jest wartość metadata

Wartości atrybutu preload

none

Wartość none oznacza, że zasób internetowy reprezentowany przez dany element video zostanie wczytany do okna przeglądarki internetowej dopiero w momencie gdy użytkownik sam podejmie próbę rozpoczęcia odtwarzania docelowego zasobu internetowego.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <video src="https://webkod.pl/files/html/film-01.mp4" preload="none" controls></video>

  </body>
</html>

Rezultat

Dopiero w momencie gdy użytkownik zdecyduje się na naciśnięcie przycisku rozpoczynającego odtwarzanie zasobu internetowego "film-01.mp4" reprezentowanego przez przykładowy element "video", zasób internetowy "film-01.mp4" zostanie wczytany do okna przeglądarki internetowej, ponieważ do wspomnianego elementu "video" został dodany atrybut "preload" wraz z wartością "none".

metadata

Wartość metadata oznacza, że do momentu rozpoczęcia odtwarzania zasobu internetowego reprezentowanego przez dany element video tylko niektóre informacje metadata o docelowym zasobie internetowym (np. długość trwania filmu, pierwsza klatka, szerokość, wysokość) powinny zostać wczytane do okna przeglądarki internetowej.

Natomiast dalsze wczytywanie się, podczas odtwarzania, zasobu internetowego reprezentowanego przez dany element video powinno odbywać się w najwolniejszym możliwym tempie, które nie wpływa na jakość odtwarzania.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <video src="https://webkod.pl/files/html/film-01.mp4" preload="metadata" controls></video>

  </body>
</html>

Rezultat

Do momentu gdy użytkownik nie zdecyduje się na naciśnięcie przycisku rozpoczynającego odtwarzanie zasobu internetowego "film-01.mp4" reprezentowanego przez przykładowy element "video", tylko niektóre informacje metadata o zasobie internetowym "film-01.mp4" będą wczytane w oknie przeglądarki internetowej, ponieważ do wspomnianego elementu "video" został dodany atrybut "preload" wraz z wartością "metadata".

auto

Wartość auto oznacza, że zasób internetowy reprezentowany przez dany element video powinien zostać wczytany w całości do okna przeglądarki internetowej.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <video src="https://webkod.pl/files/html/film-01.mp4" preload="auto" controls></video>

  </body>
</html>

Rezultat

Zasób internetowy "film-01.mp4" reprezentowany przez przykładowy element "video" został wczytany w całości do okna przeglądarki internetowej, ponieważ do wspomnianego elementu "video" został dodany atrybut "preload" wraz z wartością "auto".

Atrybut Lokalny

src

Przeznaczenie atrybutu src

Atrybut src wykorzystany wraz z elementem video pozwala nam określić adres zasobu internetowego, który chcemy, aby był reprezentowany przez dany element video.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu src

URL

Należy podać niepusty ciąg znaków w formie adresu URL.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <video src="https://webkod.pl/files/html/film-01.mp4" controls></video>

  </body>
</html>

Rezultat

Zasobem internetowym reprezentowanym przez przykładowy element "video" jest zasób internetowy "film-01.mp4" znajdujący się pod adresem "https://webkod.pl/files/html/film-01.mp4", ponieważ do wspomnianego elementu "video" został dodany atrybut "src" wraz z wartością "https://webkod.pl/files/html/film-01.mp4".

Atrybut Lokalny

width

Przeznaczenie atrybutu width

Atrybut width wykorzystany wraz z elementem video pozwala nam określić wartość szerokości, jaką powinien posiadać dany element video.

Wartość domyślna

BRAK (w każdej sytuacji) lub 300 w niektórych przeglądarkach internetowych

Wartości atrybutu width

liczba

Należy podać nieujemną liczbę całkowitą.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <video src="https://webkod.pl/files/html/film-01.mp4" width="480" controls></video>

  </body>
</html>

Rezultat

Wartość szerokości przykładowego elementu "video" wynosi "480" pikseli, ponieważ do wspomnianego elementu "video" został dodany atrybut "width" wraz z wartością "480".