Ostatnio edytowany:

video

Autor: Virtual Patriot

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 techniczne informacje 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 kontekstem wewnętrznym mogą być ewentualnie elementy 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 src="wideo-01.mp4" controls>
        <track src="polskie-napisy-01.vtt" kind="subtitles" srclang="pl" 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" 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 kontekstem wewnętrznym mogą być ewentualnie elementy source, następnie ewentualnie elementy 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" default>
      </video>
    </figure>

    Kontekstem wewnętrznym przykładowego elementu "video", który nie posiada atrybutu "src" są wyłącznie elementy "source", po których znajduje się 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 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" 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" 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 znajduje się 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".

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

wymagane elementy dzieci

brak

wymagane atrybuty

brak

składnia HTML

<video> ... </video>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display
  • inline (jeżeli przeglądarka internetowa nie interpretuje danego elementu video)
  • inline-block (jeżeli przeglądarka internetowa interpretuje dany element video)

Dodatkowe domyślne reguły CSS elementu video

/* jeżeli przeglądarka internetowa interpretuje element "video" */
video {
  display:inline-block;
  width:300px;
  height:150px;
}

Interpretacja elementu video

Firefox

tak

Nie interpretuje atrybutu mediagroup.

Google Chrome

tak

Nie interpretuje atrybutu mediagroup.

Safari

tak

Nie interpretuje atrybutu mediagroup.

Opera

tak

Nie interpretuje atrybutu mediagroup.

Internet Explorer

tak, lecz od wersji 9

Interpretuje atrybut crossorigin, lecz od wersji "11".

Nie interpretuje atrybutu mediagroup.

Edge

tak

Nie interpretuje atrybutu mediagroup.

Zobacz więcej informacji o interpretacji elementu .

Opis atrybutów elementu video

autoplay

Przeznaczenie atrybutu autoplay

Atrybut autoplay wykorzystany wraz z elementem video określa 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="http://webkod.pl/files/html/film-01.mp4" controls autoplay></video>

  </body>
</html>

Rezultat

Zobacz rezultat: przykład atrybutu autoplay

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

controls

Przeznaczenie atrybutu controls

Atrybut controls wykorzystany wraz z elementem video określa czy dany element video powinien posiadać domyślne przyciski interfejsu użytkownika służące do kontrolowania odtwarzania zasobu internetowego reprezentowanego przez wspomniany 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="http://webkod.pl/files/html/film-01.mp4" controls></video>

  </body>
</html>

Rezultat

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

crossorigin

Przeznaczenie atrybutu crossorigin

Atrybut crossorigin wykorzystany wraz z elementem video określa, 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.

height

Przeznaczenie atrybutu height

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

Wartość domyślna

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

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="http://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".

loop

Przeznaczenie atrybutu loop

Atrybut loop wykorzystany wraz z elementem video określa 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="http://webkod.pl/files/html/film-01.mp4" controls loop></video>

  </body>
</html>

Rezultat

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

mediagroup

Przeznaczenie atrybutu mediagroup

Atrybut mediagroup wykorzystany wraz z elementem video określa nazwę grupy media, do której ma należeć zasób internetowy reprezentowany przez dany element video.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu mediagroup

nazwa

Należy podać ciąg znaków, który chcemy aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas nazwy.

Przykładowy Kod HTML

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

    <video src="http://webkod.pl/files/html/film-01.mp4" mediagroup="grupa-1" autoplay controls></video>
    <video src="http://webkod.pl/files/html/film-01.mp4" mediagroup="grupa-1" autoplay></video>

  </body>
</html>

Rezultat

Oba zasoby internetowe reprezentowane przez różne przykładowe elementy "video" należą do tej samej grupy media o nazwie "grupa-1", ponieważ do każdego ze wspomnianych elementów "video" został dodany atrybut "mediagroup" wraz z wartością "grupa-1".

muted

Przeznaczenie atrybutu muted

Atrybut muted wykorzystany wraz z elementem video określa czy zasób internetowy reprezentowany przez dany element video powinno 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="http://webkod.pl/files/html/film-01.mp4" muted controls></video>

  </body>
