HTML <source> ετικέτα

  • Προηγούμενη σελίδα <small>
  • Επόμενη σελίδα <span>

Definition and Usage

<source> The tag is used to specify media elements (such as <video>,<audio> and <picture>）Specify multiple media resources.

<source> The tag allows you to specify alternative video/audio/image files, and the browser will choose the first one it supports based on browser support or viewport width. <source>.

See also:

HTML Tutorial:HTML Βίντεο

HTML Tutorial:HTML Ήχος

HTML DOM Reference Manual:Source Object

Instance

Example 1

This is an audio player with two audio source files. The browser will choose the first one it supports. <source>:

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

Try it yourself

Example 2

Use in <video> <source> Play video:

<video width="640" height="400" controls>
  <source src="shanghai.mp4" type="video/mp4">
  <source src="shanghai.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Try it yourself

Example 3

Use in <picture> <source> To define different images based on viewport width:

<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>

Try it yourself

Attribute

Attribute Value Description
media Media Query Accepts any valid media query, usually defined in CSS.
sizes Specify the image size for different page layouts.
src srcset

Used to specify the URL of the media file.

When <source> is used for <audio> and <video>, this attribute is required.
srcset srcset

URL

Specify the URL of the image to be used in different cases.
The attribute is required when <source> is used with <picture>. MIME type Define the MIME type of the resource.

Global attributes

<source> Η ετικέτα υποστηρίζει επίσης Global attributes in HTML.

Attributes of events

<source> Η ετικέτα υποστηρίζει επίσης Attributes of events in HTML.

Προεπιλεγμένες ρυθμίσεις CSS

Χωρίς.

Υποστήριξη του προγράμματος περιήγησης

Τα αριθμήματα στην τаблицή δείχνουν την έκδοση του προγράμματος περιήγησης που υποστηρίζει πρώτη φορά αυτό το attribute.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 4.0 10.5
  • Προηγούμενη σελίδα <small>
  • Επόμενη σελίδα <span>