Tanda <source> HTML

Definisi dan penggunaan

<source> Tag digunakan untuk elemen media (seperti <video>,<audio> dan <picture>）Tentukan beberapa sumber media.

<source> Tag memungkinkan Anda menentukan file video/audio/gambar alternatif, peramban akan memilih yang pertama yang didukung atau lebar viewport. <source>.

Lihat pula:

Panduan HTML:Video HTML

Panduan HTML:Audio HTML

Panduan HTML DOM:Objek Source

Contoh

Contoh 1

Ini adalah pemutar audio dengan dua file sumber audio. Peramban akan memilih yang pertama yang didukung. <source>:

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  Peramban Anda tidak mendukung tag audio.
</audio>

Coba sendiri

Contoh 2

Gunakan di dalam <video> <source> Mainkan video:

<video width="640" height="400" controls>
  <source src="shanghai.mp4" type="video/mp4">
  <source src="shanghai.ogg" type="video/ogg">
  Peramban Anda tidak mendukung tag video.
</video>

Coba sendiri

Contoh 3

Gunakan di dalam <picture> <source> Untuk menentukan ukuran gambar yang berbeda berdasarkan lebar viewport:

<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="Bunga" style="width:auto;">
</picture>

Coba sendiri

Atribut

Atribut Nilai Deskripsi
media Media Query Menerima setiap media query yang berlaku, biasanya didefinisikan di CSS.
sizes Tentukan ukuran gambar untuk tata letak halaman yang berbeda.
src URL

Untuk menentukan URL file media.

Ketika <source> digunakan untuk <audio> dan <video>, atribut ini diperlukan.
srcset URL

Untuk menentukan URL gambar yang digunakan dalam situasi yang berbeda.

Ketika <source> digunakan untuk <picture>, atribut ini diperlukan.
type Jenis MIME Tentukan jenis MIME untuk sumber.

Atribut global

<source> Tanda masih mendukung Atribut global di HTML.

Atribut peristiwa

<source> Tanda masih mendukung Atribut peristiwa di HTML.

Pengaturan CSS standar

Tidak ada.

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini.

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