</html>

Rezultat

Podczas odtwarzania przez przeglądarkę internetową zasobu internetowego reprezentowanego przez przykładowego element "video" dźwięk będzie wyciszony, ponieważ do wspomnianego elementu "video" został dodany atrybut "muted".

poster

Przeznaczenie atrybutu poster

Atrybut poster wykorzystany wraz z elementem video określa adres zasobu internetowego, którym powinien być obrazek, który powinien być widoczny w widocznym obszarze danego elementu video, przed rozpoczęciem odtwarzania zasobu internetowego reprezentowanego przez wspomniany 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="http://webkod.pl/files/html/film-01.mp4" poster="http://webkod.pl/files/html/film-01-okladka-01.png" controls></video>

  </body>
</html>

Rezultat

Przed rozpoczęciem odtwarzania zasobu internetowego reprezentowanego przez przykładowy element "video", w widocznym obszarze wspomnianego elementu "video" widoczny jest obrazek znajdujący się pod adresem "http://webkod.pl/files/html/film-01-okladka-01.png", ponieważ do wspomnianego elementu "video" został dodany atrybut "poster" wraz z wartością "http://webkod.pl/files/html/film-01-okladka-01.png".

preload

Przeznaczenie atrybutu preload

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

Wartość domyślna

wartością domyślną atrybutu preload elementu video, gdy wspomniany atrybut preload został przez nas pominięty jest wartość określona przez przeglądarkę internetową (wspomnianą wartością zazwyczaj jest wartość metadata)

auto (gdy nie podaliśmy wartości)

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

Wartości atrybutu preload

none

Wartość none oznacza, że zasób internetowy reprezentowany przez dany element video nie zostanie wczytany do okna przeglądarki internetowej dopóki użytkownik sam nie podejmie próby rozpoczęcia odtwarzania wspomnianego zasobu.

Przykładowy Kod HTML

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

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

  </body>
</html>

Rezultat

Do momentu, aż użytkownik nie zdecyduje się na kliknięcie na przycisk rozpoczynający odtwarzanie zasobu internetowego reprezentowanego przez przykładowy element "video", wspomniany zasób internetowy nie 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 tylko informacje metadata o zasobie internetowym reprezentowanym przez dany element video (np. długość trwania filmu, pierwsza klatka, szerokość, wysokość) zostaną wczytane do okna przeglądarki internetowej, natomiast pozostałe informacje o wspomnianym zasobie internetowym reprezentowanym przez element video zostaną wczytane w momencie gdy użytkownik sam podejmie próbę rozpoczęcia odtwarzania wspomnianego zasobu.

Przykładowy Kod HTML

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

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

  </body>
</html>

Rezultat

Do momentu, aż użytkownik nie zdecyduje się na kliknięcie na przycisk rozpoczynający odtwarzanie zasobu internetowego reprezentowanego przez przykładowy element "video", tylko informacje metadata o wspomnianym zasobie internetowym 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 polecenie wymuszenia wczytania w całości do okna przeglądarki internetowej zasobu internetowego reprezentowanego przez dany element video.

Przykładowy Kod HTML

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

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

  </body>
</html>

Rezultat

Zasób internetowy 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".

Przeglądarka internetowa może zignorować wspomniane polecenie wymuszenia.

src

Przeznaczenie atrybutu src

Atrybut src wykorzystany wraz z elementem video określa adres zasobu internetowego, który powinien 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="http://webkod.pl/files/html/film-01.mp4" controls></video>

  </body>
</html>

Rezultat

Zasobem internetowym, który powinien być reprezentowany przez przykładowy element "video" jest zasób internetowy "film-01.mp4" znajdujący się pod adresem "http://webkod.pl/files/html/film-01.mp4", dlatego do wspomnianego elementu "video" został dodany atrybut "src" wraz z wartością "http://webkod.pl/files/html/film-01.mp4".

width

Przeznaczenie atrybutu width

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

Wartość domyślna

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

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="http://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".