Tag HTML <source>

Definicja i użycie

<source> Etykiety <audio> i <video> są używane do określenia elementów multimedialnych (np. <video>,<audio> i <picture>) Określ wiele zasobów multimedialnych.

<source> Etykieta pozwala określić alternatywne pliki wideo/audiow graficzne, które przeglądarka może wybrać na podstawie obsługi przeglądarki lub szerokości viewportu. Przeglądarka wybierze pierwszy, który obsługuje. <source>.

Zobacz również:

Kurs HTML:Wideo HTML

Kurs HTML:Audio HTML

Podręcznik HTML DOM:Obiekt Source

Przykład

Przykład 1

To jest odtwarzacz audio z dwoma plikami źródłowymi. Przeglądarka wybierze pierwszy, który obsługuje. <source>:

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  Twoja przeglądarka nie obsługuje etykiety audio.
</audio>

Spróbuj sam

Przykład 2

Użycie w <video> <source> Odtwórz wideo:

<video width="640" height="400" controls>
  <source src="shanghai.mp4" type="video/mp4">
  <source src="shanghai.ogg" type="video/ogg">
  Twoja przeglądarka nie obsługuje etykiety wideo.
</video>

Spróbuj sam

Przykład 3

Użycie w <picture> <source> Aby zdefiniować różne obrazy na podstawie szerokości viewportu:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

Spróbuj sam

Atrybut

Atrybut Wartość Opis
media Zapytanie media Akceptuje każdą ważną zapytanie media, zazwyczaj zdefiniowane w CSS.
sizes Do określenia rozmiaru obrazu dla różnych układów strony.
src URL

Do określenia URL pliku multimedialnego.

Kiedy <source> jest używany dla <audio> i <video>, ta właściwość jest obowiązkowa.
srcset URL

Używany do określenia URL obrazu do użycia w różnych przypadkach.

Kiedy <source> jest używany z <picture>, ten atrybut jest obowiązkowy.
type Typ MIME Określają typ MIME zasobu.

Globalne atrybuty

<source> Tagi obsługują również Globalne atrybuty HTML.

Atrybuty wydarzeń

<source> Tagi obsługują również Atrybuty wydarzeń w HTML.

Domyślne ustawienia CSS

Brak

Wsparcie przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 4.0 10.5