Ostatnio edytowany:

source

Autor: Virtual Patriot

Przeznaczenie elementu source

Element source reprezentuje zasób internetowy, który ma pełnić rolę alternatywnego (zamiennego) zasobu internetowego, który może być reprezentowany przez któryś z elementów HTML należących do kategorii element media.

Dodatkowe techniczne informacje o elemencie source

kategoria ogólna

brak

kontekst zewnętrzny
jako element dziecko elementu media przed jakąkolwiek ewentualną zawartością opływającą lub ewentualnymi elementami track wspomnianego elementu media

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 zewnętrznym przykładowych elementów "source" jest element "video", dla którego wspomniane elementy "source" są elementami dziećmi. Wspomniany element "video" jest jednym z elementów HTML, które należą do kategorii elementy media, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "video", jest prawidłowym kontekstem zewnętrznym dla poszczególnych elementów "source".

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 zewnętrznym przykładowych elementów "source" jest element "video", dla którego wspomniane elementy "source" są elementami dziećmi. Wspomniany element "video" jest jednym z elementów HTML, które należą do kategorii elementy media. Ponadto wspomniane elementy "source" występują przed elementem "track", dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "video", jest prawidłowym kontekstem zewnętrznym dla poszczególnych elementów "source".

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 zewnętrznym przykładowych elementów "source" jest element "video", dla którego wspomniane elementy "source" są elementami dziećmi. Wspomniany element "video" jest jednym z elementów HTML, które należą do kategorii elementy media. Ponadto wspomniane elementy "source" występują przed zawartością opływającą elementu "video", którą w tym wypadku jest element "p", dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "video", jest prawidłowym kontekstem zewnętrznym dla poszczególnych elementów "source".

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 zewnętrznym przykładowych elementów "source" jest element "video", dla którego wspomniane elementy "source" są elementami dziećmi. Wspomniany element "video" jest jednym z elementów HTML, które należą do kategorii elementy media. Ponadto wspomniane elementy "source" występują przed elementem "track" oraz przed zawartością opływającą elementu "video", którą w tym wypadku jest element "p", dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "video", jest prawidłowym kontekstem zewnętrznym dla poszczególnych elementów "source".

kontekst wewnętrzny

brak

wymagane elementy dzieci

brak

wymagane atrybuty

atrybut src

składnia HTML

<source>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

zawsze

CSS display

none

Dodatkowe domyślne reguły CSS elementu source

source {
  display:none;
}

Interpretacja elementu source

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

Opis atrybutów elementu source

src

Przeznaczenie atrybutu src

Atrybut src wykorzystany wraz z elementem source określa adres zasobu internetowego, który powinien być reprezentowany przez dany element source.

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>

    <audio controls>
      <source src="http://webkod.pl/files/html/utwor-01.wav">
      <source src="http://webkod.pl/files/html/utwor-01.mp3">
    </audio>

  </body>
</html>

Rezultat

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

type

Przeznaczenie atrybutu type

Atrybut type wykorzystany wraz z elementem source określa informację o typie MIME, jaki posiada zasób internetowy reprezentowany przez dany element source.

Jeżeli typ MIME określony przez nas za pomocą wartości danego atrybutu "type" nie będzie zgadzał się z typem MIME posiadanym przez zasób internetowy reprezentowany przez dany element "source", wtedy wspomniany zasób internetowy będzie traktowany przez przeglądarkę internetową jako zasób nieistniejący.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu type

typ MIME

Należy podać ciąg znaków w formie typu MIME.

Przykładowy Kod HTML

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

    <audio controls>
      <source src="http://webkod.pl/files/html/utwor-01.wav" type="audio/wav">
      <source src="http://webkod.pl/files/html/utwor-01.mp3" type="audio/mpeg">
    </audio>

  </body>
</html>

Rezultat

Ponieważ do przykładowego elementu "source" został dodany atrybut "type" wraz z wartością "audio/mpeg" wspomniany element "source" reprezentujący zasób internetowy znajdujący się pod adresem "http://webkod.pl/files/html/utwor-01.mp3" zawiera dodatkową informację dla przeglądarki internetowej o tym, że typem MIME, jaki posiada wspomniany zasób internetowy jest typ wskazujący na plik typu MP3.